PixiJS is an open-source JavaScript library for real-time 2D rendering that uses WebGL to deliver high performance in web and mobile applications.
Initially developed by Goodboy Digital, PixiJS has gained popularity among game developers and creators of interactive applications thanks to its simplicity, flexibility, and speed.
PixiJS uses WebGL when available, and HTML5 Canvas as a fallback, ensuring optimal performance across a wide variety of devices.
PixiJS stands out for the following features:
- Fast Performance: Thanks to WebGL, PixiJS can handle complex graphics efficiently.
- Simple and Flexible API: Makes it easy to create advanced animations and graphics.
- Multi-device Compatibility: Works well on desktops and mobile devices.
- Extensibility: Allows adding plugins for additional functionality.
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 a 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
Below is how to set up a basic scene 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 PixiJS’s 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 handling of 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 drawing 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 various 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 see a simple, but complete, example of how to use Pixi. Putting together 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 code above we would get this result.
