Sample PixiJS Code

November 30, 2020 - 3 minutes read - 455 words

Introduction

An expansion of this post is coming soon.

PixiJS is a 2D animation library written in JavaScript. This post is about creating a standalone application.

Viewport

PixiJS uses a canvas element in the HTML page to render animation, so the first step is to place one in the page’s body.

<div id="screen" class="center"></div>

Basic styling can be used to make sure that the animation is centered in the page.

body {
  margin: 0;
}
canvas {
  display: block;
}

.center {
  margin: auto;
  width: 50%;
  padding: 10px;
}

Library

This is the only HTML and CSS one should need for a basic application. Rest of the screen area can be used to explain the application or provide a help section.

Rest of the application code is written as part of JavaScript. Create a file and include it in the HTML just before the closing body tag, and after PixiJS library.

  <body>
      ....
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
    <script src='main.js'></script>
  </body>

Application Init

First step is to initialize the application and bind it to the canvas element screen created earlier.

const app = new PIXI.Application({
  width: 512, // default: 800
  height: 512, // default: 600
  antialias: true, // default: false
  transparent: false, // default: false
  resolution: 1, // default: 1
});

document.getElementById("screen").appendChild(app.view);

Screen

Screen customization can be done using several options given by the library, two most important are background color and dimension.

// changing background color
app.renderer.backgroundColor = 0x061639;

const sdim = 600;
const tdim = 20;
// resizing
app.renderer.autoResize = true;
app.renderer.resize(sdim, sdim);

Frames

The game application defined above has a ticker function that gets called every frame. Library passes a convenient delta to the handler or callback function that tells it how many frames have elapsed, which is mostly 1.0. The ticker function is responsible for repainting the canvas, so based on the demand of the animation or game this rate can be controlled by updating the scenery every so often by keeping a predefined frame rate.

var frame = 0;
const frame_rate = 120; // update every two second

function main_loop(delta) {
  if (frame >= frame_rate) {
    frame = 0;
  } else {
    frame += delta;
    return;
  }
  // do update
}

Sprites

The application provides a stage handler to add, remove or reposition objects rendered on the canvas.

app.stage.addChild(rabbit);
app.stage.removeChild(rabbit);
rabbit.position.set(x, y);

rabbit here is a 2D asset usually loaded from an image file.

const rabbitTexture = new PIXI.Texture.fromImage("rabbitv3.png"); // loading image
const rabbit = new PIXI.Sprite(rabbitTexture); // creating sprite
rabbit.position.set(0, 0); // setting position in canvas

User Input

These handlers can be called from the main_loop or as part of user interaction captured by adding keypress event handlers.

window.addEventListener("keydown", (e) => {
  switch (
    e.code
    // do something
  ) {
  }
});