A Look at Pixi.js

Presented by Carlos Justiniano / HC.JS / @cjus / ver: 1.0.0

About me

  • Carlos Justiniano, HC.JS founder and a long-time programmer
  • Games programmer in the 90s
  • Wrote my own sprite animation library and game engine in C++
  • I posted on Github in 2010: https://github.com/cjus/s34mme

I was also a contractor at Disney Interactive "back in the day"

So, what's this Pixi.js thing?

  • It's a JavaScript based graphics rendering library for HTML5
  • It works across all modern browsers on both desktop and mobile
  • It will use hardware accelerated WebGL or fallback to HTML5 Canvas

What Pixi.js is not

  • Pixi.js is not a game engine or game framework
  • It only has support for rendering and not things like collision detection and physics
  • Can be used as the basis of game engines / frameworks, such as Phaser (https://phaser.io/)

Pixi recap

  • Focuses on managing graphics and displaying them (rendering)
  • Allows you to do things like: load images, move them, rotate them, change their color, opacity and tint
  • You can also add graphic objects to a container and move the container as a unit
  • In short, you can use Pixi to animate scenes of graphical objects

Pixi.js History

  • Launched in February 2013 by Matt Groves of GoodBoy Digital
  • Has improved steadily since then to include many impressive features
  • Used in project for clients like Disney, PBS Kids, BBC, McDonald's and many others
  • Winner of numerous industry awards

Pixi Demo 01

http://www.pixijs.com/examples/

Pixi Demo 02

http://www.pixijs.com/examples/

What about the HTML5 <canvas>?

  • Canvas is a element for creating graphics using JavaScript
  • Originally introduced by Apple in 2004
  • Between 2005 and 2006 it was included in other browsers
  • Standardized by the Web Hypertext Application Technology Working Group

HTML5 <canvas>?

An HTML5 element "for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap and does not have a built-in scene graph." - wikipedia

Canvas Demo

My recent involvement with Pixi

  • I was recently asked to advise for two projects:
  • An authoring system for children's books and a polling application plugin
  • I found Pixi to be ideal for both projects

Under the hood

Quick recap

  • Unlike the HTML Canvas, Pixi.js works with objects such as sprites and a stage
  • The result is a higher level of abstraction

Pixi and friends

  • Pixi.js focuses on rendering and managing your scene graph
  • So, it's only part of a larger picture when it comes to building a product
  • Lots of tools work with Pixi to add realistic physics, see: matter.js, physics.js
  • There are also authoring tools which output files in a format that Pixi can work with - see: TexturePacker and Spine
https://www.youtube.com/embed/etEnSsZTsf0

Pixi Demo 03

http://www.pixijs.com/examples/

Pixi highlights

  • Dedicated rendering, super fast!
  • Multi-platform: use pixi on desktop and mobile devices
  • Support for multi-touch interactivity
  • Special visual effects using WebGL filters
  • Support spite sheets and spine data
  • Manage scene graph
  • Load assets locally and remotely via the web
  • Support for rendering text
  • Easy to use API, familiar interface for ex-flash developers

Learn more at: http://www.pixijs.com

Contact

  • cjus on Twitter and Github
  • Email: cjus34@gmail.com
  • About: http://cjus.me