Pikmin fangame engine/Creating animations
This page will guide you on the way animations work on the Pikmin fangame engine, and how to make your own.
An animation is a collection of images that flip in quick succession to give the illusion of movement. For instance, for a Pikmin's attack animation, it would consist of an image (also called a frame or a sprite) with the Pikmin clinging on, an image with it reeling its head back, an image with it swinging the head forward, and an image where the stem shows recoil from impacting something. By quickly flipping through these images, it gives the illusion that the Pikmin is moving.
On the engine, every object has a list of animations, frames, and hitboxes. Animations are made up of frames (still images), and hitboxes (or hitbubbles), which are regions that the engine recognizes as body parts, can be placed in different positions for each frame.
In order to save on space, frames may be reused. As such, it is important to note the distinction between a frame and a frame instance. A frame is a still image, while the instance of a frame is any one time the frame appears on an animation. For instance, if a certain animation uses the frames A → B → C → B (and loops back to the start), it is said that this animation uses four frames, with frames A and C having one instance, but frame B having two instances.
Starting some animations
Before beginning to animate an object, you must have that object on the game's data (see the object types tutorial), as well as some images to be used as the frames. In order to be consistent with the style, the images should be in a top-down perspective. Each image must also show the object facing the right. Although it is possible to place each image in a different file, it is a lot more efficient to have all (or most) images for the object within the same file, separated by a grid. These are what is known as "spritesheets". For examples, see the spritesheets that come with the engine.
If your enemy is completely new, you will have to create the images from scratch, or download them off somewhere. If your image is a recolor of an existing one, you can make a copy of the original enemy's spritesheet and use any painting program to change the colors. You can also use the SVG files used on the prepackaged enemy graphics with a vectorial art editing program to change the color schemes.
Using the animation editor
On the engine, open the animation editor. On the left side of the editor, you'll see an empty canvas. This area will show what the frames and animations look like. On the right side, there is a panel, where you perform most of your tasks. Below that panel is a smaller panel with a button to toggle hitbox visibility (plus the grid that aims to the center), load the animations from the game files, save the animations to the game files, and exit the editor. Finally, to the bottom-left is a status bar that will give you information about anything you place your mouse cursor over on the panel, so use that if you need help.
For the sake of this tutorial, we'll be creating the animations for a Red Bulborb, using the pre-packaged Red Bulborb spritesheet. For that, you should probably create a new Red Bulborb enemy, as you don't want to work on top of the existing enemy's animations; we're doing things from scratch.
Pick your enemy from the list. Because this is a Red Bulborb, which should be located on the Enemies folder, first you must click the "Category" button and pick "Enemies", and then you may select the Red Bulborb with the "Object" button. After you load the object, some buttons and statistics will appear. Let's begin by creating the enemy's hitboxes.
Creating a hitbox
From the main panel, click "Edit hitboxes", so that you may enter the hitbox control panel. Some instructions appear on the top-right. There should be no hitboxes, so let's use the textbox on the panel to type the name of a new one. But first, let's think about what hitboxes this enemy will need. Hitboxes are circles, and because the Bulborb is a very round creature, we could use a bubble for its entire body and call it a day. But it is also true that hitting a Bulborb on its back causes more damage than the front. So we'll need to distinguish between the usual body and the back. Finally, the Bulborb can grab Pikmin with its mouth, and the engine must be able to not only recognize the mouth as a body part that can capture Pikmin, but also have the mouth as its own hitbox so that it may make the Pikmin follow it around, until they die.
Let's start with the simplest one: the body. Type
body on the textbox, and press the nearby "+" button. This will register the first hitbox. Then do the same for "back", and once that is done, do it for "mouth". There, now the hitboxes that we'll be needing are all registered. Oh, but there is something else we need to think about here. Because the hitboxes are bubbles, it will be nearly impossible to align them on the Bulborb without them overlapping, unless we leave a huge chunk of the enemy uncovered by hitboxes. What happens if a Pikmin hits both the "back" and the "body" hitboxes, because they intersected? How will the engine know which one to consider the real hitbox? This is where the note on the panel comes into play. The lower the number of a hitbox, the higher its priority for scenarios like that one.
We will want the player to benefit from the extra damage bonus as much as possible, so it's fair that the back hitbox has higher priority when it comes to being picked in the case of a tie. But the order we currently have is the body as #1 and the back as #2 (you can use the < and > arrow buttons to switch which hitbox's data you're looking at). We can move the back to the previous number by pressing the "<=" button. The arrows may be a bit confusing, but remember that the status bar on the bottom-left can explain what they do so long as you place your mouse over them.
Creating a frame
You can now press the "Back" button to return to the main panel. From here, enter the "Edit frames" mode so we may create our first frame of animation. Begin by pressing the "Frame" button at the top of the panel. This will give you a list so you can choose which frame is it that you are editing, but because there are none, the list will be empty. There is however a textbox at the top which you can use to create a new one. Just give it a name. Let's start with the most basic pose, which would be the idle position. Type "idle" for the name of this frame.
A fair bit of information just got unlocked, and a green bubble appeared on the center of the canvas. If you can't see the bubbles, click the "Hit" button on the bottom-right. Either way, ignore the bubble for now. We will need to specify in what file the image for this frame can be found in. For that, we use the "File" textbox. The file should be located on the "Game_data/Graphics" folder, and when writing the name, you should include the extension. To use the pre-packaged Red Bulborb spritesheet, type "Red_Bulborb.png" into the box. Now, we need to tell the engine where in the spritesheet our "idle" sprite is. On the pre-packaged spritesheet, this is the one on the top-left. For the "File XY" textboxes, we will specify the coordinates of the top-left point of the sprite. For this pose, they're in the top-left corner, so both X and Y are 0. You can use a painting program like Paint or GIMP to check the coordinates of a point in an image. Now, we will tell the engine the size of this sprite on the spritesheet. The pose in question, on the pre-packaged sheet, is 153 pixels in width, and 103 in height, so type those values onto the "File WH" textboxes.
The engine has now successfully captured the image from within the spritesheet, and we should see the Bulborb on the main window. You'll notice how the editor automatically filled in the "Game WH" fields based on what you typed. In general, the sprites should be made so that one pixel in the image corresponds to one pixel in the game world, which means that the in-game dimensions are normally the same as the in-file dimensions. This is true for the pre-packaged Red Bulborb, so type "153" and "103" on those boxes as well. But things like leaders and Pikmin use higher quality images, which means that the in-game dimensions cannot be the same, otherwise they would show up as huge. Plus, a Dwarf Red Bulborb uses the same spritesheet, but in-game, the graphics are much smaller, so the "Game WH" fields are changed to something smaller.
Right after you changed the dimensions, if all went well, you should've seen the Bulborb's idle pose appear on the canvas. Although some enemies have the center of their sprites match the center of their body, this is not quite the case for the Red Bulborb, as it makes more sense to consider the center of its body as the center of its backside (you reach conclusions like these by trial-and-error, so don't worry that you didn't think the same). The white plus-shaped grid indicates where the center of the object is. In order to align the sprite, we will use the "Offset" textboxes. To align this sprite of the Red Bulborb, simply type 16 for the X offset, but different sprites might require different measurements. Feel free to type the "Offset" button to launch a wizard that helps you align it better; this allows you to use the mouse instead of typing numbers, and allows you to compare the current frame with an existing one.
Placing hitbox instances
Our frame is now good to be used in an animation, except the hitboxes are all crumpled up. That's right – the green bubble in the center of the sprite is the three hitboxes we created, all occupying the same spot. Click the "Edit hitboxes" button on the frame data panel. The bubble will receive a gentle glow, to let you know that it is currently selected. You can see which hitbox this is by checking the name on the top-right of the panel. To select a different hitbox, either click on it, or use the "<" and ">" buttons. We can move a hitbox by clicking on its center, and dragging it with the left mouse button. In order to cleanup the workspace so we can get a better view on how to organize the hitboxes, drag the three hitboxes away so that they are far away from one another. Now, let's take care of each one at a time.
Of the three hitboxes, pick the one corresponding to the Bulborb's back, which we named "back". Use your mouse to place it on the Bulborb's back. You should see the X and Y textboxes update as you move it around, meaning you can either position a hitbox using the mouse, or those hitboxes. Now, you may have noticed that the hitbox doesn't cover up the creature's back that well. That's because the hitbox is using the default size of 32, and we're meant to change sizes as we see fit. To change a hitbox's size, you can either edit the "Radius" textbox, or grab the perimiter of the hitbox and drag it around with the left mouse button. With a radius of 50, the hitbox fits the Bulborb's backside just fine, so simply drag it into place after you're done changing its size.
Before we move on, we need to specify something else: the Z and the height. Just like the X and Y coordinates control where the hitbox is in space, so the Z coordinate controls where it is vertically. Imagine the hitboxes as cylinders. 0 means it starts at ground level, and higher values make it float off the ground. For most enemies, you can keep it simple and leave all hitboxes to start at ground level, but if you want to create, say, a Beady Long Legs, the body's hitbox will need to be above ground, and this is where you'd change it. The height is important, on the other hand. If the height is 0, that means the hitbox has no size, and will not work. So, we must set its height so that the Pikmin, leaders, etc. may interact with it nicely. For most cases, the Bulborb included, we can once again keep it simple: simply write on this height the exact same height that the Red Bulborb object has, which should be 128. In-game, everything will look good enough, but if you wanted an unnecessary level of realism, you would need to write more specific heights for each body part (for instance, the Bulborb's mouth is not as tall as its whole body).
Now that the "back" hitbox's positioning is all set up, let's change how it works for combat. There are three radio buttons labeled as the "Hitbox type". Bulborbs can't attack with their backsides, and the hitbox is certainly functional on the "idle" pose, so it's neither an attack nor a disabled hitbox. So, the hitbox type to pick here is "Normal". Remember how the backside is meant to suffer extra damage from Pikmin attacks? We can set that on the defense multiplier. "1" means that hitbox has a defense of 100%, so it takes full damage, while "0.8" means the hitbox only has 80% defence, meaning it takes a bit more damage than normal. "0.8" seems like a good value for this hitbox, but lower than that could start to make the backside too weak. Remember to experiment when creating your own enemies. Before we move on to the next hitbox, check the "Pikmin can latch" checkbox because Pikmin are indeed meant to latch on to a Bulborb's back.
Now, do the same for the body hitbox. As was stated before, it will be next to impossible to place the hitboxes such that they don't overlap or leave parts of the enemy uncovered, so try to go for a good balance between the two. Make the hitbox cover the parts of the body and head that the "back" hitbox doesn't cover, but don't make it too big, otherwise Pikmin will be able to latch on and hit the air. Likewise, don't make it too small, or else Pikmin will not be able to grab a part of the Bulborb that should seemingly be grabbed. Try these coordinates: 52 and 0 for the X and Y, and 40 for the radius. This is more or less how the hitboxes should be placed: they cover everything with a good balance. Remember to also fill in the hitbox's Z (still simple, so still ground level, so still 0) and height (still the height of the Bulborb, 128), the hitbox type (also normal), and specify that Pikmin can latch on to it. You can leave the defense multiplier as 1.0, as it makes sense for the body to take a normal amount of damage.
Finally, let's move on to the mouth. This is the body part that will be able to hold captured Pikmin, so don't make it too big nor too small. A radius of 16 for this is enough. Place it on the general area of the mouth. Fill in the other stats as usual. Now, do we really want the Pikmin to be able to attack the mouth? It's a body part like any other, but it might make things a bit more complex to keep the mouth around, specially considering that it's so small, and the bulk of the damage collisions happen on the creature's main body and back. As such, change this hitbox's type to "disabled", meaning that, in an "idle" pose of whatever animation, the engine will not have to worry about its mouth. Of course, it will worry about the mouth on some other frames, just not here.
Let's create the rest of the frames for the walking animation. If you didn't notice, the "idle" frame is part of the walking animation. The idle pose is the Bulborb posing still in a neutral position, but to walk, it lifts its left leg, returns to the neutral position, lifts the right, returns to neutral. For most enemies, the "idle" frame is actually used quite a lot. To create the other frames of animation the animation (walkl1, walkl2, walkr1, walkr2), check the Red Bulborb that comes with the engine. You can also copy and paste from the Animations.txt files. One thing to note is that "walkr1" is just "walkl1" except flipped vertically. You can obtain this effect by specifying a negative height (negative width obviously means flipping horizontally).
Once you have those frames, go to the main panel and enter the "Edit animations" mode. It should be empty, since there are no animations, but just like with the frames, we can click the "Animation" button to create a new animation. For the walking animation, call it "walk". Ignore the "Loop frame" box for now. The frame list is a list of the frames that this animation is composed of; each one of these is an instance of one of the frames we created earlier. There is a button to play or pause the animation on the left side of the editor, a button to switch what frame instance is the current one, a button to add a new frame instance, and a button to remove the current one from the list. Add the first one with the "+" button. On the "Frame" button, choose "idle", which will be the first frame instance of our animation walking. Next, we specify how long this frame exists for until it is replaced by the next one on the list. 0.1 or 0.2 is usually a good value, if your frames aren't very similar, which is the current case.
Press "+" once again to add a new frame. This will be created the same as the previous frame, for convenience, meaning you don't need to change the duration this time (unless you want to). The next frame in the animation would be "walkr1", followed by "walkr2", "walkr1" again, "idle", "walkl1", "walkl2", and "walkl1". It would make sense for the animation to loop back to the first "idle" frame so it repeats the same "right foot left foot" cycle. This is where the "Loop frame" textbox from before is used. Luckily, it is already set at 1, which is the first frame, so you don't need to change it this time, but if you wanted the animation to repeat from a specific frame, this is where you'd write the frame's number. Feel free to play the animation with the "P" button. As a reminder, you can also use the "Hit" button on the bottom-right panel to disable the grid and the hitboxes, which will give you a better view of the animation.
When editing frames for a Pikmin, you must specify where the Pikmin's top (leaf, bud, or flower) is to be located on that frame. For that, click the "Edit Pikmin top" button on the panel when editing a frame. You can then drag around with the left mouse button to move the top's positioning, but you can also set it with "X&Y" textboxes. You can set the dimensions of the top's sprite using the textboxes, or you can switch modes on the panel and use the left mouse button for that instead. Finally, you can also set the top's angle, and once again, change modes to rotate with the mouse button. If you would like to see how the Pikmin looks with a different object as its top, press the "Change maturity" button.
On some frames, the top might not visible whatsoever. For instance, when a Pikmin is thrown, on the frames where it is upside down, the top is under the Pikmin, so from a top-down view, it is impossible to see. For these cases, uncheck the "Visible" checkbox.
To create enemies, you can make whatever animations you wish, and you can call them whatever. As long as you use the correct names on the script, all is good. But for Pikmin, gates, and most other objects, the engine is the one that decides what animations to switch to, and it expects to find them with specific names on the object's animation data.
All object types need an
idling animation. This is the object in its most basic state: just sitting around doing nothing. For objects that have no real animation or choice on what to do, like a gate, this animation is important, as it represents its "usual" state. Besides the
idling animation, the following is a list of what animations exist for every object type.
thrown: Twirling in the air after being thrown.
attacking: Reeling back its head and smacking with it.
grabbing: Standing upright and grabbing onto an object.
sprout: Idling underground; only the stem is visible.
plucking: Coming out of the ground.
lying: Knocked down to the ground by an attack, staying there for a bit, and getting back up.
carrying: Carrying an object.
sighing: Sighing after becoming disappointed with something, like being unable to reach a carrying spot.
Note that Pikmin don't use hitboxes, so you don't need to create any. Also note that, on the frame in which a Pikmin's attack connects, you should include a "signal" on the signal textbox, like "0". This lets the engine know that when the Pikmin reaches this frame of animation, that an attack connected, and damage needs to be dealt.
getting_up: Getting up from lying down or from being knocked down.
dismissing: Dismissing the group.
throwing: Throwing a Pikmin or teammate.
lying: Lying down on their own accord (like the Napsack in Pikmin 2) and staying there.
pain: Reeling back their head in pain.
knocked_down: Knocked down to the ground by an attack, staying there for a bit, and getting back up.
spraying: Using a spray.
Note that leaders don't use hitboxes, so you don't need to create any.
Gates and bridges
destroyed: Nothing's there; this is after the obstacle is cleared.
Game_data/Animations contains a list of custom animations that aren't necessarily bound to an object. These can include animations expected by the engine, like the title screen's logo, as well as entirely custom animations, that can be used for status effects or liquids.
- You can zoom in on the canvas by scrolling the mouse wheel, pan by holding the right mouse button, and reset the zoom and pan by clicking the mouse wheel.
- You can press Ctrl + Tab or Ctrl + Shift + Tab (Cmd instead of Ctrl on Mac) to go left and right between the current hitbox, frame, etc.
- Remember to save periodically. Although rare, it is possible for the editor to crash, causing you to lose unsaved progress.
- When making a spritesheet, try to add at least one row or column of empty pixels between each frame. Without this padding, some in-game frames will have artifacts from a frame right next to them.
- If your graphics are twice the resolution of your in-game size, you can enter the special tools from the main menu, and use the resolution resize tool. If they're twice as big, use the value "2" in this tool.
- If you accidentally named a frame or an animation the wrong thing, you can enter the special tools from the main menu, and use the corresponding renaming tools.
- If you have an enemy shaking animation, and only want a percentage of the Pikmin to be shaken of, you can make the shake animation a "missable" attack animation. For instance, if you type in the textbox
70, that means only 70% of the Pikmin that are latched on will get knocked out, on average. This can be used for other attacks too, not just shaking. This feature only affects Pikmin, and does not apply to hitboxes with hazards.