Understanding HTML5 sprite animation with Phaser

What can make a game to be a great game, apart from game design and gameplay is the animation of the sprites. If you played computer games in stone age, you will surely remember the first Prince of Persia. It was a fair platform game, but the animation of the captive prince was awesome in 1989 – and it still rocks anyway – and made the game fly to worldwide success.

While I can’t teach you how to create woderful sprite animations – my graphic skills are around “3 years old baby” level – I can show you how to manage animations in your HTML5 games with Phaser.

In today’s example we have the ero taken from Jet Set Willy game, and you can make it “walk” – actually it does not move yet – by pressing Z or X keys. Try it by yourself:

Pressing X it will walk right, pressing Z it will walk left, and doing any other thing than pressing X or Z will make it stop. Remember to mantain the focus in the small game window.

All starts from this sprite sheet, which I zoomed in a bit:

Then, here is the fully commented source code to turn this sprite sheet into a walk animation:

In a few lines I animated a sprite, now it’s your turn to draw amazing animations and create the next Prince of Persia (or even better, in my opinion, Jet Set Willy) made with Phaser! Meanwhile, download the source code.

  • Price of Persia :) First paragraph.

    Otherwise good article as always. Short and informative.
    Long time reader of your blog.

    • Emanuele Feronato

      fixed! Thank you!

  • Marco Parenzan

    In the text, you write X key for left (no, right) and Y key for right (no, Z for left).
    In the code, on lines 38/42, change Y to Z.
    Love this article! But Willy is a Spectrum Hero! :)

    • Emanuele Feronato

      thank you!!

  • Rico Alexander

    Hmmmm, doesn’t seem to work in Edge.

  • Thanks! that’s great, concise and very useful.

    Regarding the graphics part, I love Phaser and gameDev but sometimes I struggled making my own sprites, that’s why I decided to create my own tool. It might be useful for some of you that want something simple and fast or just for prototyping. I released the sprite animation feature yesterday!!

    The aim of my web app is to create pixel art animations or static drawings and get the CSS code, but you can also download a Spritesheet like file. It’s 100% free and open source, you can check this out here: https://github.com/jvalen/pixel-art-react

    Sorry for the self-promotion (I don’t know if it breaks the posts rules), but if I would find a web app like that years ago I would have been very happy.

    Thanks again!

  • GeoCoder

    A good article. I just hand-transpiled the code into Typescript for VS2015 with a few issues. If you like, I’ll send a zip file of the VS2015 solution.