Pixi.js v2 is here!
Published in
9 min readOct 15, 2014
TWO POINT OH MY GOSH!
Hello Pixi players! Time to pull out those party poppers, turn up the music and start celebrating! It’s been a long time coming but we a very pleased to announce an all new version of Pixi.js has now arrived. The conveniently named Pixi.js v2 is out, It’s a biggie too!
So what can you expect from your friendly neighbourhood rendering engine? and why the bump from 1.6 to a fully fledged 2.0? Well Pixi.js has been growing over the last year with so many cool features that I figured it was about time to take a step back, crack it open and put it all back together again by re-factoring the code base.
The goal of the refactoring was to simplify and make the code a little easier to read. It also makes it easier for us to update with juicy new features so we get a bit of valuable future-proofing. Flexibility and clean code is great — but rest assured we have kept Pixi’s performance intact :) In fact, it’s faster than ever!
API Changers
So the first thing you should know about using Pixi.js v2 is that we have made a couple of API changes… Dun dun duuun! But don’t worry about it as they are all relatively small…
Creating a renderer:
Pixi.js v2 renderer constructor parameters have changed slighlty. These parameters are now width height and options. The options parameter is where you can set all of the pixi renderer setttings that you may need. This approach I hope you all agree is a little cleaner to use. Heres how to create a renderer:
// create an object
var rendererOptions = {
antialiasing:false,
transparent:false,
resolution:1
}// create a renderer passing in the options
var myRenderer = PIXI.autoDetectRenderer(800, 600, rendererOptions);// business as usual...Rendering with a renderTextureThe second API breaker again is pretty minor :) The second parameter for a renderTexture's render function is now a matrix instead of a point. The reason being is that previously a point only allowed you to define a position of where an object was going to be rendered, using a matrix lets you define position, scale and rotation! Much more flexible :)// create a render texture
var myRenderTexture = new PIXI.RenderTexture(400, 400);// create a matrix
var matrix = new PIXI.Matrix();// apply some 'fun' or 'practical' transforms
matrix.translate(100, 100);
matrix.scale(2, 2);// now draw an object to the texture using the matrix as the second param
myRenderTexture.render(myDisplayObject, matrix);
And thats pretty much it, not so bad huh? So if you do upgrade mid project its definitely worth watching out for those two changes! Okay so that's the "breakers" out of the way, now on to the far more interesting new stuff :DResolution and Retina!Resolutions are always a bit of a pain to work with. Now Pixi makes life a little easier by offering you the ability to set the resolution of your pixi renderer! The idea is that you always work in one design scale and different pixel densities become an afterthought :)Say for example you want your content render nice and sharp on a retina screen you can set the resolution to be two. Or if you start working on a lower resolution screen you could even set the resolution to 0.5. Pixi will increase the pixel density of the render to match the resolution provided.Obviously you will need to create some nice juicy retina textures to see that crispy sharp render! Each baseTexture now has a resolution property that you can set to let Pixi know what resolution it is. So for example a 400x400 texture with a resolution of 1 would be treated by Pixi normally. But a 800x800 higher res image with a resolution of 2 would also be treated as if it was 400x400. This kind of thinking means you can have different resolutions but not have to change the layout of you scene graph to cater for them.Oh and a nice easy way to let Pixi know that a texture is for retina is to simply add @2x to the image name. When Pixi detects this it will automatically set the resolution to 2. Phew! Don't worry if that boggled your brain a bit :)Its actually a lot simpler in practice than it is in theory. Here's the code to show how it's done:// get the resolution of the screen pixi is on (if retina this will be 2)
var myDisplayResolution = window.devicePixelRatio;// create an options object and include our resolution
var renderOptions = {
resolution:myDisplayResolution
};// create a renderer as normal
var myRenderer = PIXI.autoDetectRenderer(800, 600, renderOptions);if(myDisplayResolution === 2)
{
// load a retina texture if the resolution is 2
// because of the @x2 in the name pixi will assume the textures resolution is 2
myTexture = PIXI.Texture.fromImage("coolImage@x2.png");
}
else
{
// load a normal texture if the resolution is one
myTexture = PIXI.Texture.fromImage("coolImage.png");
}// crack on..
var mySprite = new PIXI.Sprite(myTexture);Custom ShadersThis is a really fun new feature! So now each Sprite has a new shader property. Setting this property lets a sprite be rendered with a custom shader. For anyone familiar with 3D rendering engines such as three.js, you can almost think of shaders as materials and filters can be thought of as post processing effects. Shaders really let you tap into the real power and flexibility of webGL.
What's the difference between a a custom shader and a filter I hear you say? The advantages of using filters is that they are a lot more robust and they can have multiple passes and be applied to any displayObject. They tend to also be applied in global space.Setting a custom shader for a sprite is a lot faster but can only do a single pass as it is applied as a sprite is drawn. Sprites are also batched when next to other sprites with the same shader too so that means there is almost a zero performance hit! Always nice :) So here's how to apply a shader..// create a sprite
var mySprite = new PIXI.Sprite.fromImage("myCoolPic.png");// shaders
var shader = new PIXI.RGBSplitFilter();// apply it to the sprite, easy peasy!
mySprite.shader = shader;Pretty simple eh? Filters and shaders are going to be getting more love from the Pixi team as there are still loads of cool things we would like to do with them. This is certainly a step closer to the grand filter vision we have for Pixi though!While we are on the subject, if you're a creative developer I highly recommend that you pick up and start playing around with webGL shaders in general as they are awesome and really have the power to transcend the visuals of a project :) They are super fun too! If you would like to know how powerful shaders can be you should definitely check out https://www.shadertoy.com. It will blow your mind :)Sprite Boost!The webGL sprite batcher has received a bit of a makeover. This update actually appeared in the last release of Pixi.js, but we were so busy I never actually got to write about it! Pixi,js is now 400% faster when not batching content.The way we achieved this is by not flushing the sprite batch each time a texture swap was required and also have taken special care in ensuring the minimum amount of GPU calls required for each render cycle. This means Pixi.js will behave a lot better for real world use cases. Here comes the science bit, concentrate (swishes hair)...Old Method of auto batching:
- Add a sprite to the batcher
- If sprite is the same as the last add it to the buffer
- Keep going until we reach a sprite that uses a different texture
- Then upload the buffer contents to the GPU and render the content
- Empty the buffer and keep going.
Shiny new method of auto batching:- Add a sprite to the batcher
- Keep adding sprites until the buffer is full, regardless of texture
- Then upload the buffer contents to the GPU in one go
- Next render the buffer in segments swapping textures as you go.
The speed increase of method two comes from only uploading the buffer to the GPU once its full in one big go rather than uploading lots of little chunks. As mentioned this gave us a 400% speed boost for sprites that do not share the same texture. Not bad eh? Auto sprite batching is of course still as fast as it's ever been :)Graphics
Even the graphics class could not escape a good refactor! Again mostly a lot of under the hood stuff but a few new features in there too. These come in the form of the ability to draw a graphics object using a Pixi shape. Check it:// create a new pixi shape..
var circle = new PIXI.Circle(0, 0, 40);var graphics = new PIXI.Graphics();
graphics.beginFill(0xFF0000);\// new function draw shape, nice!
graphics.drawShape(circle);More graphics good news. They are now interactive which means you can do this:// create an awesome graphics object
var graphics = new PIXI.Graphics();graphics.beginFill(0xFF0000);
graphics.drawRect(0, 0, 300, 300);// set it to be interactive..
graphics.interactive = true;// listen for an event..
graphics.click = function()
{
console.log("Hi mum");
}The full listSo that's the main stuff but there's also loads of other bits that have been tweaked and tightened too that make Pixi as robust and as solid as ever! Check out the official list of updates...
New features
- Sprites can now have a custom shader applied to them. Much better performance than filters.
- Renderers now have a resolution. Ideal for working with different pixel density
- Big refactor of the webGLRenderer and WebGLSpriteBatch renderer
- Refactor of CanvasRenderer
- DisplayObject.updateTransform function rewritten with for better performance
- New Events Class
- New Constructor for all renderers (including autoDetect)
- Massive Refactor of Graphics (WebGL and Canvas)
- Graphics objects can now be interact
- Made RemoveChild no longer returns error
- Lots of new functions added to the matrix class
- RenderTexture refactored. Now accepts Matrix in the render function
- AsciiFilter, NoiseFilter and TiltShiftFilter
- Added getChildIndex and setChildIndex methods to DisplayObjectContainer
- Right-left buttons differentiation
Bug Fixes
- iOS8 alpha bug fixed
- Text alignment now correct accross all browsers
- Set default padding to 0 for graphics objects
- PIXI.Graphics initial width and height is 0
- Fixed Graphics getBounds
- Fix cacheAsBitmap alpha issue for canvas
- Fixed minY calculation in updateBounds
- Fixed Bezier issue on Graphics
- Added 0 width check to DisplayObjectContainer
Misc
- Cleaned up some trailing commas on objects declarations
- Redundant variables removed
- Separated out the CanvasBuffer to its own class
- Bind polyfill updated
- Moved shapes to geom folder
- Examples have received a bit of a tidy
- Docs tied up and corrected
Thanks PIXI Collaborators!
Of course a BIG thanks to all the collaborators for getting Pixi to the shape it is. There's no way we would be where we are today without the help of some of the stellar coders that have been helping out and improving Pixi.Thanks to Chad Engler for the new events class (amongst many other things!), Richard Davey for lots and lots of pr's and also going through and sorting out all the docs, Eric Lesch for coming up with a nice fix for our longstanding text measuring issue and Sebastian Nette for ironing out a tonne of stuff for version 2. Of course a big thanks to everyone else too, you rock!Together we are shaping Pixi.js into a really useful tool that's enabling people to create awesome stuff. I mean seriously – check out some of the stuff people have been making with Pixi.js: http://www.pixijs.com/projects/ Makes me want to burst with pride :)You can get all this from Pixi.js' usual hangout on github here: https://github.com/GoodBoyDigital/pixi.js Also don't be afraid to give us a toot if you find something is misbehaving for ya, we will make sure to sort it.Oh, one more thing before I go! They say great things come in twos (or something like that) and with that in mind I have one final bit of good news for all you Phaser heads out there! Rich has also released a shiny new version of Phaser! Woop woop! Phaser 2.1.3 Ravinda is now available and has been updated with full Pixi.js v2 integration plus a bunch more exciting stuff that all the HTML5 game makers out there can enjoy :)You can read all about it here: http://www.photonstorm.com/phaser/phaser-v2-1-3-and-pixi-v2-are-outOK, that's all from me. Now go fill your boots with hot fresh Pixi!Follow @Doormat23
