Pixijs Application
Look up every `ApplicationOptions` field for PixiJS `app.init()` when sizing the canvas, tuning renderers, or wiring plugins like `resizeTo` and `sharedTicker`.
Overview
PixiJS Application is an agent skill for the Build phase that documents every ApplicationOptions field for configuring PixiJS `app.init()` from merged renderer, plugin, and system defaults.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-applicationWhat is this skill?
- Documents merged option sources: AutoDetectOptions, PixiMixins.ApplicationOptions, and per-system defaults
- Tables width, height, resolution, and CSS pixel mapping for the main canvas
- Covers plugin-oriented flags such as resizeTo, autoStart, sharedTicker, and culler
- Clarifies Partial<ApplicationOptions> semantics—everything optional unless you pass it
- Reference-oriented tables for background, view, GC, context, backbuffer, events, and graphics systems
- Options merge from three type sources: AutoDetectOptions, PixiMixins.ApplicationOptions, and per-system defaults
Adoption & trust: 1.4k installs on skills.sh; 206 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are wiring PixiJS `app.init()` but the option surface spans mixins, renderer auto-detect settings, and subsystem flags with unclear defaults.
Who is it for?
Solo builders implementing PixiJS canvas apps who want a single checklist-style reference while tuning init options.
Skip if: Teams that only need generic HTML/CSS layout without a WebGL/canvas PixiJS stack, or projects not using ApplicationOptions at all.
When should I use this skill?
Configuring or reviewing PixiJS Application initialization and ApplicationOptions before or during frontend implementation.
What do I get? / Deliverables
You pick the correct option keys and defaults for canvas size, plugins, and renderer systems so initialization matches PixiJS’s typed ApplicationOptions contract.
- Correct ApplicationOptions choices documented in code or comments
- Aligned init config for view, plugins, and renderer systems
Recommended Skills
Journey fit
Canonical shelf is Build because the skill is a frontend runtime configuration reference used while implementing the PixiJS canvas app, not during research or shipping checks. Options map view/canvas, renderer systems, and display plugins—core frontend graphics setup for PixiJS games and interactive UIs.
How it compares
Use as a typed init reference instead of copying random snippets from older PixiJS versions or unrelated renderer tutorials.
Common Questions / FAQ
Who is pixijs-application for?
Indie and solo developers building games or rich canvas UIs with PixiJS who need accurate ApplicationOptions while coding the frontend.
When should I use pixijs-application?
During Build frontend work when you configure `app.init()`, resize behavior, resolution, or plugin options; also when debugging canvas sizing after a renderer upgrade.
Is pixijs-application safe to install?
It is reference documentation with no runtime side effects; review the Security Audits panel on this Prism page before adding any skill to your agent workflow.
SKILL.md
READMESKILL.md - Pixijs Application
# ApplicationOptions reference Every option accepted by `app.init(options)`. Options come from three type sources merged into a single interface: - `AutoDetectOptions` → base renderer options (width/height/resolution/etc.) - `PixiMixins.ApplicationOptions` → plugin options (`resizeTo`, `autoStart`, `sharedTicker`, `culler`) - System defaults → each renderer system (background, view, hello, GC, context, backbuffer, events, graphics) contributes its own options Options with no default are unset unless you pass them. `Partial<ApplicationOptions>` means everything is optional. ## View / canvas Configures the main canvas and how it maps to CSS pixels. | Option | Type | Default | Description | | ------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `width` | `number` | `800` | Initial width in CSS pixels. | | `height` | `number` | `600` | Initial height in CSS pixels. | | `canvas` | `ICanvas` | — | Existing `HTMLCanvasElement` (or `OffscreenCanvas`) to render into instead of creating one. | | `view` | `ICanvas` | — | **Deprecated since 8.0.0.** Alias for `canvas`. | | `resolution` | `number` | `1` | Device pixel ratio. Set to `window.devicePixelRatio` for HiDPI. | | `autoDensity` | `boolean` | `false` | Scale CSS dimensions of the canvas so `width`/`height` stay in CSS pixels while the backing store matches `resolution`. Only honored on `HTMLCanvasElement` (ignored on `OffscreenCanvas`). | | `antialias` | `boolean` | `false` | GPU MSAA where supported. On WebGL, this only affects the main context — use `useBackBuffer: true` if you need antialiased filtering. | | `depth` | `boolean` | — | Allocate a depth buffer for the main view. Always on for WebGL; needed for z-ordered rendering. | ```ts await app.init({ width: 1280, height: 720, resolution: window.devicePixelRatio, autoDensity: true, antialias: true, }); ``` ## Background Controls the clear color applied each frame. | Option | Type | Default | Description | | ------------------- | ------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `backgroundColor` | `ColorSource` | `0x000000` | Canvas clear color. Accepts hex, CSS string, `[r, g, b, a]`, or any `ColorSource`. | | `background` | `ColorSource` | — | Alias for `backgroundColor`. If both are set, `bac