1) What is PixiJS ?

PixiJS is an open source JavaScript & HTML5 library rendered in WebGL. It allows users to create 2D animations or interactive applications within the web browser. With the recent abandonment of flash in our web browsers, PixiJS is a great alternative to design interactive sites with advanced graphics or browser games.

To see somes examples of the possibilities of this library click here.

2) Setting up PixiJS

First of all you’ll need in your html file to link the script of pixi.js.

You can download PixiJS here.


<script src="scripts/pixi.min.js"></script>

Once your “pixi.min.js” is downloaded you can put it within your script folder.

First of all we will need to setup our application, we can do so by creating a script inside our index.html !

<script> 

let app;

window.onload = () => 
{
    app = new PIXI.Application
    (
        {
            // app size. 
            width: 800, 
            height: 800,
            backgroundColor : 0xAAAAAA // hex value
        }
    )
    document.body.appendChild(app.view);
}

</script>

Here we are creating a Pixi app, it’s similar to creating a scene in Unity. In this app we can add graphics, text, container…

Creating a text

Let’s start by creating a text in our app and add it in the center of our stage.


let txt = new PIXI.Text("welcome to the test page");

// Place the text in the middle of the screen
txt.x = app.view.width/2; 
txt.y = app.view.height/2;
txt.anchor.set(0.5);
app.stage.addChild(txt);

Creating a shape

We can also create basic shape in PixiJS, control the width, height, position or add event on it. Let’s create a button by adding to a shape those events : pointerup, pointerdown, pointerhover, pointerout.

First of all let’s make a method to create a button.


// x = x position of our rectangle. 
// y = y position of our rectangle.
// w = width of our rectangle. 
// h = height of our rectangle. 
function CreateButton(x, y, w, h) 
{
    let rect = new PIXI.Graphics();
    rect.beginFill(NORMAL_COLOR);
    rect.drawRect(x, y, w, h);
    rect.endFill();

    return rect.
}

Adding events to a shape

For the moment, this method simply let us to create a basic shape but, this shape isn’t place anywhere and don’t have any behaviours. Let’s add some events.


const NORMAL = 0xFFFFFF;
const HOVER = 0x00FF00;
const DOWN = 0xFF0000; 

let button = CreateButton(posX, posY, width, height);

function CreateButton(x, y, w, h) 
{
    let rect = new PIXI.Graphics();
    rect.beginFill(NORMAL_COLOR);
    rect.drawRect(x, y, w, h);
    rect.endFill();

    rect.on("pointerup", PointerUp);
    rect.on("pointerdown", PointerDown);
    rect.on("pointerout", PointerOut);
    rect.on("pointerover", PointerHover);

    return rect.
}

function PointerUp(e) 
{
    console.log("Up");
}

function PointerDown(e) 
{
    console.log("Down");
}

function PointerOut(e)
{
    console.log("Out");
}   

function PointerHover(e);
{
    console.log("Hover");
}

Now we can check our console to see if our button react to our different events. We can then change the colour of our button when the pointer is over it.


const NORMAL = 0xFFFFFF;
const HOVER = 0x00FF00;
const DOWN = 0xFF0000; 

let button = CreateButton(posX, posY, width, height);

function CreateButton(x, y, w, h) 
{
    let rect = new PIXI.Graphics();
    rect.beginFill(NORMAL_COLOR);
    rect.drawRect(x, y, w, h);
    rect.endFill();

    rect.on("pointerup", PointerUp);
    rect.on("pointerdown", PointerDown);
    rect.on("pointerout", PointerOut);
    rect.on("pointerover", PointerHover);

    return rect.
}

function PointerUp(e) 
{
    console.log("Up");
    this.tint = NORMAL;
}

function PointerDown(e) 
{
    console.log("Down");
    this.tint = DOWN;
}

function PointerOut(e)
{
    console.log("Out");
    this.tint = NORMAL;
}   

function PointerHover(e);
{
    console.log("Hover");
    this.tint = HOVER;
}

Containers in pixi.js

Containers in Pixi.JS can be used to store graphics, text & textures. You can switch between container to change scenes in your game/application. Containers can also be used as layer in your application : Background, Foreground…

Let’s create a container in pixi.js and then add it to our stage.


var container = new PIXI.Container();
app.stage.addChild(container);

1) What is PixiJS ?#

2) Setting up PixiJS#

Creating a text#

Creating a shape#

Adding events to a shape#