Dynamic Pixel Art Walk Animations | Dev Blog

Dynamic Walking Cycles Overview

In my last dev session, I got the project setup and basically just pinned some heads onto a couple different bodies.

In this dev session I added in a walking cycle. It actually isn't the best walking cycle I have made but this is all about exploration so no point in getting things perfect or polishing at this point.

I did add in some more faces, just to add a further sense of variety, and now all the characters can walk around.

Some simple code creates a character offscreen periodically and has them walk across the screen. This is the main purpose of this session, but of course, in my usual style, I added some other stuff in for fun!

Dynamic Walking Cycles Project

Here is the live project, exported from Construct 3, so you can interact with this iframe below:

Right click for full screen. Click/Tap to drop Donuts. Hold Spacebar to make them sit. See more below.

Oh, so one obvious callout: everyone's head always faces the camera. Which is super weird when they walk upwards on the screen.

One reason for that is most of these heads I only have created from one angle. Another reason, besides laziness, is I may look into creating the heads or faces dynamically as well. As in having nose, hair, eyes, and mouth sprites pinned onto a base head sprite instead of one single sprite.

Either way, though this was a simple test, it seems to be working as planned thus far.

Dynamic Character Features and Animations

So obviously you can watch the above project as characters simply walk across the screen.

Although that achieved my goal I wanted to add more, for fun, and to demonstrate the power of animating in this dynamic fashion.

If you tap or click somewhere on the project the characters will move towards where you clicked. I added in my box of donuts sprite to appear where you click just to make it comically logical.

If you hold the spacebar (sorry mobile users) all the characters will sit down where they are at until you release the spacebar.

While you are holding spacebar you can hover the cursor around different people to make them dance.

There is a set radius, so if they are within that radius they will dance and if not they will sit.

You can have some fun trying to round up a group using the donuts then making them dance:

Also, you can hold down the left mouse button and everyone will walk in place. While holding spacebar no new characters will spawn but they will still spawn while holding left mouse button. I added a counter in the top right corner so you can test how many characters your device can handle before starting to lag. Let me know how many you can handle!

Dynamic Character Spritesheets Comparison

So I'm sure there are plenty of people unclear of the benefits of this way of dynamic animation.

Okay, well I doubt plenty of people because I doubt "plenty" of people will ever read this, haha.

Anyway, I wanted to see for myself, as I'm still evaluating this for myself as well, so let's compare spritesheets in this method compared to a traditional method.

So I grabbed the spritesheets for my characters used in Survive The Day Level 2: Donut Perp! for us to see below:

Survive The Day Level 2 Character Spritesheets

There were 6 characters in Survive The Day Level 2. They all could walk in all directions, sit, and then some of them could do other things so had specific animations.

Current Project Spritesheets

So of course there aren't as many specific animations, for example the janitor interactions with the mop, in this project, and only one body style, but I find the comparison impressive.

I remember that it was tedious creating the multiple walking cycles for Level 2. I believe Nate, Glen, and Emmanuel essentially have the same walk cycle. I may have tried to change them a bit just for variation, but if so they are ever so slight.

So copying one walk animation over to a second and third character was very tedious. In this project, we have 25 different characters. Now of course not all of them fit perfectly, but it scales much better!

Not only was adding additional heads a piece of cake, adding the sit and dance animations were pretty straightforward and efficient as well.

I love creating pixel art, but this example here may show that I am definitely skewed for development than art. I don't believe "scaling art efficiently" is what most artists look for, ha!

The biggest thing lost here is the individualism of each unique character's animation. Luckily, my office games are more suited towards getting stuck in a corporate mold than geared for individualism.

Dynamic Character Setup

I don't really have much to share on the setup as the basics are pretty straightforward and same as last time. Most of the setup was more to do with the extras I added, such as choosing path to the donuts. Then some simple events such as sorting the z index, spawning characters, and destroying once far enough offscreen.

Though, there is one change to the setup that I think that is worth noting before it gets more complex:

In the Dev Blog Part 1 I noted that my past solution was not very scalable. This time I added a Script file where I put the head animation names into an array. Since picking a random item from an array takes a couple of lines I created a function for it that could be used elsewhere with different arrays.

Now all I have to do is call the function and pass in the array to get a random character face.

To scale this, all I need to do is add to the array when I add more characters.

In the future, as characters get more dynamic and disassembled more, this may turn into a full object. Something like this head shape gets this type of hair, so it fits, then the names for each direction or something. Not sure, but know it will get more complicated.

What's Next for Dynamic Characters?

I think the next thing I want to focus on are colors.

Construct's built in effect of replace color should come in handy for multiple aspects of the characters. The effect could be used to choose things such as hair color, skin color, pants, and tie color.

So I may try to make a miniature version of a Character Creator!