Inside Velocity 2X: Animation System

Inside Velocity 2X:
1. Lighting
2. Controls
3. Animation System
4. Telepods
5. World Interaction
6. JBraamz
7. Physics
8. Explosions
9. Map
10. Teledash

The beauty of 2D

The animation system for Velocity 2X is based on traditional hand drawn sprite animations to give the artists full control over style and fluidity. Given the wide range of actions performed by Kai, it meant that we needed to tackle potentially thousands of frames of animation.

For instance consider 360° shooting; we have 64 frames for Kai firing in all directions. Now consider all the different situations in which Kai can fire in 360°: standing, running, jumping, falling and sliding.

Rotating knees FTW!

Let’s just take a look at Kai’s run animation, which consists of 30 frames. For each one of those 30 frames, she can be firing in any direction that requires one of the 64 shooting frames.

This means we would need 64*30 = 1,920 frames of animation just for Kai’s running and 360° shooting. That is almost 2,000 frames of animation just for one set of actions!

If we multiply that by 5 (to consider all the cases above where she can fire in 360°) we end up with an art requirement for OVER 9000 (frames of animation)…

Obviously this was impractical from both a production and physical memory point of view, so to get around this issue we split each frame of Kai’s animation into two halves. We have the bottom half (waist and legs) independent of the top half (torso, head and arms). The following image shows the actual in-game sprite sheet for Kai:

Kai Tana Split

In the game we render the bottom and top halves of these sprites with the appropriate scale, offset and overlap values so that Kai appears as a single seamless sprite:

Factoid: This is the same technique James used for his early Flash game, PRISM.

This means that we just have the 30 frames of animation for her running, and the 64 frames for her 360° shooting. The system works as long as the frames are authored in a way that they can be stitched together. Kudos to our artists for figuring out they needed to draw her back arm so it never overlaps her waist…

For those keeping stats, we have over 1000 hand-drawn frames of Kai’s animation that are stitched together at run time to give us over 10,000 total frames of motion.

Bob’s your (slightly irritating) uncle

One last note, even though this system worked for us, it was the most complicated section of code in the game. Not because of the complexity of the system, but because the human body bobs up and down as it runs. Therefore we needed offset values for the top halves to match the action of the legs in the bottom halves. These offset values needed to be hard coded for each and every frame to make sure the animation of her bobbing up and down as she runs remains fluid and seamless no matter what the player decides to do in the game.

Needless to say, this is one aspect of our codebase that I’m happy to never look at again!

It was all worth it. Check out the smooth animation in the trailer below:

P.S. Ever wondered why Kai’s metal head plate changes sides? You can probably work it out now…

Show CommentsClose Comments


  • Dave Robinson (@5ypher)
    Posted August 13, 2014 at 5:57 pm 0Likes

    Wow I could imagine the massive ballache that would be 🙂

    • Hussain @ FuturLab
      Posted August 13, 2014 at 6:28 pm 0Likes

      Hehehehe. It was a massive PITA. But I guess the results justified the means for us. Though I think we will be shifting over to skeletal based animations for future :))))

  • Ernesto
    Posted August 13, 2014 at 7:22 pm 0Likes

    If you were to run it on common browsers, which would be the recomended framerate?

    • Hussain @ FuturLab
      Posted August 13, 2014 at 7:26 pm 0Likes

      We haven’t done much work on browsers, so I am not sure what frame rate works best. For our games, we always tend to go for 60FPS, but that is because the smoothness of controls at 60FPS vs 30FPS is worlds apart. As far as pure animations are concerned ( i-e non game scenario), 30FPS is decent enough!

  • Cryo
    Posted August 14, 2014 at 9:27 am 0Likes

    Well, it did work out great, because the controls are so smooth!
    You guys definitely surpassed yourself with the sequel.
    Time to platinum this one too ^^

    • Hussain @ FuturLab
      Posted August 14, 2014 at 9:52 am 0Likes

      Thank Cyro. Yes we are extremely happy with the results 😀

  • Ash
    Posted August 30, 2014 at 11:56 am 0Likes

    Looks superb now, that hardwork paid off! Was directed here from the Playstation Blog and really happy I was this has been fantastic reading. I can relate to the pains of offsetting the values to match the actions. Hard coding for each frame must have been a giant nuisance but the game looks like its seen the results. So much respect for you guys and could not be more excited to play this next week!!

Leave a comment