Blog

Pixi.js has landed!

February 18, 2013 at 4:10 pm / by

Technical Partner Mat Groves blows the lid on our latest treat…

logo

UPDATE – Pixi.js is now available on github! 

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

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
  • Filters
  • Bendy Sprites
  • Interactivity
  • Render to texture
  • Particles

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!

pixie_screeny

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

Did you like this? Share it:

Tags

 

35 Comments

  1. 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.

    • Mat Groves says:

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

  2. Dave says:

    This is very interesting! Game works at almost full speed on my Nexus 7, but there appears to be no sound?

    Whatever – really good work. Looking forward to having a play with this!

  3. Mike says:

    Just wanted to pass along I tried running your game on a Kindle HE and it never left the loading screen.

  4. Mike says:

    HD (not HE). Darn, spell checker.

  5. Filipe Lima says:

    Works brilliantly on the Nexus 4 ;-)
    Great work!

  6. Works great on BlackBerry 10 (Z10). One of the few (only?) mobile devices currently supporting WebGL. I look forward to playing around with pixi.js when it’s released! :D

    Keep up the great work!!!

  7. Wow, running great on iPad mini!

  8. running really great on ipad 2 – super smooth!

  9. That’s really great.. I’m encouraged testing it ;)
    Demo is awesome on desktop & ipad2.

  10. Samsung Galaxy SII is slow and glitchy, screen keeps scrambling, but Nexus 7 tablet runs at a decent enough pace. Desktop is awesome.

  11. Matt Parker says:

    Nokia 800 renders really nicely, but the controls don’t work. Can’t wait to see the API…

    Good work!

  12. 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 :)

    Looking forward to see more,
    A french guy

  13. Sam Batista says:

    Looking forward to getting my hands on the source!

    Also looking forward to use this with LightTable :)

  14. ZanuZawa says:

    Very smooth on IE windows phone 8 :)

  15. Charles says:

    Works in my iPhone 5 with latest iOS 6.x – no sound, no horizontal mode after turning on orientation mode. But overall really smooth gaming experience! I suppose it’s canvas mode as by default Mobile Safari doesn’t have WebGL not enabled?

  16. wazoo says:

    Nice work!
    I know your focus is more on mobile / tablet, but it worked very well for me on IE9 and IE10

    Can’t wait to get my paws on this too!

  17. Andy Watt says:

    Pixi looks great! I did a little video on my blog – me hacking around on the basic example. I can’t wait to see how Pixi evolves. The WebGL rendering is awesome!
    Here’s a link to the video:
    http://www.wastedpotential.com/pixi-js-html5-for-flash-developers/

  18. zoomclub says:

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

    • Mat Groves says:

      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!

  19. troy says:

    Awesome! Super smooth on HTC DNA. Super fairy mode kicked arse! ;)

  20. ianno1993 says:

    This engine is just amazing!

  21. Greg Babula says:

    The demo looks incredible (and works really smooth on my old iPhone). Can’t wait to try this out, thanks!

  22. Jorge says:

    It’s amazing man!!! simple and fast, thanks a lot!!

Leave a Comment

 

— required *

— required *