GameJavascriptPixi Tutorialpixi.jsProgramming

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();
Tags

Nicholas Mordecai

Just your friendly neighbourhood programmer!

Related Articles

3 Comments

  1. Thanks for your post!
    I want to use PIXI with webpack. when load multiple images, first I need to ‘import’ single image separately, then load these assets with PIXI loader. I don’t wanna ‘import’ these assets written code single by single, do you have solution for this?
    Can you post a tutorial for PIXI with webpack?
    Thanks!

  2. The Title said “Pixi.js – Loading Assets with Pixi.loaders.Loader”
    But I did not find any Pixi.loaders.loader inside the post. Strange!!!

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close
Close