| name | web-games |
| description | Web浏览器游戏开发 - 框架选择与浏览器特定原则,包括Phaser、PixiJS、WebGPU、优化、PWA。 |
| read_when | ["开发Web/H5游戏时","选择游戏引擎时","优化Web游戏性能时"] |
Web Browser Game Development
框架选择
决策树
游戏类型?
│
├── 2D游戏
│ ├── 需要完整游戏引擎功能? → Phaser
│ └── 追求原始渲染性能? → PixiJS
│
├── 3D游戏
│ ├── 完整引擎(物理、XR)? → Babylon.js
│ └── 专注于渲染? → Three.js
│
└── 混合/Canvas
└── 自定义方案 → 原生 Canvas/WebGL
框架对比(2025年)
| 框架 | 类型 | 最佳适用场景 |
|---|
| Phaser 4 | 2D | 完整游戏功能 |
| PixiJS 8 | 2D | 渲染、UI |
| Three.js | 3D | 可视化、轻量级 |
| Babylon.js 7 | 3D | 完整引擎、XR |
性能原则
浏览器限制
| 限制 | 应对策略 |
|---|
| 无法访问本地文件 | 资源打包、CDN |
| 标签页节流 | 隐藏时暂停 |
| 移动数据限制 | 压缩资源 |
| 音频自动播放 | 需要用户交互 |
优化优先级
- 资源压缩 - KTX2、Draco、WebP
- 懒加载 - 按需加载
- 对象池 - 避免垃圾回收
- 绘制调用批处理 - 减少状态变更
- Web Workers - 卸载重计算
PWA 游戏
优势
要求
- Service Worker 缓存
- Web 应用清单
- HTTPS
记住: 浏览器是最易访问的平台。尊重它的限制。