name: pixijs-application description: "Use for PixiJS v8 Application setup, app.init, renderer/canvas/screen/stage, resizeTo, ticker/sharedTicker, CullerPlugin, app.start/stop/destroy, releaseGlobalResources." license: MIT
Use this for creating, configuring, resizing, starting, stopping, or destroying a PixiJS Application.
Fast Path
import { Application } from 'pixi.js';
const app = new Application();
await app.init({ width: 800, height: 600, background: 0x1099bb });
document.body.appendChild(app.canvas);
Rules
- v8 requires
new Application()plus asyncawait app.init(options). Do not pass options to the constructor. - Use
app.canvas, notapp.view; useapp.stage,app.renderer, andapp.screenfor the main scene. - Use
resizeTofor browser/container resizing, then rely on the resize plugin instead of manual canvas CSS hacks. - Use
app.ticker.add((ticker) => ...); readticker.deltaTime,ticker.deltaMS, orticker.FPS. - Use
app.destroy(rendererDestroyOptions, stageDestroyOptions). For same-tab re-init leaks or stale textures, includereleaseGlobalResources: truewhere appropriate. CullerPluginonly helps when containers are markedcullable; addcullAreawhen bounds are expensive.app.domContainerRootbelongs next toapp.canvaswhen usingDOMContaineroverlays.
Related Reads
- Deep application details: references/details.md
- Full
ApplicationOptions: references/application-options.md - Render loop:
pixijs-ticker - Stage and children:
pixijs-scene-container - Non-browser runtime:
pixijs-environments
Common Fixes
- Constructor options in v7 style: move them into
await app.init(...). - Missing canvas: append
app.canvasafter init. - Recreated app flickers: destroy renderer/stage resources before creating the next app.