19. The characters animations

We now had all our illustrations for every characters, we thought it was almost done but it was before to start animated them. As we had a 2D video game, we needed to create frame by frame animations for every characters.


The first step we did was to list all the animations we would need to do for every characters. Wido was of course the one with the most :

  • stand up
  • run
  • jump
  • attack (simple, combo x2, combo x3)
  • be injured
  • be thrown
  • invoke a rune
  • do a forward roll
  • interact with an object
  • die

We didn’t had much time before our final deadline. We needed to find the fastest way to create all these animations. This is why we created each body parts of the characters independently. It allowed us to easily modified them separately. The goal was to work on each frame of the illustration by only changing the rotation, or the scale of the body parts which needed to be modified. Of course it didn’t work for each of them, but it definitely improved the production process of the animations.

All the characters have been built to facilitate the animation process.

In frame by frame animations if there is one thing extremely important it concerns the timing of the animation. We did different tests of how many illustrations we needed for an action to be smooth enough. The goal was to have the minimum amount of illustrations for each actions to avoid wasting time doing extra frames. We spent some time to find good sprite sheet references from video games that had 2D characters and similar animations that we wanted to do (like jumping, running, etc) to help us. One other really important thing was of course for the animations to loop.

Run cycle.
Jump cycle.
Attack cycle.
Forward roll cycle.

This was a huge task which demanded us to study traditional animations techniques and to have a good workflow between designers and developers. As our video game was developed with the latest version of Flash (the Molehill beta back then), it made sense for us to create all the sprite sheet using Flash. We imported all the frame by frame illustrations from Illustrator into Flash.

Flash animations structure.

Then, we created as many movie clips needed for every characters regarding their amount of actions into the game.

The last step was to set the best timing possible for every animations by playing with the keyframes. We also added some blur effects for some of them.


End of post 19 — Next post : 20. The set design

Every week, a new post. Follow the upcoming articles here @kokopako