When I work on projects I get distracted with writing boilerplate and simply getting things to work, that I often run out of energy or time when it comes to doing the interesting parts. That’s why for my next project I want to focus on smallest subsection possible, and polish it well.

The focus was on sprite animation, and elegantly swapping between animations when interacting with the environment. A co-worker recommended Pixi.js which looked great for doing sprite sheet based animations. This blog documents my progress implementing the final result which you can see here: http://www.simonhfrost.com/runner.

After browsing the Pixi.js documentation I dove into a basic sprite sheet example found at http://pixijs.github.io/examples/index.html?s=basics&f=spritesheet.js&title=SpriteSheet%20Animation. I wanted to use my own sprites so found this great one from the game Braid:

When working with sprite sheets you also need an accompanying configuration file that maps the individual sprites. I found a sprite mapping tool at http://www.leshylabs.com/apps/sstool/, which had kick ass automatic parsing (but just needed a bit of tweaking).

The .json output was a bit different to what was required in Pixi.js. I wanted to investigate the .json in the Pixi.js example, but it wasn’t easily available. After a bit of investigation I found it on Github at: https://github.com/pixijs/examples/blob/gh-pages/examples/assets/spritesheet/fighter.json. The format was actually very similar, the main differences being that the co-ordinates were in different sections, and it also referenced the sprite sheet image within a meta element.

When re-mapping json, to minimize ones sanity I highly recommend using this JSON formatter: https://jsonformatter.curiousconcept.com/

Working on this simple example was a great short introduction to Pixi.js but I was starting to feel that it doesn’t give you much control over the animations and user interaction. I found this blog post: http://www.html5gamedevs.com/topic/2393-creating-an-object-with-multiple-animations-in-pixijs/ which said:

Pixi can certainly be used to create games, but it’s focus is more on being a kick-ass rendering engine — which it is. Having said that, you will find a lot of the “niceties” of some gaming engines just aren’t available in Pixi.js — that’s just not its job.

I decided to cut this project short, and re-evaluate if Pixi.js is a good tool for creating a sufficient prototype. Another option would be to use http://phaser.io/ which is more of a game engine and supports user interaction better. But for now I’ll leave http://simonhfrost.com/runner/ to live out it’s legacy.