core

10 карточек

1 / 10✓ 0✗ 0

junior

How do you bootstrap a PIXI.Application in v8 and why is init() async?

нажми, чтобы перевернуть

juniorcore

In v8 you construct `Application`, then `await app.init(options)`. The renderer (`WebGPU` or `WebGL`) is picked asynchronously, so options like `resolution`, `background` and `preference` must be passed to `init`, not the constructor.

v8 split construction from initialization because WebGPU adapter/device acquisition is async. The constructor is cheap; init() picks the best renderer (preference: 'webgpu' | 'webgl'), resolves the canvas, wires the Ticker, and sets autoDensity. Skipping init() leaves app.renderer undefined. For React/Vue you typically create the Application once, call init inside useEffect, and destroy on cleanup.

import { Application } from 'pixi.js'

const app = new Application()

await app.init({
  preference: 'webgpu',          // falls back to webgl if unavailable
  background: '#0b0d12',
  resizeTo: window,
  antialias: true,
  autoDensity: true,
  resolution: window.devicePixelRatio,
})

document.body.appendChild(app.canvas)

// Always clean up — app.destroy releases the GL/GPU context.
window.addEventListener('beforeunload', () => {
  app.destroy(true, { children: true, texture: true, textureSource: true })
})

Когда да

Any Pixi v8+ entry point — game loop, editor, chart renderer, or a WebGL/WebGPU canvas mounted inside a framework.

Когда нет

Short-lived headless rendering where you want the Renderer directly (autoRender off) — use new WebGLRenderer / new WebGPURenderer instead of Application.

Совет на собеседовании

Common trap: passing options to the constructor in v8. They are silently ignored — init() is the source of truth.

Свайп вправо — знаю, влево — не знаю

ArchCase

ArchCase

core

In v8 you construct `Application`, then `await app.init(options)`. The renderer (`WebGPU` or `WebGL`) is picked asynchronously, so options like `resolution`, `background` and `preference` must be passed to `init`, not the constructor.

core

In v8 you construct Application, then await app.init(options). The renderer (WebGPU or WebGL) is picked asynchronously, so options like resolution, background and preference must be passed to init, not the constructor.

In v8 you construct `Application`, then `await app.init(options)`. The renderer (`WebGPU` or `WebGL`) is picked asynchronously, so options like `resolution`, `background` and `preference` must be passed to `init`, not the constructor.