Sometimes a cutscene or map calls for a more detailed animation than the default sprite walking animation. A ballroom needs its dancers to hold each other in their arms while they waltz and a kiss between lovers can make a farewell scene even more emotional, so let’s take a look at how we can create some of our own animated behaviors.
You can use your favorite graphic program for these edits, just make sure that it lets you use layers since that will simplify quite a few steps. And if you need a quick refresher course when it comes to spritesheets and how they’re set up, make sure to read Avery’s tutorial before continuing!
Let’s start out by making some people dance together. If we were to use the default sprites, our dance floor would end up looking like this:
While it does work, the dancing itself is lackluster. Our dancers are standing far apart and only have their stepping animation on, so it looks like they could just be having a very enthusiastic conversation. The other issue is if we would have to do a lot of planning when it comes to move routes if we want them to move around the stage to make sure they stay together. Instead of all that headache, why don’t we create a single sprite for our dancing couple?
First thing we need are our dancers’ sprites, which we can grab from a default or generated spritesheet.
With our two dancers chosen, we need to decide on the direction they’ll be dancing and pick the fitting directions for each sprite. Our dancing example had the woman facing right and the man facing left so let’s stick with that layout. The colored frame outlines aren’t necessary, but they can help make sure that your dancers line up properly.
To make sure our dancers have enough room, let’s expand our sprite frames from 48 pixels wide to 64 pixels and then lay our two dancers on top of each other in the center of our expanded frames.
And now that they’re close to each other, our dancers are ready to go! Well, not quite. If we put them in-game as they are now, it’ll be obvious how their arms are just swinging as if the two of them are trying to walk through each other instead of dancing together.
Let’s make them hold hands while they dance to fix that problem. They already have a frame where their arms are swinging towards each other, so we can use those arms as a starting point.
If we copy just their arms, we can see that while the arms don’t quite reach each other they both have some spot where we can shift them by selecting and moving them a pixel over to make them touch. Then we can put those edited arms on top of our starting frame and cover up the old arms with the same colors as their outfits.
We have one frame that works great now, but if we copy our edited arms over to the other two frames we can see where the old arms make our dancers look like multi-armed aliens. Since our edited arms are still on a separate layer, we should be able to just erase the old arms and then fill in our dancers so that they don’t have arm-shaped holes in their sprites.
Once we remove the old arms and clean up our dancers' outfits, we can finally see the finished dancing behavior!
Now that our dancers are holding hands properly, we can recolor their hair and clothes to make different dancers. And since we kept our two base sprites on separate layers while working, we can also change whose face we can see more of to make our dancers seem even more unique.
We can then make events that have their Stepping and Direction Fix options checked so that our dancers can happily dance in place forever. Since we have their directions fixed, we could even have them move around the dance floor without worrying about their colors changing no matter which direction they move in.
Now, these dancers are fun, but they are meant to stay dancing the entire time. What about making a behavior where two characters come together and then separate in the same scene, like a kiss?
Our kiss will take place between two separate characters, in this case Priscilla and Michelle, in the middle of a cutscene so we need to be able to separate them so their events can move around as needed later.
For our own sanity we’ll skip trying to get both sprites to move at the same time and instead create a single sprite of the kiss, so that during the eventing we can just make one of their events transparent and switch the other’s sprite to the kiss.
Since the characters are standing on separate tiles, we’ll need to use a few frames of the behavior to make sure that they step towards each other and don’t just warp into the kiss. We really only need one stepping frame to fill in the space between standing and kissing (if we felt like having more frames to get closer we could include them, but they’re not necessary).
If we zoom in we can see that we just shifted out sprites to be close enough for their nose/mouth areas to overlap. This could work for a kiss, but since we have space to easily fit another frame into the spritesheet, why don’t we make it a bit cuter and have them hold hands.
We can do the same step to make them hold hands as we did with the dancing, though we can also include a few extra pixels right about their hands to make it look like they are holding both hands.
Lastly, we can have them close their eyes for the final frame by covering their open eyes with flesh tones and then drawing a thin line to show their closed eyes.
With the four frames ready, we can just make sure our spritesheet is sized properly and use it in-game, right? Well, not quite
We need to remember that our event’s sprite will center on the tile the event is on, so if we have Michelle’s sprite change to be the kissing behavior then the behavior sprite will seem to jump to center onto her location.
To avoid that issue, we can include an extra 48 pixels to the right of each frame, so that Michelle becomes the center of the frame to keep the sprite from shifting.
Since Michelle is the center of the frame, the move route that controls her sprite will become the main control center for the behavior. A bonus for that is that since Michelle’s sprite is already facing left, we don’t need to worry about including a ‘Turn Left’ command in the beginning move route to have the behavior play properly.
We can adjust the waits as needed, but the results are a quick kiss between the characters before they return to their normal sprites to move around during the cutscene.
Now you’re ready to add some new behaviors to your game! What other couple or group behaviors would you like to see explained?
Steam Next Fest is here, and it is a time to explore tons of upcoming games, and the team at AstralShift in cooperation with the VisuStella team and Komodo, has joined the festivities with the release of the Demo for their RPG Maker Game Pocket Mirror ~ GoldenerTraum!