Pixi.js – Loading Assets with Pixi.loaders.Loader

Getting started with PIXI is very simple. Before we get started, please note that I’m using typescript for these projects. The code itself doesn’t change at all, so you can use this like you would use ES6, just strip out the type checks. You can read more about that and how to setup your typescript project here.

I won’t be going very in depth to the features PIXI has as we start off, rather I’ll just link you to another post where I will give more details and information.

Note: I’m using PIXI version 4.3.2.

The first step is to get a create a new PIXI renderer. The renderer is responsible for actually drawing every frame to the screen. It does this by way of a request animation frame (RAF).

export default class Core {
    private _renderer:PIXI.CanvasRenderer|PIXI.WebGLRenderer;
    private _world:PIXI.Container;
    constructor() {
    this._renderer = PIXI.autoDetectRenderer(400, 400);
    }
}

The first two parameters of the Pixi auto detect renderer are the width and height of your game. I will write up more about how to customise the renderer and link the post here.

The next step is add your add a container (display object) and add the renderer to your webpage.

constructor() {
…
this._world = new PIXI.Container();
document.body.appendChild(this._renderer.view);
}

The final step to getting it rendered is drawing with the request animation frame.

constructor() {
    ...
    this.update();
}
update() {
    requestAnimationFrame(this.update);
    this._renderer.render(this._world);
}

And that’s it. In summary, we create a new renderer and world. Add the renderer to the page and then call the update function. When the update function is called, it makes a new RAF request and tells the renderer to render the world. The requestAnimationFrame function accepts a callback, which we pass the update function. This simply means that when the update gets called, the RAF gets called, which in turn calls the update and the loop continues ‘forever’.

In the next tutorial, we will take a look at improving the game loop by using the PIXI Ticker class.

For those who like copy-paste, here’s the main class in it’s entirety.

export default class Core {
    private _renderer:PIXI.CanvasRenderer|PIXI.WebGLRenderer;
    private _world:PIXI.Container;
    constructor() {
        this._renderer = PIXI.autoDetectRenderer(400, 400);
        this._world = new PIXI.Container();
        document.body.appendChild(this._renderer.view);
        this.update();
    }
    update() {
        requestAnimationFrame(this.update);
        this._renderer.render(this._world);
    }
}
let game = new Core();