Jump to content

Pixi.js has landed


Recommended Posts



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

Lots more details here: http://www.goodboydigital.com/pixi-js-has-landed/

Link to comment
Share on other sites


Ezelia, I know exactly how you feel! Its pretty much why we made pixi.js. I love doing game logic too but find myself endlessly repeating the visual stuff :)

I'm glad you bought up the iOS5 issue Rich, we dont have any devices over here running it at the mo :( . It shouldn't take too long to fix once I get my hands on an iOS5 device i imagine.. is there any major differences between ios5 and ios6?

Link to comment
Share on other sites

Yes, good to be here to! This new forum was a great idea! Thanks for checking the error. From the looks of it that means its most likely an "i should code my game better" error rather than a pixi.js issue. Still will take a proper poke around tonight as to what could be causing it.


Happy to get it working on Firefox OS for ya michalbe, if you could let me know what errors your getting it maybe an easy fix. If not, as Rich suggested we would be be more than happy to get it working on a Firefox OS test device for ya if you're up for it ;)


The most important thing for me is that I want pixi to run on everything that has a browser in it.. build once play everywhere :D

Link to comment
Share on other sites

We don't have any devices for now, Geeksphones will be shipped in mid April, I will try to do my best with geting one for you.

Logs of my browser just before your game crashes:

E/GeckoConsole( 2903): [JavaScript Warning: "Unknown property 'box-sizing'.  Declaration dropped." {file: "http://www.goodboydigital.com/runpixierun/" line: 0}]E/GeckoConsole(  107): [JavaScript Error: "DataCloneError: The object could not be cloned." {file: "app://browser.gaiamobile.org/js/places.js" line: 471}]E/GeckoConsole( 2903): [JavaScript Warning: "Error: WebGL: Exceeded 2 live WebGL contexts for this principal, losing the least recently used one." {file: "http://www.goodboydigital.com/runpixierun/js/pixi.js" line: 49}]E/GeckoConsole( 2903): Content JS LOG at http://www.goodboydigital.com/runpixierun/js/RunPixieRun.js:166 in init: init ok!E/GeckoConsole( 2903): Content JS LOG at http://www.goodboydigital.com/runpixierun/js/rpr.js:15 in anonymous: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]E/GeckoConsole( 2903): Content JS LOG at http://www.goodboydigital.com/runpixierun/js/rpr.js:15 in anonymous: 8E/GeckoConsole( 2903): Content JS LOG at http://www.goodboydigital.com/runpixierun/js/RunPixieRun.js:322 in resize: 561.0017889087657



Link to comment
Share on other sites

This is pretty much exactly what I've been searching for. A fast 2d library that doesn't get in my way. I've been playing with it today. Looking forward to RenderTexture and Text support.



wow this is impressive !

I have one question ; does pixi.js handles z-index ? I need that for an isometric game I'm making. I'm handling that with a stack, but if pixi.js can handle it for me I'll surly adopt it !


As far as z-indexing goes, the DisplayObjectContainer class allows you to add renderables in a specific order, then draws them in order. I've been doing something like



then later when I need to add a sprite nestled between foreground and background, something like this works:


container.addChildAt(character_sprite, 1);
Link to comment
Share on other sites

Hello everyone!


Thought this might be a good place to let you HTML5ers know that I have finally finished the first version pixi.js and it is now up on github :)




hope you all have fun using it! 

Good news ! I'll give it a try for my isometric project :D ... optimisation for this kind of renderers is really hard if I can gain some frames I'll be happy :D

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...