Technical Partner Mat Groves blows the lid on our latest treat…
For the last few months we’ve been hard at work, deep in the Goodboy code mines digging up a little treat for you all.
So without further ado (insert drumroll here), it gives me great pleasure to introduce pixi.js!
The aim of this project is to provide a fast, lightweight 2D library that works across all devices, both mobile and desktop. The pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. It’s also fast ;)
“Why should we care?” I hear you ask “Theres loads of these engines out there!” To that I say, good question! Read on…
I like to think of pixi.js as more like a 2D version of three.js so it will enable people to build all kinds of great 2D web experiences that we’ve all been building for years in Flash. Of course, games are definitely high on that list of potential applications!
Another important goal of pixi.js is to tap into the raw power of webGL for its rendering speed. WebGL is an increasingly important web tech and many browsers are now supporting it by default (Gold stars for you Chrome and Firefox!) and crucially mobile browsers are beginning to use it too. Firefox and Chrome beta both support webGL in their Android iterations, and I would bet my left leg that it won’t be long until safari iOS will support it too (its supported in thier iAds already)!
Pixi.js does a great job of abstracting away all that crazy webGL shader hoohaa unlocking all that speed for everyone to play with. Its worth noting that it automatically handles sprite batching behind the scenes allowing for incredibly fast rendering without any extra hassle.
Of course pixi.js also has a renderer that comes in canvas flavour that is optimised to the nuts too. This means that pixi.js stuff will also run on pretty much every mobile and modern browser (ie9 included!)
I guess it’s also worth mentioning that I didn’t want there to be any visual differences between the two renderers… so there aren’t any :) Lovely for a bit of graceful degradation, or progressive enhancement depending on which side your bread’s buttered!?
Gimme the bottom line!
Here’s an exciting list of all of pixi.js’ current features:
- Designed for both mobile and desktop browsers
- Canvas render
- WebGL renderer
- Choose either renderer or let pixi.js choose which one to use.
- Full scene graph
- Simple to use API (similar to the flash display list ie. Sprites / Movieclips)
- Optimised for performance
- Support for texture atlases
- Support for Texture Packer JSON output
- Asset pre-loader
- Tiny file size
- Fully open-source (Yum yum! Open sauce!)
And the planned upcoming features:
- Text support
- Bendy Sprites
- Render to texture
OK, show me!
I guess now would be a good time to show you a working example. Luckily we have spent the last few weeks working on one!
The coolest thing about this demo is that it works on pretty much everything (and in full retina glory on iOS!). As well as working on all modern browsers, we have tested it on a range of mobile devices including iPhone 4, 4S, 5, iPad 2, 3, Nexus One and Galaxy SIII. So feel free to let us know how it works on your device! Particularly if your device is Windows Phone as we haven’t tried one of those ;)
Here at Goodboy we subscribe to a “Build once, play everywhere” philosophy and we feel that HTML5 is becoming one of the most viable tools to achieve that goal. Pixi.js has been designed to make that dream a little easier to obtain.
I can has?
The pixi.js alpha release and all the source code will be released on github very soon once I have finished documenting it and writing up a few tutorials. Best of all the joy of open source means that anyone who wishes to contribute some of there l33t coding skills to the project will be more than welcome!
If you’re interested in pixi.js then feel free to follow me @doormat23 on twitter and I will keep you posted! And of course check back on the site as any breakthroughs will be posted up here too!