Fast, lightweight 2D rendering engine for creating interactive graphics, particle effects, and canvas-based applications using WebGL/WebGPU. Use this skill when building 2D games, particle systems, interactive canvases, sprite animations, or UI overlays on 3D scenes. Triggers on tasks involving Pixi

PixiJS 2D Rendering Skill Fast, lightweight 2D rendering engine for creating interactive graphics, particle effects, and canvas based applications using WebGL/WebGPU. When to Use This Skill Trigger this skill when you encounter: "Create 2D particle effects" or "animated particles" "2D sprite animation" or "sprite sheet handling" "Interactive canvas graphics" or "2D game" "UI overlays on 3D scenes" or "HUD layer" "Draw shapes programmatically" or "vector graphics API" "Optimize rendering performance" or "thousands of sprites" "Apply visual filters" or "blur/displacement effects" "Lightweight 2D engine" or "alternative to Canvas2D" Use PixiJS for : High performance 2D rendering (up to 100,000+ sprites), particle systems, interactive UI, 2D games, data visualization with WebGL acceleration. Don't use for : 3D graphics (use Three.js/R3F), simple animations (use Motion/GSAP), basic DOM manipulation. Core Concepts 1. Application & Renderer The entry point for PixiJS applications: Key Properties : app.stage : Root container for all display objects app.renderer : WebGL/WebGPU renderer instance app.ticker : Update loop for animations app.screen : Canvas dimensions 2. Sprites & Textures Core visual elements loaded from images: Quick Creation : 3. Graphics API Draw vector shapes programmatically: SVG Support : 4. ParticleContainer Optimized container for rendering thousands of sprites: Performance : Up to 10x faster than regular Container for static properties. 5. Filters Apply per pixel effects using WebGL shaders: Available Filters : BlurFilter : Gaussian blur ColorMatrixFilter : Color transformations (sepia, grayscale, etc.) DisplacementFilter : Warp/distort pixels AlphaFilter : Flatten alpha across children NoiseFilter : Random grain effect FXAAFilter : Anti aliasing 6. Text Rendering Display text with styling: Performance Tip : Use BitmapText for frequently changing text (scores, counters). Common Patterns Pattern 1: Basic Interactive Sprite Pattern 2: Drawing with Graphics Pattern 3: Particle System with ParticleContainer Pattern 4: Applying Filters Pattern 5: Custom Filter with Shaders Pattern 6: Sprite Sheet Animation Pattern 7: Object Pooling for Performance Integration Patterns React Integration Three.js Overlay (2D UI on 3D) Performance Best Practices 1. Use ParticleContainer for Large Sprite Counts 2. Optimize Filter Usage 3. Manage Texture Memory 4. Enable Culling for Off Screen Objects 5. Cache Static Graphics as Bitmaps 6. Optimize Renderer Settings 7. Use BitmapText for Dynamic Text Common Pitfalls Pitfall 1: Not Destroying Objects Problem : Memory leaks from unreleased GPU resources. Solution : Pitfall 2: Updating Static ParticleContainer Properties Problem : Changing scale when dynamicProperties.scale = false has no effect. Solution : Pitfall 3: Excessive Filter Usage Problem : Filters are expensive; too many cause performance issues. Solution : Pitfall 4: Frequent Text Updates Problem : Updating Text re generates texture every time. Solution : Pitfall 5: Graphics Clear() Without Redraw Problem : Calling clear() removes all geometry but doesn't automatically redraw. Solution : Pitfall 6: Not Using Asset Loading Problem : Creating sprites from URLs causes async issues. Solution : Resources Official Site : https://pixijs.com API Documentation : https://pixijs.download/release/docs/ Examples : https://pixijs.io/examples/ GitHub : https://github.com/pixijs/pixijs Filters Library : @pixi/filter packages Community : https://github.com/pixijs/pixijs/discussions Related Skills threejs webgl : For 3D graphics; PixiJS can provide 2D UI overlays gsap scrolltrigger : For animating PixiJS properties with scroll motion framer : For React component animations alongside PixiJS canvas react three fiber : Similar React integration patterns Summary PixiJS excels at high performance 2D rendering with WebGL acceleration. Key strengths: 1. Performance : Render 100,000+ sprites at 60 FPS 2. ParticleContainer : 10x faster for static properties 3. Filters : WebGL powered visual effects 4. Graphics API : Intuitive vector drawing 5. Asset Management : Robust texture and sprite sheet handling Use for particle systems, 2D games, data visualizations, and interactive canvas applications where performance is critical.

pixijs-2d