pixijs-application
Master PixiJS Application initialization and renderer configuration for fast 2D graphics across WebGL, WebGPU, and Canvas. This skill covers foundational setup, scene graph structure, sprite and graphics rendering, text display, filter effects, and performance tuning techniques. Ideal for developers building interactive web experiences with PixiJS v8.
pixijs-application lets you initialize a PixiJS Application with fine-grained renderer configuration. Pass an options object to the Application constructor specifying width, height, backgroundColor, antialias, resolution, and preference (webgl, webgpu, or canvas). Use app.init() as an async method to complete setup, then append app.canvas to the DOM and start your render loop with app.ticker.
AI-generated summary based on this skill's SKILL.md
Install
pixijs/pixijs-skills/pixijs-application
git clone https://github.com/pixijs/pixijs-skills
cp -r pixijs-skills/skills/pixijs-application ~/.claude/skills/pixijs-applicationFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create a pixi app with custom initialization options?
pixijs-application lets you initialize a PixiJS Application with fine-grained renderer configuration. Pass an options object to the Application constructor specifying width, height, backgroundColor, antialias, resolution, and preference (webgl, webgpu, or canvas). Use app.init() as an async method to complete setup, then append app.canvas to the DOM and start your render loop with app.ticker.
What does the pixijs-application lifecycle include for startup and cleanup?
pixijs-application manages the full Application lifecycle: initialization via constructor and app.init(), continuous rendering through the built-in ticker, and graceful cleanup with app.destroy(). The render loop automatically updates the stage each frame. Call destroy() to release GPU resources, remove event listeners, and prevent memory leaks when your application ends or the canvas is removed.
How can I extend pixijs-application with custom plugins and features?
pixijs-application supports plugin architecture to extend core functionality. Register custom plugins during initialization or after instantiation to add features like custom cullers, input managers, or animation systems. Plugins integrate with the Application's lifecycle, ticker, and stage, allowing modular enhancement without modifying core rendering code.
How does pixijs-application handle canvas resizing and responsive scaling?
pixijs-application provides resizeTo option to bind canvas dimensions to a target element (window or container). Set app.resizeTo and the canvas automatically scales. Access app.screen for current resolution and use app.renderer.resize() for manual updates. This enables responsive 2D graphics that adapt to window or container size changes.
What performance optimizations does pixijs-application support?
pixijs-application optimizes rendering through ticker control (pause/resume rendering), culling plugins to skip off-screen objects, and WebGPU preference for modern hardware. Configure autoStart to false if you need manual render loop control. Monitor frame rate via app.ticker.FPS and use profiling to identify bottlenecks in your scene graph.
How do I configure pixijs-application renderer for WebGL, WebGPU, or Canvas?
pixijs-application accepts a preference option in its constructor to specify rendering backend: 'webgl', 'webgpu', or 'canvas'. WebGPU offers cutting-edge performance on supported browsers; WebGL provides broad compatibility; Canvas is a fallback. The renderer automatically selects based on your preference and browser capabilities, ensuring optimal 2D graphics delivery.
SKILL.md
rendered from the published skill — quoted content, verbatim
Application is the convenience wrapper that owns a renderer, a root stage Container, a
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
skills/pixijs-application/SKILL.md
skills/pixijs-application/references/application-options.md