Blog

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 ;)

Another javascript engine, eh?!

“Why should we care?” I hear you ask “Theres loads of these engines out there!” To that I say, good question! Read on…

Although I fully intended pixi.js to be used to make wonderful, juicy HTML5 games, it is not a game engine – it is a rendering engine. It puts things on your screen and thats it, although I think it does that quite well though :D This means you can use pixi.js in conjunction with all the other great libraries out there in javascript land without having to choose ‘A’ over ‘B’.

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!?

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!

35 Comments

Nice work guys! The demo is great on desktop. Some mobile tests for you:

iOS 5 – crashes on load

Windows Phone (Nokia Lumia 9200) it works and renders but you need to disable the MSPointer events in the page, as the game is constantly trying to zoom in and select stuff when you play it :) If you lock that down it should perform really nicely from what I can tell.

Thanks Rich! glad ya like what we have made :D
Also thanks for testing on your devices for us, we have a distinct lack of them over here at the moment.
Great news to hear its performing well on the Nokia Lumia too! I will definitely look into disabling the zoom later today, thats no good for anyone :)

Hi there,
Congratulations, pixi.js looks pretty neat ! Window resizes and orientation changes are perfectly managed, as well as the WebGL/canvas switch.
On my low-cost smartphone Wiko Cink Slim with Chrome, demo runs at 10-15 fps with some lag and short freezes at game start. But still awesome :)

Looks great! How about the ability to render SVG paths? I need them for music notation symbols. Much like rendering text except the paths can be any path required by a given symbol. Would work great for icons too :-)

Thanks! I would say pixi.js is primarily an image based renderer at the moment. The best way to use svg with pixi at this stage would to draw your svg to a canvas and then create a pixi.js texture using that the Texture.fromCanvas method. Hope that helps!