PixiJS Introduction

PixiJS

  • HTML5 Creation Engine
  • Lightweight 2D JavaScript library
  • Supports both Canvas API and WebGL (since version 5 it's only WebGL)
  • Full scene graph, sprite sheets, filters, shaders
  • Similar to PhaserJS game engine (yet it's way faster)
  • Ideal for simple games and rapid prototyping

Links

Architecture

Namespaces

  • this is just a subset, there are over 500 classes
  • systems - individual components of the rendering pipeline
  • resources - resources used by BaseTexture to handle different media types
  • interaction - handling of input events (keyboard, mouse, touch)
  • prepare - asynchronous preparation of the rendering pipeline
  • extract - rendering-specific functions for exporting content
  • settings - customizable globals (default resolution, framerate,...)
  • utils - generalized utilities
  • filters - WebGL-only display filters

Classes

  • Application - PIXI entry class, should be extended
  • Runner - alternative to signals, good for dispatching messages to many objects every frame
  • State - WebGL state
  • Transform - Transformation entity
  • Ticker - Update loop
  • Loader - resource loader
  • Shader - helper class for GPU shaders
  • Spritesheet - utility class for maintaining reference to a collection of textures

Display Entities

  • EventEmitter - high-performance event emitter, similar to the default NodeJS emitter
  • DisplayObject - base class of all renderable objects
  • Container - a collection of displayable objects
  • Mesh - base mesh for rendering any WebGL visuals
  • Sprite - base class of all textured objects
  • Graphics - class for drawing primitive shapes (lines, circles, rectangles)
  • ParticleContainer - very fast version of the Container for drawing lots of sprites
  • BitmapText - very fast bitmap text renderer (textures are preloaded)
  • Renderer - class that draw the scene onto a WebGL canvas
  • BaseTexture - wrapper for texture images
  • BaseRenderTexture - special texture that allows any object to be rendered to it
  • CubeTexture - image/canvas/video/svg texture
  • Texture - BaseTexture with metadata
  • RenderTexture - RenderTexture with metadata

DisplayObject

  • members
    • alpha, angle, buttonMode, cursor, filters, hitArea, interactive, localTransform, name, parent, pivot, position, renderable, rotation, scale, skew, transform, visible, worldAlpha, worldTransform, worldVisible, x,y, zIndex
  • methods
    • destroy, getBounds, getGlobalPosition, getLocalBounds, render, setParent, setTransform, toGlobal, toLocal, updateTransform
  • events
    • added, click, mousedown, mousemove, mouseout, mouseover, mouseup, removed, tap, touchcancel, touchend, touchmove, touchstart

Interesting Plugins

DevTools

Basic setup

import * as PIXI from "pixi.js";
export default class MyPixiApp extends PIXI.Application {
constructor(view: HTMLCanvasElement) {
super({ view });
this.ticker.add(deltaTime => this.update(deltaTime));
}
update(deltaTime: number) {
// game loop
}
}
  • it's recommended to create a new class and extend PIXI.Application
  • the only mandatory parameter is the view entity, which should be a HTML canvas

Other attributes

autoStart: boolean, // automatically starts the game loop
width: number, // width of the canvas element (in px)
height: number, // height of the canvas element (in px)
view: HTMLCanvasElement, // link to the canvas
transparent: boolean, // if true, the canvas will be transparent
autoDensity: boolean, // whether CSS dimensions should be resized to screen dim.
antialias: boolean, // sets anti-aliasing
preserveDrawingBuffer: boolean, // if true, preserves stencil buffer
resolution: number, // global scale of the screen (default is 1)
forceCanvas: boolean, // prevents selection of WebGL
backgroundColor: number, // background color of the canvas
clearBeforeRender: boolean, // if true, clears the canvas before next render cycle
forceFXAA: boolean, // forces FXAA anti-aliasing
powerPreference: string, // WebGL parameter for devices with more than one GPU
sharedTicker: boolean, // if true, uses global ticker for updates
sharedLoader: boolean, // if true, uses global loader
resizeTo: Window | HTMLElement, // resizes to a custom HTML element

Update loop

  • option 1: by using PIXI internal ticker
let ticker = this.ticker;
// prevents autostart
ticker.autoStart = false;
// stops the ticker
ticker.stop();
// starts the ticker if autoStart is false
ticker.start();
// here we can register our update method
ticker.add(delta => this.ourUpdateMethod(delta));
  • option 2: by using animation frame of the JavaScript engine
ticker.autoStart = false;
ticker.stop();
let myUpdateLoop =(time) => {
ticker.update(time);
this.renderer.render(this.stage);
requestAnimationFrame(myUpdateLoop);
}
myUpdateLoop(performance.now());

Loading

  • Loader is responsible for asynchronous loading of assets (fonts, images, sounds, spritesheets)
let loader = this.loader;
// Chainable `add` to enqueue a resource
loader.add('mySprite', 'data/sprite.png') // first parameter is an alias
.add('spritesheet', 'assets/spritesheet.json')
.add('bitmapFont', 'assets/score.fnt');
// loading is asynchronous !!
loader.load((loader, resources) => {
// init the rest of the game and run the ticker
});
// loader events
loader.onProgress.add(() => {}); // called once per loaded/errored file
loader.onError.add(() => {}); // called once per errored file
loader.onLoad.add(() => {}); // called once per loaded file
loader.onComplete.add(() => {}); // called once when the queued resources all load

Positioning

  • position, rotation, scale, zIndex
  • rotation - rotation in radians
  • pivot - origin of the object in px (rotation is always around the origin
  • anchor - relative origin of the object (only for Sprites
  • the scale of the parent affects the units of its children (common behavior of all gfx libraries)
  • pivot is not affected by the scale, it always takes into account the size of the object in px
  • stage is the root element of the scene graph
  • getBounds() - retrieves the bounds of the object, can be used to check where the object is
  • toGlobal() - calculates the global position
  • toLocal() - calculates the local position relative to another point

Exercises

  • all exercises are relevant to a project version with a tag of 4.2

Primitive shapes

  • go to examples/src/02-pixi-intro/primitives.ts
  • follow the instructions in the TODO block and draw the picture below
  • you can access the canvas in http://localhost:1234/02_primitives.html

Text

  • go to examples/src/02-pixi-intro/text.ts
  • follow the instructions in the TODO block and draw an animated text
  • you can access the canvas in http://localhost:1234/02_text.html

Particles

  • go to examples/src/02-pixi-intro/particles.ts
  • follow the instructions in the TODO block and create rotating particles
  • you can access the canvas in http://localhost:1234/02_particles.html

Sound

  • go to examples/src/02-pixi-intro/sound.ts
  • follow the instructions in the TODO block and play a sound when you click on the sprite
  • you can access the canvas in http://localhost:1234/02_sound.html