pixi-js

mindrally

•

6155 months ago

Source Raw

Expert guidance for Pixi.js game development with TypeScript, focusing on high-performance web and mobile games

Quick Install

npxskills add mindrally/skills--skill pixi-js

Instructions

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

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360