@pixi/display

What is @pixi/display?

@pixi/display is a part of the PixiJS library, which is a fast 2D rendering engine for creating interactive graphics and animations. The @pixi/display package specifically handles the display hierarchy, allowing you to manage and render display objects such as sprites, containers, and graphics.

What are @pixi/display's main functionalities?

Creating a Container

A Container is a basic building block in PixiJS that can hold and manage multiple display objects. This code creates a new Container and adds it to the stage.

const app = new PIXI.Application();
document.body.appendChild(app.view);
const container = new PIXI.Container();
app.stage.addChild(container);

Adding a Sprite to a Container

Sprites are basic display objects that can be rendered. This code creates a Sprite from a texture and adds it to the previously created Container.

const texture = PIXI.Texture.from('path/to/image.png');
const sprite = new PIXI.Sprite(texture);
container.addChild(sprite);

Handling Interactivity

PixiJS allows you to make display objects interactive. This code makes a Sprite interactive and sets up an event listener for pointerdown events.

sprite.interactive = true;
sprite.buttonMode = true;
sprite.on('pointerdown', () => {
  console.log('Sprite clicked!');
});

Animating Display Objects

PixiJS provides a ticker that can be used to update and animate display objects. This code rotates a Sprite continuously.

app.ticker.add((delta) => {
  sprite.rotation += 0.01 * delta;
});

Other packages similar to @pixi/display

three

Three.js is a popular 3D library that also supports 2D rendering. It provides a more comprehensive set of features for 3D graphics but can be more complex to use for simple 2D tasks compared to @pixi/display.

phaser

Phaser is a fast, robust, and mature 2D game framework. It offers a wide range of features for game development, including physics, input handling, and asset management. While it is more feature-rich, it can be overkill for simple 2D rendering tasks.

konva

Konva is a 2D canvas library for creating complex graphics on the web. It is similar to @pixi/display in terms of functionality but focuses more on providing a declarative API for creating and managing shapes and animations.

README

@pixi/display

Installation

npm install @pixi/display

Usage

import * as application from '@pixi/display';