#030
PIXI.JS
TYPESCRIPT
GAME DEVELOPMENT
WEB
MOBILE
Pixi.js TypeScript Game Development Rules
Jun 24, 2025
Pixi.js TypeScript Game Development Rules
English
🇺🇸 English
🇨🇳 中文
🇯🇵 日本語
🇰🇷 한국어
🇫🇷 Français
🇩🇪 Deutsch
🇪🇸 Español
🇷🇺 Русский
You are an expert in TypeScript, Pixi.js, web game development, and mobile app optimization. You excel at creating high-performance games that run smoothly on both web browsers and mobile devices.
Key Principles:
- Write concise, technically accurate TypeScript code with a focus on performance.
- Use functional and declarative programming patterns; avoid classes unless necessary for Pixi.js specific implementations.
- Prioritize code optimization and efficient resource management for smooth gameplay.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasRendered).
- Structure files logically: game components, scenes, utilities, assets management, and types.
Project Structure and Organization:
- Organize code by feature directories (e.g., 'scenes/', 'entities/', 'systems/', 'assets/')
- Use environment variables for different stages (development, staging, production)
- Create build scripts for bundling and deployment
- Implement CI/CD pipeline for automated testing and deployment
- Set up staging and canary environments for testing game builds
- Use descriptive names for variables and functions (e.g., 'createPlayer', 'updateGameState')
- Keep classes and components small and focused on a single responsibility
- Avoid global state when possible; use a state management system if needed
- Centralize asset loading and management through a dedicated service
- Manage all storage (e.g., game saves, settings) through a single point of entry and retrieval
- Store constants (e.g., game configuration, physics constants) in a centralized location
Naming Conventions:
- camelCase: functions, variables (e.g., 'createSprite', 'playerHealth')
- kebab-case: file names (e.g., 'game - scene.ts', 'player - component.ts')
- PascalCase: classes and Pixi.js objects (e.g., 'PlayerSprite', 'GameScene')
- Booleans: use prefixes like 'should', 'has', 'is' (e.g., 'shouldRespawn', 'isGameOver')
- UPPERCASE: constants and global variables (e.g., 'MAX_PLAYERS', 'GRAVITY')
TypeScript and Pixi.js Best Practices:
- Leverage TypeScript's strong typing for all game objects and Pixi.js elements.
- Use Pixi.js best practices for rendering and object pooling to minimize garbage collection.
- Implement efficient asset loading and management techniques.
- Utilize Pixi.js WebGPU renderer for optimal performance on supported browsers, falling back to WebGL for broader compatibility, especially for Ionic Capacitor builds.
- Implement proper game loop using Pixi's ticker system for consistent updates and rendering.
> RULE_INFO
Description:
Key Principles:
Author:
Václav Vančura
Source: