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