DEV Community

Gustavo Toledo
Gustavo Toledo

Posted on

Getting Started with PixiJS v8: Quick Start Guide

#gamedev #tutorial #beginners #javascript

PixiJS is an efficient library for 2D rendering in the browser, leveraging WebGL with a fallback to Canvas. It is widely used for games, interactive animations, and data visualizations. The v8.x release includes performance improvements and a modernized API.

This article follows the official Quick Start guide for PixiJS v8, available at https://pixijs.com/8.x/guides/getting-started/quick-start. It covers project setup and a practical example that creates a grid of rotating sprites.

Trying PixiJS Online

To experiment with PixiJS without local setup, use the PixiJS Playground.

Prerequisites

  • Familiarity with the command line and basic JavaScript knowledge.
  • Node.js version 20.0 or higher installed (available at nodejs.org).

Creating a New Project

The recommended approach is to use the official PixiJS CLI.

Run the following command in your terminal:

npm create pixi.js@latest
Enter fullscreen mode Exit fullscreen mode

This will launch the scaffolding tool and prompt you to configure the project. There are two main template categories:

Creation Templates (Recommended)

These are platform-specific, with additional configurations and dependencies. They are opinionated and suitable for beginners or those seeking a pre-configured setup.

Bundler Templates

These provide a general setup with a chosen bundler, offering flexibility in project structure. They are ideal for experienced developers.

For bundler templates, the Vite + PixiJS option is recommended due to its modern and fast configuration.

After selection, navigate to the project directory and install dependencies:

cd <your-project-name>
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

To add PixiJS to an existing project:

npm install pixi.js
Enter fullscreen mode Exit fullscreen mode

Example: Grid of Sprites Using a Container

The following example demonstrates grouping multiple sprites in a Container for centralized manipulation. It loads a texture and arranges 25 instances in a 5x5 grid.

Main code (typically in src/main.js or equivalent):

// Description: This example demonstrates how to use a Container to group and manipulate multiple sprites

import { Application, Assets, Container, Sprite } from 'pixi.js';

(async () => {
  // Create a new application
  const app = new Application();

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

  // Append the application canvas to the document body
  document.body.appendChild(app.canvas);

  // Create and add a container to the stage
  const container = new Container();
  app.stage.addChild(container);

  // Load the bunny texture
  const texture = await Assets.load('https://pixijs.com/assets/bunny.png');

  // Create a 5x5 grid of bunnies in the container
  for (let i = 0; i < 25; i++) {
    const bunny = new Sprite(texture);
    bunny.x = (i % 5) * 40;
    bunny.y = Math.floor(i / 5) * 40;
    container.addChild(bunny);
  }

  // Center the container
  container.x = app.screen.width / 2;
  container.y = app.screen.height / 2;

  // Center the container's origin
  container.pivot.x = container.width / 2;
  container.pivot.y = container.height / 2;

  // Animate rotation using the ticker
  app.ticker.add((time) => {
    container.rotation -= 0.01 * time.deltaTime;
  });
})();
Enter fullscreen mode Exit fullscreen mode

This example highlights key concepts: application initialization, asset loading, container usage for grouping, and frame-rate-independent animation via the ticker.

For further exploration, refer to the official documentation on advanced features such as filters, particles, and framework integrations.

Top comments (0)