Skip to main content

Basic

import * as PIXI from 'pixi.js';

// This example is the based on basic/container, but using OffscreenCanvas.

const canvas = document.createElement('canvas');
const view = canvas.transferControlToOffscreen();

const app = new PIXI.Application({ view, background: 0x1099bb, resizeTo: window });

document.body.appendChild(canvas);

const container = new PIXI.Container();

app.stage.addChild(container);

// Create a new texture
const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');

// Create a 5x5 grid of bunnies
for (let i = 0; i < 25; i++)
{
const bunny = new PIXI.Sprite(texture);

bunny.anchor.set(0.5);
bunny.x = (i % 5) * 40;
bunny.y = Math.floor(i / 5) * 40;
container.addChild(bunny);
}

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

// Center bunny sprite in local container coordinates
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2;

// Listen for animate update
app.ticker.add((delta) =>
{
// rotate the container!
// use delta to create frame-independent transform
container.rotation -= 0.01 * delta;
});