Pixi.js v3
Mat Groves
TL;DR
High fives! Pixi v3 is out and it’s faster and better than v2 in almost every way. Make us proud and go make cool stuff with it! k thx bye…
Awwww man! Here it is :D Finally! A new version of Pixi.js is here! We took all the things we learned over the last couple of years of our little rendering engine’s life and have created a leaner, meaner rendering engine that will really help make your content pop. There are so many changes I’m honestly not sure if I can even remember them all! But here’s an overview of Pixi v3’s new awesomenessness…
What just happened?!
New Modular Architecture
Part of the rewrite was to pull Pixi apart a little and make it more modular. To this end v3 is now built up of CommonJS style modules. These are then compiled using browserify into the Pixi build you know and love. The main win for this new structure is that it’s incredibly easy to create plugins and extend Pixi. Even the Graphics and Sprite renderers are plugins that follow the same rules as any external plugins.
Each of these modules is now completely optional. The only one you need to get something running is the Pixi core. The minified version of that comes in at a super featherweight 124kb which is not bad at all!
It’s important to note that if you are not interested in any of the above or using Pixi through browserify / npm then that’s totally cool too. You can import the Pixi.js file as you normally would and carry on as usual. This way it basically gives us the best of both worlds!
New WebGL Renderer
Marvellously, WebGL penetration is pretty high these days. It’s also on mobiles now too. This makes the WebGL renderer increasingly the main event now for Pixi.js v3. To reflect this we recoded the WebGL side of things to be more efficient. It can still throw TONNES of stuff at the screen but on top of that it’s also a lot smarter when it comes to how it switches render modes. This new WebGL base will make it easy to add new features as little v3 grows up.
The v3’s filter system has been completely rewritten from the ground up. It now works in a way that affords us much more flexibility when it comes to creating awesome effects. Drop shadows / Blooms / Glows. All that would have been a right pain in the behind in Pixi v2! On top of that we added the ability to use sprites as the inputs for some filters. This means textures can be used as filter input but mapped to Pixi space. The end result is something that is super intuitive for users. It literally took me days to figure that part out, but it was worth it as the end result is better performance and usability.
The whole thing is so robust now that you should be able to have filters within filters within masks on other textures with filters that you then use as a mask for a masked set of sprites with filters… Anyway I’m sure you get the idea ;)
Even clicking and touching got a full makeover. The interaction manager is now completely decoupled from the main render loop. It works much more like the DOM interaction model now too. So that means you can do stuff like stop propagation and add events as well as callbacks. Sweet mama!
New Resolution Manager
The way v3 deals with resolution has been completely rewritten. When switching resolution nothing should change (other than the, er, resolution!) which means you can develop your content once and know it will work in any size.
A texture in Pixi can be any resolution you like. So you can even for example give your textures a resolution of 3 for the iPhone6’s and other mega-res displays out there. You can even lower the resolution to something like 0.5 for all the slower devices.
This also opens the door for different resolution of filters, but that’s a story for another day…
New Loader
That’s right! A shiny new loader! Created by Pixi.js team member Chad. There are lots of advantages to this new loader. Pluggable and extensible parsing and caching? Yessir! Better modern xhr support? You bet! Add to that a more fluent api, better progress reporting, more insight into the data loaded and you can start to see how cool this new loader is! Who’d have thought the humble loader could be so exhilarating!
New TilingSprite
Pixi now tiles non ‘power of two’ textures / sprite sheets, using a shader rather than generating a new texture to tile. This makes it all a lot lighter on memory and it’s also much easier to animate them as the new texture creation step no longer exists. Also, it feels cleverer ;)
New Docs, Examples and Site
A big pat on the back for our resident Goodboys Clement and Alvin who have been a huge help in creating the external collateral stuff for you all too. Alvin created all the examples that you now have access to here. Also watch this space for the shiny new Pixi.js website crafted by Clement coming soon too…
What got Added?
Alpha Masking
The WebGL renderer now comes with alpha masking! wooo! The best thing? We made it REALLY easy to use. Are you ready:
var myMaskSprite = new PIXI.Sprite.fromImage('myMask.png');var mySprite = new PIXI.Sprite.fromImage('myAwesomeSprite.png');mySprite.mask = myMaskSprite;
Rest assured under the hood it's far more complicated than that but that's our problem, not yours :)
Useful for when you need more particles than sense. This brand new container is designed to put lots of elements on the screen! It's the spiritual successor to the now deprecated SpriteBatch. It’s a powerful container type that lets you tune which transform properties are static and which properties are dynamic. Correct use of it will give you killer speed boosts! Check out our bunnymark to see how speedy this little guy really is!FXAA antialiasingSo as it turns out anti-aliasing can be quite important! Often when using graphics objects the edges are never quite as smooth as you would like! The problem is, not all devices and browsers support anti-aliasing such as iOS8. The other drawback of native antialiasing is that it can hit performance quite hard due to how it works.Pixi now supports its own ‘AA’ in the form of an FXAA shader. FXAA is a super fast way of providing ‘good enough’ anti aliasing for your content. Which means Pixi v3 offers anti aliasing for EVERYONE! You can even force pixi to use FXAA over native anti-aliasing for increased performance, it's up to you!A SHED load of bug fixes and extras!Pixi.js v3 is also packed with bug fixes and extra little features that make it far more stable than v2! I think we must have squashed about 100 bugs on github during v3! I don’t have enough blog to list them all here… I will leave it to you to find out!Upgrading from v2 to v3In short, it's SUPER easy. A lot has changed under the hood but thankfully for you guys and gals not so much has changed with regards to the API. For those of you coming from v2 we encourage you to jump on board. Just like sunshine and beer, life is better with v3! The air is sweeter, the grass is greener! (The grass is also anti-aliased).We also added a deprecation file so that any object that no longer exists will return its new alternative and also warn you with a console warning. This means things will mostly just work but you will be made aware if you are trying to do something the ‘old’ way.Anything else should be covered in the docs and examples. If we have missed something make sure to give us a poke.A big thanks!Thanks to everyone who helped on the release of Pixi.js v3! Especially to my partner in crime Chad who has played a a major part in the restructuring and refactoring phase (as well as every other phase!). People have been contributing left, right and centre and it has really been a massive help. So thank you Pixi Community! Keep being awesome :)When can I play?Right now! It's live and ready to go in the master branch. I encourage you to get stuck in and start making cool shiz. And if you do find a bug in v3 then please let us know by submitting a bug on GitHub.Me and the Goodboy team are already making commercial projects with it too. Exciting stuff!This is the year of WebGL people! Now go CREATE!(or follow me on twitter for more up to date pixi.js news)
Follow @Doormat23
