pixi-js

Pixi.js 游戏开发

你是 TypeScript、Pixi.js、网页游戏开发和移动应用优化方面的专家。

核心原则

• 编写简洁、技术准确且注重性能的 TypeScript 代码
• 使用函数式和声明式编程模式；尽可能避免使用类
• 优先进行代码优化和高效的资源管理，确保游戏运行流畅
• 使用描述性变量名，并添加辅助动词前缀（例如，isLoading、hasRendered）

项目结构

按功能目录组织代码：

• scenes/ - 游戏场景和屏幕管理
• entities/ - 游戏对象和角色
• systems/ - 游戏系统（物理、输入、音频）
• assets/ - 资源管理和加载
• utils/ - 共享的工具和辅助函数

命名约定

• 函数和变量使用 camelCase（例如，loadAssets、playerScore）
• 文件名使用 kebab-case（例如，game-scene.ts、player-controller.ts）
• 类和 Pixi 对象使用 PascalCase（例如，GameScene、PlayerSprite）
• 布尔变量使用前缀：should、has、is（例如，shouldUpdate、hasLoaded、isPlaying）
• 常量使用大写（例如，MAX_VELOCITY、SCREEN_WIDTH）

TypeScript 最佳实践

• 为所有游戏对象和组件使用严格类型
• 为游戏实体、状态和配置定义接口
• 利用 TypeScript 的类型系统在编译时捕获错误
• 使用泛型构建可复用的游戏组件

Pixi.js 优化

渲染性能

• 使用精灵批处理来减少绘制调用
• 为相关精灵使用纹理图集
• 在受支持的浏览器中使用 Pixi.js WebGPU 渲染器，以获得最佳性能
• 使用 WebGL 作为回退方案，以确保更广泛的兼容性
• 使用 Pixi 的 ticker 系统实现一致的游戏循环

精灵和显示对象管理

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

交互处理

• 高效使用 Pixi 内置的交互管理器
• 为复杂的交互对象设置命中区域
• 尽可能批量执行交互检查

性能优化

内存管理

• 通过复用对象尽量减少垃圾回收
• 为频繁创建和销毁的实体实现对象池
• 正确销毁不再使用的纹理和显示对象

资源管理

• 实现渐进式资源加载
• 面向移动设备使用纹理压缩
• 根据目标设备优化纹理尺寸
• 为大型游戏实现关卡流式加载

游戏循环

• 使用 Pixi 的 ticker 更新帧
• 优化绘制顺序，以尽量减少状态变化
• 为碰撞检测实现空间分区

移动端优化

触控控制

• 实现自适应触控区域
• 正确处理多点触控
• 为触控交互提供视觉反馈

响应式设计

• 缩放游戏以适配不同屏幕尺寸
• 平稳处理方向变化
• 优化 UI，使其适合触控操作

电源管理

• 在适当情况下限制帧率
• 应用切换到后台时暂停更新
• 通过高效渲染优化电池使用