Devlog #18 Mind the Gap-The study of LUNA's Character walking system

So, we’ve been meaning to write about LUNA’s character walking system design for quite a while. Now that the optimization of the system has been completed, we are finally able to share some of our process with everyone.

Have you ever wondered how characters walk in video games? In a nutshell - imagine we have a box. The typical method would be to program this box to move from A to B, then replace that box with your character in a flat walking cycle animation. The character will look like it is walking (or running) between those two spots.

But if you look carefully, you will notice that the walking is actually only an imitation - Technically it is a character sliding across the floor while moving its legs. Hardly the carefully hand-animated approach we envisaged for LUNA! You can adjust the start and stop speeds to make it look more natural, but still, in the middle of the animation, the character moves flatly across the floor.

8 bit Mega man game, the character slid a lot on the floor, which is consider normal in most of the game design nowadays for a smoother movement.

8 bit Mega man game, the character slid a lot on the floor, which is consider normal in most of the game design nowadays for a smoother movement.

In real life, we walk step-by-step and our walking distance is usually not an evenly distributed motion like the above example. Our bodies don’t actually move too much between “lifting a foot off the floor from behind us” and “placing it in front of us”. It only starts to move forward when we actually step out and put the foot down, with the forward momentum created by the gap between the two legs.

If we break this action down into an animation sequence of eight frames, four per leg, there are only two frames per leg representative of moving forwards. Therefore, it is rather difficult to code an animation system this way, because the movement is not evenly distributed across the eight frames. ( see break down image for walking cycle below)

walk breakdownOct 2018.png

We knew we wanted to do better than this and for some reason with LUNA, we are so crazy that we wanted to imitate the normal way in which people walk, with each step having a solid place on the floor. We liked the tangible realism of this kind of animation and a handcrafted style worked nicely with LUNA’s hand drawn backgrounds, aesthetic and other animations. However, it also came with a very big challenge!

In order to interact with the different objects in each level, the character needed to be able to start walking then stop at almost any specific spot. A realistic walking cycle would surely not be able to stop at a precise stopping point. So, we had to find a way to deal with the gaps in between.

First of all, we made a total of eight sets of walking animations to cover some of the stopping points within a full walking cycle. If the total set of distance is X, the character can now stop at his ½ X, ⅓ X,¼, X⅛ ...etc. . With these eight mini-distance options and combinations in place, the programming was now able to choose the most suitable animation to play after the player clicked the point where he wanted the character to go.

Also, within each walking set, the character would not just sharply switch from walking to an idle pose. Instead, when he was about to reach his destination, he would stop more like a real person, turning the body a bit and lowering his step. If the walking distance required is a very small amount, instead of walking, the character would now do a small sideways hop like when we cross a puddle on the street!

3 steps of improving the basic walking cycle

3 steps of improving the basic walking cycle

Here we’re showing 3 sets out of those 8, which you can see they cover different distance from a full cycle to just 1/4 of it.

Here we’re showing 3 sets out of those 8, which you can see they cover different distance from a full cycle to just 1/4 of it.

Everything seemed good so far, however this system still did not allow the character to stop at ANY point, because distance can be divided into even smaller fractions, leading us to create an infinite set of animations. That just not achievable (and crazy).

So, after many other tests and adjustments, we decided on a minimum unit of travel, around 5 pixels. This is an insanely small distance at the game’s resolution, but is small enough to serve our purpose. Based on this spec, we distributed any extra distance that our current walking system did not cover into a few of the transitional frames among the eight sets of walking animations - usually the step-down frame which you actually need in order to move the body forward.

This has been one of the most challenging things we've worked on since the beginning of LUNA. It is time-consuming and quite difficult to do. During all this time we couldn’t help thinking, "no wonder most developers choose not to do their walking system in this way!". We don’t know whether it has been worth spending so much time on this and maybe it is not the best approach to walking issues in video games after all - but, this is also the kind of challenge that makes us really grow and learn from the journey, and it is one of the the few precious moments of pride in indie gaming, knowing we stuck to our unique approach and it worked!

Together with our characters’ cell animation and the 2d draw backgrounds, the world of LUNA now feels both magical and also has the tangible feeling we hoped to achieve. It was a kind of adventure journey into the unknown, crossing desert and dark forest but finally arriving the other side, we truly think it was a great experience that we’ve loved sharing with everyone :)