In the last post I showed you how to get up and running quickly in PixiJS. In this episode I want spend some time diving a bit deeper into the basics of PixiJS. To do this we have to look a bit at the history of PixiJS to understand where it’s been and where it’s heading.
Around the time PixiJS first came out canvas everywhere and webGL was starting to spread to other browsers, but there were still some hold outs, particularly on mobile. Because of this it was really important for it to work on both. If we compare this with the current state of the web, webGL is pretty ubiquitous, even going back a couple browser versions. Also webGL2 is starting to spread across browsers. Given that Pixi is all about performance, it seems clear that the future of high performance graphics on the web is with webGL and webGL2. They’ve reflected this in their version 5 roadmap by making the default build and Renderer to exclusively webGL or webGL2 where supported. The canvas renderer is still available in a separate legacy build. We’ll be using v5 for this example.
So now that we understand the roadmap of PixiJS let’s take a deeper look at the components of a PixiJS scene. In our last example we used the Pixi.Application helper class. This is great because it creates a lot of commonly used components for us, but we’re going to skip Pixi.Application so we can talk about each of these components separately and what they do.
Renderer
The first item created is a Renderer, the renderer is what draws content onto our screen. As we mentioned this is a webGL renderer. It can take a number of parameters to customize the renderer, these parameters can also be passed into the Pixi.Application class. The most commonly used are width and height. transparent can also be set to true so that content below the canvas can still be visible. You can alternatively set the backgroundColor as well. You can also specify the view so it renders to an existing canvas element. You can also set transparent to true so that you can see content behind the canvas element. autoDensity is another parameter which resizes the canvas in css pixels to allow higher density resolutions. antialias can be set to true to allow antialiasing where supported. You can also define the resolution of the renderer to window.devicePixelRatio to render higher resolution for retina screens. preserveDrawingBuffer can be set to true which allows you to call toDataUrl on the gl context to save an image from your scene. clearBeforeRender is a parameter which defaults to true, clearing the drawing context before each render.
To resize your renderer you can add a listener to the window’s resize event which will allow you to call `resize()` on the renderer passing in the new width and height. It also has a `resizeTo` property which will map its size to a specific DOM element. To draw content in your renderer, you call the render() method passing in your stage.
Stage
Speaking of the stage, The stage is also created automatically with Pixi.Application it’s just a container that contains all the items you want rendered. We can create this with new PIXI.Container().
Ticker
Pixi.Application also creates a ticker for you. A ticker is an animation loop that you can add callbacks to. It utilizes requestAnimationFrame under the hood. You can create a new ticker with ‘new PIXI.Ticker()’. It has a ‘start()’ method but will start automatically whenever it has listeners added to it, unless ‘autoStart’ is set to false. The ticker can also be paused with the ‘stop()’ method. You can add listeners to a ticker with ‘add()’, passing in the callback method. It also has an ‘addOnce()’ method if you want to fire a method only once on the next animation frame. To remove methods you can call ‘remove()’ passing in the callback to be removed. You can also call ‘destroy()’ to completely destroy the ticker and all the listeners contained in it.