Pixel Perfect Animation in Unity

I was making a pixel art game (again) for LDJAM and this time I wanted it to make my game pixel perfect with dicrete movements of mouse cursor and character by exact pixel values.

Turned out it was much more difficult than expected and not at all documented on the Internet, so I literally spent hours on making it work fine. I wanted to share my experience to help others not waste time like I did. I would also very much appreciate if we could discuss other ways of achieving pixel perfect animation.

I personally think, that these little details add a lot to the game but I'd really like to know what you think. If you'd like to take a look, it's here: https://ldjam.com/events/ludum-dare/38/six-degrees-of-separation-between-me-and-the-party. It's an adventure of two kids trying to crash a party.

Anyway there is already a great article that describes how to render pixel perfect static scenes: https://blogs.unity3d.com/2015/06/19/pixel-perfect-2d/

Making a pixel perfect movement animation is a whole different story. In perfect walking animation the foot that is on the ground stays on the ground through several animation frames until it is replaced by another foot when it touches the ground. The feet on the ground need to stay in the same position every animation frame even though the character moves, the image below illustrates this. The animation is a bit quirky, but with the music it hopefully feels dancefully energetic. :sweat_smile:

walkemanim/em2.gif

In order to make pixel perfect animation in Unity, you need to fulfill two requirements.

The first concerns the animation sprites itself and more specifically the position of the foot that is on the ground. Let's say we would like to move our character by 3 pixels at every animation frame. It means that the foot that gives the impression of being immobilized on the ground needs to move backwards in the animation frames exactly the number of pixels we want the character to move forward (here 3 pixels). This is illustrated by the image below.

_ animation sprite frames _ walkemright/emseul.png

_ with annotations added _ walkemright/emexpl.png

The second requirement concerns the way movement is triggered in Unity. To achieve any movement animation in Unity we need to synchronize 2 elements: - animation speed, which controls the speed at which the animation frames are played - sprite movement speed, which controls the speed at which the sprite is moved in the chosen direction

The problem is that the framerate of the Update function (which is typically used for movement) is not the same as the framerate of the animation. And apparently it can also change depending on the workload.

I tried synchronizing both with a common denominator value but always ended up with some bizarre jerking. So I ended up with using the send event on every frame of animation, to move sprite in the right direction when animation frame changed. The speed of walking is controlled with animation speed.

unity_anim.png

This way of doing is very time consuming and not efficient at all but it works. :sweat_smile:

In the time frame I haven't found any better solution. I'm thinking now of making a tool to make it automatically at import to Unity. But I'd really like to hear from anyone who might have already worked out this problem in a different and more efficient way.

Anyway, if you have any other comments feel free to post them! I'll write about pixel perfect cursor in next post.