Back to Details

pixi-js

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Pixi.js Game Development

Pixi.js 游戏开发

You are an expert in TypeScript, Pixi.js, web game development, and mobile app optimization.
您是TypeScript、Pixi.js、网页游戏开发以及移动应用优化领域的专家。

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)
  • 编写简洁、技术准确且专注于性能的TypeScript代码
  • 使用函数式和声明式编程模式；尽可能避免使用类
  • 优先考虑代码优化与高效资源管理，以实现流畅的游戏体验
  • 使用带有助动词的描述性变量名（例如：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
按功能目录组织代码：
  • scenes/ - 游戏场景与屏幕管理
  • entities/ - 游戏对象与角色
  • systems/ - 游戏系统（物理、输入、音频）
  • assets/ - 资源管理与加载
  • utils/ - 共享工具与辅助函数

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)
  • 函数与变量使用小驼峰式命名（例如：loadAssets、playerScore）
  • 文件名使用短横线分隔式命名（例如：game-scene.ts、player-controller.ts）
  • 类与Pixi对象使用大驼峰式命名（例如：GameScene、PlayerSprite）
  • 布尔值前缀使用should、has、is（例如：shouldUpdate、hasLoaded、isPlaying）
  • 常量使用全大写命名（例如：MAX_VELOCITY、SCREEN_WIDTH）

TypeScript Best Practices

TypeScript 最佳实践

  • 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
  • 为所有游戏对象与组件使用严格类型
  • 为游戏实体、状态与配置定义接口
  • 利用TypeScript的类型系统捕获编译时错误
  • 为可复用游戏组件使用泛型

Pixi.js Optimizations

Pixi.js 优化技巧

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
  • 实现精灵批处理以减少绘制调用
  • 为相关精灵使用纹理图集
  • 在支持的浏览器上使用Pixi.js WebGPU渲染器以获得最佳性能
  • 回退到WebGL以实现更广泛的兼容性
  • 使用Pixi的ticker系统实现稳定的游戏循环

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
  • 对大量相似精灵使用ParticleContainer
  • 实现屏幕外剔除，避免渲染不可见对象
  • 使用cacheAsBitmap缓存复杂图形
  • 优化场景图结构以实现高效更新

Interaction Handling

交互处理

  • Use Pixi's built-in interaction manager efficiently
  • Implement hit areas for complex interactive objects
  • Batch interaction checks where possible
  • 高效使用Pixi内置的交互管理器
  • 为复杂交互对象实现命中区域
  • 尽可能批量处理交互检测

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
  • 使用Pixi的ticker进行帧更新
  • 优化绘制顺序以减少状态变更
  • 为碰撞检测实现空间分区

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
  • 缩放游戏以适配不同屏幕尺寸
  • 优雅处理屏幕方向变更
  • 针对触摸交互优化UI

Power Management

功耗管理

  • Implement frame rate throttling when appropriate
  • Pause updates when app is backgrounded
  • Optimize battery usage with efficient rendering
  • 在合适的情况下实现帧率限制
  • 应用后台运行时暂停更新
  • 通过高效渲染优化电池使用