Have you used Pixi.JS?

Have you used Pixi.JS?

Pixi.JS was launched into our lives around 4 years ago by London based developer Mat Groves.

Mat created Pixi.JS out of the need for better mobile optimisation and effects when developing browser, mobile games and interactive solutions for their clients. Pixi.JS is a 2D WebGL Rendering platform given developers a library of tools to develop awesome multi-platform, fast applications from one engine.

Fastest kid in town

Pixi.js is a devoted rendering engine. There are a host of other engines covering game, sound and physics etc. and they all work beautifully with Pixi. Pixi’s strength is speed. All-out, pedal-to-the-metal speed. When it comes to 2D rendering, Pixi is the fastest there is. End of!

True multi-platform

It’s all about cross platform support today. It’s something you hear often, but with Pixi.js you have a framework that supports all devices in a manner previously unheard of. Full webGL support means the bleeding edge is taken care of, but seamless canvas fallback means that you really can author once, and then deploy everywhere – in browser. Rich, deep experiential content is now available everywhere. Phones & tablets without the need to install apps?

Multi-touch interactivity

Pixi not only offers support for mobile and tablet devices, but with full multi-touch input recognition it lets developers tap into their full potential. Along with full mouse interaction Pixi means that you can create fully controllable engaging content with confidence that it will work on whatever hardware accesses it.

webGL Filters

When using webGL, Pixi let’s you use a huge set of existing, familiar filters such as blurs and pixelations but also allows users to create their own unique filters such as bespoke displacements and halftone effects.

Tinting and Blend Modes

Designers will love the fact that Pixi.js lets you tint and use blend modes that behave in a manner analogous to other leading visual packages such as Photoshop or Flash. Blend modes and tinting are supported by both the canvas and webGL renderers.

Sprite Sheet Support

Outputting your assets as a Sprite Sheet? As this is the most efficient way of managing large numbers of assets within your content, it made sense that Pixi.js would be able to cope with it! Pixi.js supports Texture Packer and Atlas formats out of the box!

Easy API

Designed to be intuitive and easy to pick up. Developers accustomed to ActionScript will immediately find themselves at home.

We hope Pixi.js will become one of your go-to tools for authoring interactive content in an increasingly ‘post Flash’ climate.

Asset loader

Sprite-sheets, graphics, fonts, animation data (now including Spine!) All your incoming assets can be loaded and handled by Pixi.js.

Renderer auto-detect

One of Pixi’s greatest tricks!

Whilst predominantly created as a webGL 2D renderer, we wanted to make sure that whilst webGL support is relatively niche that there was still strong support for non-webGL platforms. Our solution to this has been to create a canvas fallback system which means that you only need to code once, and Pixi will seamlessly manage the fallback.

One of the key benefits of this is that it offers a hugely powerful and accessible route into creating content for mobile browsers on all the main portable OS’s.

Text support

Rendering of text via either bitmap (sprite based) or webfont support. Text also features multi-line formatting as well as simple stroke and fill commands for webfonts allowing a degree of creative manipulation of dynamic copy.

Chris Nutbeen

Founder of Nuttifox and digital geek. Chris likes data proof, beautiful UX and clients with miracle allowing budgets.

Leave a Reply

Your email address will not be published. Required fields are marked *