pixijs-application

Name: pixijs-application
Author: pixijs

3.0kinstalls15forks

How to install pixijs-application?

pixijs/pixijs-skills/pixijs-application

$npx -y skills add pixijs/pixijs-skills --skill pixijs-application

Installs into the current project.

Summary

Use this skill when creating and configuring a PixiJS v8 Application. Covers new Application() + async app.init() options (width, height, background, antialias, resolution, autoDensity, preference, resizeTo, autoStart, sharedTicker, canvas, useBackBuffer, powerPreference, eventFe

Files · 1

View on GitHub

SKILL.md

1	`Application` is the convenience wrapper that owns a renderer, a root `stage` Container, a canvas, and the Ticker/Resize plugins. In v8 the constructor takes no arguments; all configuration is passed to the async `app.init()` call which instantiates the renderer via `autoDetectRenderer`.
2
3	## Quick Start
4
5	```ts
6	import { Application } from "pixi.js";
7
8	const app = new Application();
9
10	await app.init({
11	resizeTo: window,
12	background: "#1099bb",
13	antialias: true,
14	preference: "webgl",
15	autoDensity: true,
16	resolution: window.devicePixelRatio,
17	});
18
19	document.body.appendChild(app.canvas);
20	```
21
22	Related skills: `pixijs-core-concepts` (renderers, render pipeline), `pixijs-ticker` (render loop detail), `pixijs-scene-container` (working with `app.stage`), `pixijs-environments` (non-browser setups).
23
24	## Core Patterns
25
26	### Lifecycle: construct, init, render, destroy
27
28	```ts
29	import { Application } from "pixi.js";
30
31	const app = new Application();
32
33	await app.init({ width: 800, height: 600 });
34	document.body.appendChild(app.canvas);
35
36	// ... run scene, ticker drives app.render() automatically ...
37
38	app.destroy(
39	{ removeView: true, releaseGlobalResources: true },
40	{ children: true, texture: true, textureSource: true },
41	);
42	```
43
44	- `new Application()` allocates the instance but creates nothing. Options passed here are ignored with a v8 deprecation warning.
45	- `app.init(options)` is async. It builds the renderer, wires up plugins, and must complete before you can use `app.canvas`, `app.renderer`, or `app.screen`.
46	- The TickerPlugin calls `app.render()` every frame once init resolves (unless `autoStart: false`).
47	- `app.destroy(rendererDestroyOptions, stageDestroyOptions)` — the first argument forwards to `renderer.destroy()`. Pass `true` or `{ removeView: true }` to remove the canvas from the DOM. Add `releaseGlobalResources: true` to drain global pools (batches, texture caches) when tearing down and re-creating an app in the same tab; omitting it is the usual cause of flickering and stale textures after a re-init (see `pixijs-performance`).
48
49	### Key init options
50
51	```ts
52	await app.init({
53	width: 800,
54	height: 600,
55	background: 0x1099bb,
56	backgroundAlpha: 1,
57
58	antialias: true,
59	resolution: window.devicePixelRatio,
60	autoDensity: true,
61
62	preference: "webgpu",
63
64	autoStart: true,
65	sharedTicker: false,
66
67	resizeTo: window,
68
69	canvas: document.querySelector("#game-canvas") as HTMLCanvasElement,
70	});
71	```
72
73	For every option — view/canvas, background, renderer preference (including the array form), ticker, resize, culler, events, accessibility, WebGL/WebGPU context flags, Graphics bezier smoothness, GC, and per-renderer overrides (`webgl` / `webgpu` / `canvasOptions`) — see [references/application-options.md](references/application-options.md).
74
75	### Application properties
76
77	```ts
78	app.stage; // root Container; add all display objects here
79	app.renderer; // the WebGL/WebGPU/Canvas renderer instance
80	app.canvas; // the HTMLCanvasElement (insert it into the DOM yourself)
81	app.screen; // Rectangle describing the visible area in CSS pixels
82	app.domContainerRoot; // HTMLDivElement that holds DOMContainer overlays
83	```
84
85	`app.stage` is a plain `Container`. For scene graph detail (transforms, addChild, destroy) see `pixijs-scene-container`. For renderer-level operations (extract, generateTexture, custom systems) see `pixijs-core-concepts` and `pixijs-custom-rendering`. `app.domContainerRoot` is the `<div>` that the renderer uses to host `DOMContainer` overlays; append it next to `app.canvas` when you need DOM elements pinned to scene nodes (see `pixijs-scene-dom-container`).
86
87	### ResizePlugin
88
89	Set `resizeTo` at init (or reassign `app.resizeTo` later) to have the plugin listen for the `resize` event and call `renderer.resize()` with the target element's client size. Combine with `autoDensity: true` and `resolution: window.devicePixelRatio` for high-DPI output.

People who liked this also viewed

6 picks

Type

pixijs-application

3.0kinstalls15forks

View on GitHub

How to install pixijs-application?

pixijs/pixijs-skills/pixijs-application

$npx -y skills add pixijs/pixijs-skills --skill pixijs-application

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	`Application` is the convenience wrapper that owns a renderer, a root `stage` Container, a canvas, and the Ticker/Resize plugins. In v8 the constructor takes no arguments; all configuration is passed to the async `app.init()` call which instantiates the renderer via `autoDetectRenderer`.
2
3	## Quick Start
4
5	```ts
6	import { Application } from "pixi.js";
7
8	const app = new Application();
9
10	await app.init({
11	resizeTo: window,
12	background: "#1099bb",
13	antialias: true,
14	preference: "webgl",
15	autoDensity: true,
16	resolution: window.devicePixelRatio,
17	});
18
19	document.body.appendChild(app.canvas);
20	```
21
22	Related skills: `pixijs-core-concepts` (renderers, render pipeline), `pixijs-ticker` (render loop detail), `pixijs-scene-container` (working with `app.stage`), `pixijs-environments` (non-browser setups).
23
24	## Core Patterns
25
26	### Lifecycle: construct, init, render, destroy
27
28	```ts
29	import { Application } from "pixi.js";
30
31	const app = new Application();
32
33	await app.init({ width: 800, height: 600 });
34	document.body.appendChild(app.canvas);
35
36	// ... run scene, ticker drives app.render() automatically ...
37
38	app.destroy(
39	{ removeView: true, releaseGlobalResources: true },
40	{ children: true, texture: true, textureSource: true },
41	);
42	```
43
44	- `new Application()` allocates the instance but creates nothing. Options passed here are ignored with a v8 deprecation warning.
45	- `app.init(options)` is async. It builds the renderer, wires up plugins, and must complete before you can use `app.canvas`, `app.renderer`, or `app.screen`.
46	- The TickerPlugin calls `app.render()` every frame once init resolves (unless `autoStart: false`).
47	- `app.destroy(rendererDestroyOptions, stageDestroyOptions)` — the first argument forwards to `renderer.destroy()`. Pass `true` or `{ removeView: true }` to remove the canvas from the DOM. Add `releaseGlobalResources: true` to drain global pools (batches, texture caches) when tearing down and re-creating an app in the same tab; omitting it is the usual cause of flickering and stale textures after a re-init (see `pixijs-performance`).
48
49	### Key init options
50
51	```ts
52	await app.init({
53	width: 800,
54	height: 600,
55	background: 0x1099bb,
56	backgroundAlpha: 1,
57
58	antialias: true,
59	resolution: window.devicePixelRatio,
60	autoDensity: true,
61
62	preference: "webgpu",
63
64	autoStart: true,
65	sharedTicker: false,
66
67	resizeTo: window,
68
69	canvas: document.querySelector("#game-canvas") as HTMLCanvasElement,
70	});
71	```
72
73	For every option — view/canvas, background, renderer preference (including the array form), ticker, resize, culler, events, accessibility, WebGL/WebGPU context flags, Graphics bezier smoothness, GC, and per-renderer overrides (`webgl` / `webgpu` / `canvasOptions`) — see [references/application-options.md](references/application-options.md).
74
75	### Application properties
76
77	```ts
78	app.stage; // root Container; add all display objects here
79	app.renderer; // the WebGL/WebGPU/Canvas renderer instance
80	app.canvas; // the HTMLCanvasElement (insert it into the DOM yourself)
81	app.screen; // Rectangle describing the visible area in CSS pixels
82	app.domContainerRoot; // HTMLDivElement that holds DOMContainer overlays
83	```
84
85	`app.stage` is a plain `Container`. For scene graph detail (transforms, addChild, destroy) see `pixijs-scene-container`. For renderer-level operations (extract, generateTexture, custom systems) see `pixijs-core-concepts` and `pixijs-custom-rendering`. `app.domContainerRoot` is the `<div>` that the renderer uses to host `DOMContainer` overlays; append it next to `app.canvas` when you need DOM elements pinned to scene nodes (see `pixijs-scene-dom-container`).
86
87	### ResizePlugin
88
89	Set `resizeTo` at init (or reassign `app.resizeTo` later) to have the plugin listen for the `resize` event and call `renderer.resize()` with the target element's client size. Combine with `autoDensity: true` and `resolution: window.devicePixelRatio` for high-DPI output.

People who liked this also viewed

6 picks

Type