{"enrichment":{"faq":[{"a":"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.","q":"How do I create a pixi app with custom initialization options?"},{"a":"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.","q":"What does the pixijs-application lifecycle include for startup and cleanup?"},{"a":"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.","q":"How can I extend pixijs-application with custom plugins and features?"},{"a":"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.","q":"How does pixijs-application handle canvas resizing and responsive scaling?"},{"a":"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.","q":"What performance optimizations does pixijs-application support?"},{"a":"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.","q":"How do I configure pixijs-application renderer for WebGL, WebGPU, or Canvas?"}],"shadow_tags":["initialization-pattern","rendering-lifecycle","plugin-architecture","canvas-management","performance-optimization","dom-integration","context-configuration","cleanup-teardown"],"summary_rewrite":"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."},"files":[{"bytes":11720,"path":"skills/pixijs-application/SKILL.md","sha256":"3062875de3ae3032aea216ce144a0ffc23d921c317d773f6adeb5b829c0f802f","url":"https://skillfed.io/files/pixijs/pixijs-skills/pixijs-application/fb84a078/SKILL.md"}],"id":"pixijs/pixijs-skills/pixijs-application","links":{"html":"https://skillfed.io/pixijs/pixijs-skills/pixijs-application","md":"https://skillfed.io/pixijs/pixijs-skills/pixijs-application.md","repo":"https://github.com/pixijs/pixijs-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":16,"language":null,"last_updated":"2026-06-04","license":"MIT","name":"pixijs-application","publisher":"pixijs","stars":293},"relations":{"similar":[{"id":"pixijs/pixijs-skills/pixijs-core-concepts"},{"id":"pixijs/pixijs-skills/pixijs-create"},{"id":"freshtechbro/claudedesignskills/pixijs-2d"},{"id":"pixijs/pixijs-skills/pixijs-performance"},{"id":"gamedev-skills/awesome-gamedev-agent-skills/pixijs-rendering"},{"id":"pixijs/pixijs-skills/pixijs-migration-v8"},{"id":"pixijs/pixijs-skills/pixijs-ticker"},{"id":"pixijs/pixijs-skills/pixijs-html-source"},{"id":"pixijs/pixijs-skills/pixijs-scene-dom-container"},{"id":"pixijs/pixijs-skills/pixijs"}]},"slug":{"owner":"pixijs","repo":"pixijs-skills","skill":"pixijs-application"},"version":"fb84a078"}