Web 浏览器游戏开发
本技能聚焦浏览器专属的框架选型与开发原则。更详细的选型信息可参见 game-development/engine-selection。
一、框架选型
决策树：
- 2D 游戏
- 需要完整游戏引擎功能 → Phaser 4
- 快速原型 / Game Jam → Kaplay
- 追求原始渲染性能 → PixiJS 8
- 极简 / 无依赖 → 原生 Canvas / WebGL
- 3D 游戏
- 需要完整引擎（物理、XR）→ Babylon.js
- 以渲染为主 → Three.js
- 混合模式（DOM UI + canvas 片段）
- 自定义外壳 + 访客视口（在 region/modal 内嵌 Canvas/Kaplay/Phaser/Pixi）
- 叙事优先
- Ink（inkjs）或 Twine 导出 + DOM 宿主
框架对比：
- 原生 Canvas / WebGL：2D / 底层，适合小范围、完全控制
- Kaplay：2D 工具包，适合快速原型
- Phaser 4：2D 引擎，适合完整游戏功能
- PixiJS 8：2D 渲染器，适合渲染与自定义系统
- Three.js：3D 渲染器，适合可视化、轻量 3D
- Babylon.js：3D 引擎，适合完整引擎、XR
二、混合外壳（Hybrid shell + guest）
当界面框架是 HTML（菜单、物品栏、文本、仪表盘），但需要 canvas 承载游戏片段时使用：
- 将访客挂载到容器中，并传入上下文。
- 在访客内运行本地游戏循环。
- 返回结果（分数、通过/失败）；销毁访客（按需清理 RAF、监听器、GL 上下文）。
- 除非产品本身是全屏游戏，否则不要让访客掌控全局应用路由。
三、WebGPU 采用
浏览器支持（2025）：
- Chrome：自 v113 起支持
- Edge：自 v113 起支持
- Firefox：自 v131 起支持
- Safari：自 18.0 起支持
- 总计：全球约 73%
决策：
- 新的 GPU 密集型项目：使用 WebGPU 并提供 WebGL 回退
- 广泛兼容 / 简单 2D：从 WebGL 或 Canvas 2D 起步
- 特性检测：检查 navigator.gpu
四、性能原则
浏览器约束与策略：
- 无本地文件访问 → 资源打包、CDN
- 标签页节流 → 页面隐藏时暂停（visibilitychange）
- 移动端流量限制 → 压缩资源
- 音频自动播放限制 → 需要用户交互
优化优先级：
- 资源压缩 - KTX2、Draco、WebP
- 懒加载 - 按需加载
- 对象池 - 避免 GC
- 绘制调用批处理 - 减少状态切换
- Web Workers - 卸载重计算
五、资源策略
格式：
- 纹理：KTX2 + Basis Universal（简单 2D 可用 WebP/PNG）
- 音频：WebM/Opus（回退：MP3）
- 3D 模型：glTF + Draco/Meshopt
加载阶段：
- 启动：核心资源，<2MB
- 游戏过程：按需流式加载
- 后台：预取下一关
六、PWA 游戏化
收益：离线游玩、可安装、全屏、可选推送。 要求：service worker、web app manifest、HTTPS。
七、音频处理
- 在首次点击/触摸时创建/恢复 AudioContext
- 优先使用 Web Audio API；复用音源；预加载常用音效
- 尽可能用 WebM/Opus 压缩
八、反模式
不要 / 应当：
- 不要一次性加载所有资源 → 渐进式加载
- 不要忽略标签页可见性 → 隐藏时暂停
- 不要阻塞等待音频加载 → 懒加载音频
- 不要跳过压缩 → 压缩一切
- 不要假设网络很快 → 处理慢网络
- 不要让 canvas 引擎在屏幕外继续运行 → 销毁访客
请记住：浏览器是最易触达的平台，要尊重它的约束。
何时使用
在构建 HTML5/WebGL/WebGPU 游戏、选择浏览器运行时，或接入混合 DOM+canvas 访客时使用。
限制
仅在任务明确符合上述范围时使用本技能。不要将输出视为环境特定验证、测试或专家评审的替代。若缺少必要的输入、权限、安全边界或成功标准，请停止并请求澄清。