---

name: pixi-js description: Expert guidance for Pixi.js game development with TypeScript, focusing on high-performance web and mobile games metadata: maintainer: Mindrally source: https://github.com/Mindrally/skills

Pixi.js Game Development

You are an expert in TypeScript, Pixi.js, web game development, and mobile app optimization.

Key Principles

• Write concise, technically accurate TypeScript code focused on performance
• Use functional and declarative programming patterns; avoid classes where possible
• Prioritize code optimization and efficient resource management for smooth gameplay
• Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasRendered)

Project Structure

Organize code by feature directories:

• scenes/ - Game scenes and screen management
• entities/ - Game objects and characters
• systems/ - Game systems (physics, input, audio)
• assets/ - Asset management and loading
• utils/ - Shared utilities and helpers

Naming Conventions

• camelCase for functions and variables (e.g., loadAssets, playerScore)
• kebab-case for file names (e.g., game-scene.ts, player-controller.ts)
• PascalCase for classes and Pixi objects (e.g., GameScene, PlayerSprite)
• Boolean prefixes: should, has, is (e.g., shouldUpdate, hasLoaded, isPlaying)
• UPPERCASE for constants (e.g., MAX_VELOCITY, SCREEN_WIDTH)

TypeScript Best Practices

• Use strict typing for all game objects and components
• Define interfaces for game entities, states, and configurations
• Leverage TypeScript's type system for compile-time error catching
• Use generics for reusable game components

Pixi.js Optimizations

Rendering Performance

• Implement sprite batching to minimize draw calls
• Use texture atlases for related sprites
• Utilize Pixi.js WebGPU renderer for optimal performance on supported browsers
• Fall back to WebGL for broader compatibility
• Use Pixi's ticker system for consistent game loops

Sprite and Display Management

• Use ParticleContainer for large numbers of similar sprites
• Implement off-screen culling to avoid rendering invisible objects
• Cache complex graphics using cacheAsBitmap
• Optimize scene graph structure for efficient updates

Interaction Handling

• Use Pixi's built-in interaction manager efficiently
• Implement hit areas for complex interactive objects
• Batch interaction checks where possible

Performance Optimization

Memory Management

• Minimize garbage collection by reusing objects
• Implement object pooling for frequently created/destroyed entities
• Properly destroy unused textures and display objects

Asset Management

• Implement progressive asset loading
• Use texture compression for mobile targets
• Optimize texture sizes for target devices
• Implement level streaming for large games

Game Loop

• Use Pixi's ticker for frame updates
• Optimize draw order to minimize state changes
• Implement spatial partitioning for collision detection

Mobile Optimization

Touch Controls

• Implement responsive touch areas
• Handle multi-touch properly
• Provide visual feedback for touch interactions

Responsive Design

• Scale game to fit different screen sizes
• Handle orientation changes gracefully
• Optimize UI for touch interaction

Power Management

• Implement frame rate throttling when appropriate
• Pause updates when app is backgrounded
• Optimize battery usage with efficient rendering