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