← Back to home
Tutorial series

Step 5. Sprite Output

Creating PixiJS project template Step 5 of 7 2 min read

To render sprites, we need to implement a helper method in the Application class:

    res(key) {
        return this.loader.resources[key].texture;
    }

    sprite(key) {
        return new PIXI.Sprite(this.res(key));
    }

We know that all loaded resources are stored in the resources property of our custom Loader class. Getting the required resource by key, we can create a new instance of the PIXI.Sprite class. Now, in the code of the game, it will be enough for us to use only the call to the App.sprite method to get the required PIXI.Sprite instance and work with it further. Let’s render the background image:

export class Game {
    constructor() {
        this.container = new PIXI.Container();
        this.createBackground();
    }
    createBackground() {
        this.bg = App.sprite("bg");
        this.bg.width = window.innerWidth;
        this.bg.height = window.innerHeight;
        this.container.addChild(this.bg);
    }