Pixi.js Getting started

 

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();
  • author image
    Asterius Reply
    Oct 3, 2017 @ 22:04 pm

    Interesting posts, thank you.
    I would like to start a game with PIXI and Typescript, but it is hard for me to find information about how to start?
    You indicate : “You can read more about that and how to setup your typescript project here”. Where?
    Which tools to use to compile the typescript, how to link PIXI, which is in javascript, inside a Typescript application, etc.
    Do you have any ready-to-use empty project for that?

    Thanks in advance!

    • author image
      Oct 6, 2017 @ 13:26 pm

      @Asterius, thanks for the comment! I’m still in the process of writing a series of creating a typescript with PIXI. Stay tuned for the tutorial, I’ll try to get it up this weekend!

      Thanks

      Nick

Twitter

Error code 89: Invalid or expired token.

Stay Updated