Why Build your App with Pixi.js?

For a long time, Macromedia and later Adobe Flash was really the only kid on the block. If you wanted to build a rich, interactive website or software like experience in the browser – Flash was it. Later Microsoft’s Silverlight came along, but not many developers that I know actually ever used it. I supposed Java was there too, but it couldn’t compare to Flash in terms of ease for creating an engaging UI and content delivery system for the web.

But then the iPad was born, and the emergence of HTML5.  Steve Jobs made it his personal mission to kill Flash – for reasons that were actually pretty good, looking back, although it sure didn’t seem so to this Flash dev at the time! So most of us made the switch 4 or 5 years ago to Javascript.

There was actually much to love about Javascript. It had enough similarities to AS3, both being based on an earlier version of EMCAScript – and there was a real beauty in having all of your code in 1 spot, with design rules in another (CSS). Who misses having to look through code on all of your movieclips to try and figure out where you left an unwanted piece!

But the combination of HTML/Javascript/CSS has never come close to Flash in terms of providing a unified developing and compiling environment, with animation, transitions, and audio all built in.  With different browsers interpreting things differently, and CSS being something that can become a downright mangled beast, it’s easy for a Javascript app to become a bit of a design nightmare, and that’s before you even get into the idea of memory management.

For data centric apps, I use a combination of Backbone & Dust.js, with Bourbon/SASS for the CSS.  But for a graphical based app – these tools would be sorely lacking. So I began researching HTML5 game development, and what people use to build immersive games to be published via the appstores, as well as a browser. This lead me to some game engines such as Phaser, Melonjs, and Kiwijs – but after experimenting with them, I decided they didn’t allow me enough control – and added bloat of things I didn’t need.  I decided that a game based learning app really comes down to 3 visual elements:

  • graphic rendering of scenes & elements
  • particle generation for effects
  • animation

The centerpiece of many kids’ learning apps is buttery smooth drag and drop. You see this all over many of the gorgeous IOS apps for kids.  I was able to achieve this using a combination of Greensock’s GSAP and Pixi, thanks to a sample generously built for me by Blake over at Greensock.

Pixi offers a particle plugin and designer, the fastest JS graphic rendering, and a well documented Spine runtime that makes animating easier than it was in Flash. In addition, I feel like I have graphical control over my app for the first time since switching to Javascript. For a Flash developer, working in Pixi is a bit like coming home, which is just what I needed to help dive in to these new libraries.

I’ll continue this post with specific examples of how what I’ve done with these libraries, with code samples.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: