PixiJS, JavaScript Library for 2D Graphics

PixiJS is an open-source JavaScript library that is a real-time 2D rendering library that uses WebGL to provide high performance in web and mobile applications.

Initially developed by Goodboy Digital, PixiJS has gained popularity among game developers and interactive applications due to its simplicity, flexibility, and speed.

PixiJS uses WebGL when available and HTML5 Canvas as a fallback, ensuring optimal performance across a wide range of devices.

PixiJS stands out for the following features:

• Fast performance: Thanks to WebGL, PixiJS can efficiently handle complex graphics.
• Simple and flexible API: Makes it easy to create animations and advanced graphics.
• Multi-device compatibility: Works well on desktops and mobile devices.
• Extensibility: Allows adding plugins for additional functionalities.

For more information and examples, you can visit the official PixiJS documentation.

Installing PixiJS

To start using PixiJS, we first need to include it in our project. We can do this by including it via a CDN, installing it with npm, or downloading the files from the official site.

Using CDN

<script src="https://pixijs.download/release/pixi.min.js"></script>

Using npm

npm install pixi.js

Then, import PixiJS into your JavaScript project:

import * as PIXI from 'pixi.js';

How to Use PixiJS

Next, we will show how to set up a basic stage with PixiJS and how to add graphics and animations.

Creating a PixiJS Application

First, we create a PixiJS application and add it to the HTML document:

await app.init({   
	height: 300, background: '#1099bb'});

  container = document.getElementById("appContainer");
  container.appendChild(app.canvas);

Adding a Sprite

To add a sprite (an image) to the application, you can load an image and then add it to the stage:

// Load the bunny texture.
const texture = await PIXI.Assets.load('path_to_your_image.png')

// Create a new Sprite from an image path
const sprite = new PIXI.Sprite(texture);

// Add to stage
app.stage.addChild(sprite);

// Center the sprite's anchor point
sprite.anchor.set(0.5);

// Move the sprite to the center of the screen
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;

Basic Animation

To animate the sprite, we can use the PixiJS ticker:

app.ticker.add((time) =>
{
	sprite.rotation += 0.05 * time.deltaTime;
});

This code will make the sprite rotate continuously.

Interactivity

PixiJS also supports interactivity, allowing you to handle events like clicks and touches:

sprite.interactive = true;

sprite.on('mouseenter', () => {
	sprite.scale.x *= 3;
	sprite.scale.y *= 3;
});

sprite.on('mouseleave', () => {
	sprite.scale.x *= 0.33;
	sprite.scale.y *= 0.33;
});

Using Basic Graphics

PixiJS allows you to draw basic shapes like rectangles, circles, and lines:

const graphics = new PIXI.Graphics();

// Draw a rectangle
graphics.beginFill(0xde3249);
graphics.drawRect(50, 50, 100, 100);
graphics.endFill();

app.stage.addChild(graphics);

Filtering and Effects

PixiJS includes several filters and effects that can be applied to graphics to enhance visual appearance:

const blurFilter = new PIXI.filters.BlurFilter();
sprite.filters = [blurFilter];

Complete Example

Let’s look at a simple but complete example of how to use Pixi. Combining what we’ve seen before, we have the following code:

// Create a PixiJS application.
const app = new PIXI.Application();

// Initialize the application.
await app.init({   
	height: 300, background: '#1099bb'});

  container = document.getElementById("appContainer");
  container.appendChild(app.canvas);

// Load the bunny texture.
const texture = await PIXI.Assets.load('path_to_your_image.png')

// Create a new Sprite from an image path
const sprite = new PIXI.Sprite(texture);

// Add to stage
app.stage.addChild(sprite);

// Center the sprite's anchor point
sprite.anchor.set(0.5);

// Move the sprite to the center of the screen
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;

app.ticker.add((time) =>
{
	sprite.rotation += 0.05 * time.deltaTime;
});

sprite.interactive = true;

sprite.on('mouseenter', () => {
	sprite.scale.x *= 3;
	sprite.scale.y *= 3;
});

sprite.on('mouseleave', () => {
	sprite.scale.x *= 0.33;
	sprite.scale.y *= 0.33;
});

With the above code, we would achieve this result.