@pixi/display

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;
});