pixijs-rendering Checked

(async () => {

// v8: construct empty, then await init(). Config does NOT go in the constructor.

const app = new Application();

await app.init({

background: '#1099bb',

resizeTo: window, // track the window size

antialias: true,

// preference: 'webgpu', // hint only; default order tries 'webgl' first.

// // Pixi falls back if the backend is unavailable —

// // branch on app.renderer.name, don't assume it took.

});

document.body.appendChild(app.canvas); // v8 uses app.canvas, not app.view

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

const bunny = new Sprite(texture);

bunny.anchor.set(0.5);

bunny.position.set(app.screen.width / 2, app.screen.height / 2);

app.stage.addChild(bunny);

})();

### 2. Containers for a relative-transform scene graph

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

const world = new Container();

app.stage.addChild(world);

// Children are positioned relative to world; move/scale/rotate the whole group

// by transforming the parent.

for (let i = 0; i < 10; i++) {

const coin = new Sprite(coinTexture);

coin.x = i * 40;

world.addChild(coin);

}

world.position.set(100, 100);

world.scale.set(2); // every coin scales with the container

### 3. The ticker loop (frame-rate independent)

let elapsed = 0;

app.ticker.add((ticker) => {

// deltaTime ≈ 1 at 60fps; deltaMS is milliseconds since last frame.

elapsed += ticker.deltaMS;

bunny.rotation += 0.05 * ticker.deltaTime; // smooth at any frame rate

bunny.y = app.screen.height / 2 + Math.sin(elapsed / 500) * 50;

});

### 4. Pointer events (federated)

bunny.eventMode = 'static'; // 'static' = interactive, doesn't move on its own

bunny.cursor = 'pointer'; // hover cursor; buttonMode was removed in v8

bunny.on('pointerdown', (event) => {

bunny.tint = 0xff0000;

// event.global is the pointer position in stage space.

});

bunny.on('pointerover', () => bunny.scale.set(1.1));

bunny.on('pointerout', () => bunny.scale.set(1.0));

Dragging needs `globalpointermove`, not `pointermove`. In v8 `pointermove` fires
**only while the pointer is over the object**, so a drag that follows the cursor
past the object's edge stops updating. `globalpointermove` fires on every move:

let dragging = false;

bunny.on('pointerdown', () => { dragging = true; });

bunny.on('pointerup', () => { dragging = false; });

bunny.on('pointerupoutside', () => { dragging = false; }); // release off the object

bunny.on('globalpointermove', (event) => {

if (dragging) bunny.position.copyFrom(event.global);

});

### 5. Loading many assets by name (bundles)

import { Assets } from 'pixi.js';

await Assets.init({

manifest: {

bundles: [{

name: 'level-1',

assets: [

{ alias: 'hero', src: 'assets/hero.png' },

{ alias: 'tiles', src: 'assets/tiles.png' },

],

}],

},

});

const bundle = await Assets.loadBundle('level-1'); // { hero: Texture, tiles: Texture }

const hero = new Sprite(bundle.hero);

### 6. Render groups for large static layers

// A big, rarely-changing background subtree: let the GPU cache its transforms.

const background = new Container({ isRenderGroup: true });

app.stage.addChild(background);

// Add hundreds of static tiles to background. Moving background itself stays

// cheap; constantly re-adding/removing children negates the benefit.

## Pitfalls

- **Blank canvas / "app.stage is undefined"** → you didn't `await app.init()`, or you
  configured the constructor. In v8 the constructor is empty; all options go to
  `init()`. `app.renderer`/`app.canvas`/`app.screen` are `undefined` until the
  `init()` promise resolves.
- **`app.view` is undefined** → v8 renamed it to `app.canvas`.
- **Porting v7 code** → `Loader`/`loader.add` → `Assets.load` (the `Loader` class is
  gone); synchronous `new Application({...})` → empty constructor + async `init()`
  (options in the constructor are ignored with a deprecation warning, not an error);
  `beginFill()`/`endFill()` → shape-first `.rect(...).fill(...)`. `interactive = true`
  and `app.view` still work as deprecated aliases.
- **Ticker callback arg is the Ticker, not a delta number** → `app.ticker.add((dt) =>
  { obj.rotation += dt; })` compiles, but `dt` is the whole `Ticker` object, so the
  math yields `NaN` and nothing animates. Read `ticker.deltaTime` off the argument.
- **Top-level await build error (Vite ≤6.0.6)** → wrap boot in `(async () => { ... })()`.
- **Speed varies with frame rate** → multiply movement by `ticker.deltaTime` (~1 at
  60fps) or scale by `ticker.deltaMS`; never assume 60fps. `deltaTime` is a
  dimensionless multiplier, not milliseconds.
- **Clicks do nothing** → the object's `eventMode` is still `'passive'` (the v8
  default: self not interactive, children still are); set it to `'static'` (or
  `'dynamic'` for objects that move under a stationary cursor).
- **Drag stops at the object's edge** → `pointermove` fires only while the pointer is
  over the object in v8; use `globalpointermove` for drag/global tracking.
- **`Texture.from(url)` returns a blank/undefined texture** → in v8 it only reads the
  Assets cache; `await Assets.load(url)` first, then use the returned `Texture`.
- **WebGPU features error out** → `preference` is a hint. If the backend is
  unavailable Pixi falls back (WebGL, then Canvas); branch on `app.renderer.name`
  before using backend-specific code.
- **Textures look blurry on pixel art** → set
  `texture.source.scaleMode = 'nearest'` (or pass it when loading).
- **Memory grows** → `removeChild` does not free GPU memory