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

 

Preloading all of your assets, or at least large parts of them can be very useful. As we saw when creating sprites (insert link), you will have to wait for the texture to be downloaded before the sprite is created. We don’t want to have to do this. To combat this, we can use Pixi’s loader. It’s not actually a loader built into Pixi itself, rather it’s a third party module, resource-loader.

It’s pretty simple to use, but has some very cool features under the hood!

Lets look at a basic example.


// create a new instance of the loader
let loader = new PIXI.loaders.Loader();
// add a resource to load
loader.add('mySprite', 'assets/sprites/sprite.png);
// start the loader and pass an anonymous function to be called back once the loading is complete
loader.load((loader, resources) => {
    console.log('loading complete');
});

The loader has some signals attached which can be very useful to use.


// new loader
let loader = new PIXI.loaders.Loader();

// add signal callbacks
loader.on('progress', this.progress, this);
loader.on('error', this.error, this);
loader.on('load', this.error, this);
loader.once('complete), this.complete, this);

// called once per loaded/errored file
progress(loader, resources) {

}

// called once per errored file
error(err, loader, resource) {

}

// called once per loaded file
load(loader, resource) {
    console.log(resource.name, 'loaded.', 'progress:', resource.progressChunk, '%');
}

// called once when the queued resources all load.
complete(loader, resources) {
    console.log('all resources loaded');
}

The loader also has some middleware functionality which is can be very useful! Although Pixi takes care of cache and parsing our assets, you may want to have your own custom cache, resource index or post resource load parser. You can just pass those functions here.


let loader = new PIXI.loaders.Loader();
loader.pre(cachingMiddleware);
loader.use(parseingMiddleware);

And that’s all there is to know about the Pixi loader. I will go through how to implement a custom cache at a future date. It’s also probably worth noting, that I tie this loader directly into my state manager, which I will be writing up soon as well as lazy loading for mobiles to reduce the bandwidth usage on initial load.

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();
  • author image
    Kale Chao Reply
    Oct 16, 2017 @ 16:58 pm

    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!