Loading...
Loading...
Compare original and translation side by side
Framework selection and browser-specific principles.
框架选择与浏览器专属开发原则
What type of game?
│
├── 2D Game
│ ├── Full game engine features? → Phaser
│ └── Raw rendering power? → PixiJS
│
├── 3D Game
│ ├── Full engine (physics, XR)? → Babylon.js
│ └── Rendering focused? → Three.js
│
└── Hybrid / Canvas
└── Custom → Raw Canvas/WebGLWhat type of game?
│
├── 2D Game
│ ├── Full game engine features? → Phaser
│ └── Raw rendering power? → PixiJS
│
├── 3D Game
│ ├── Full engine (physics, XR)? → Babylon.js
│ └── Rendering focused? → Three.js
│
└── Hybrid / Canvas
└── Custom → Raw Canvas/WebGL| Framework | Type | Best For |
|---|---|---|
| Phaser 4 | 2D | Full game features |
| PixiJS 8 | 2D | Rendering, UI |
| Three.js | 3D | Visualizations, lightweight |
| Babylon.js 7 | 3D | Full engine, XR |
| 框架 | 类型 | 适用场景 |
|---|---|---|
| Phaser 4 | 2D | 全功能游戏开发 |
| PixiJS 8 | 2D | 渲染、UI开发 |
| Three.js | 3D | 可视化、轻量级项目 |
| Babylon.js 7 | 3D | 全功能引擎、XR开发 |
| Browser | Support |
|---|---|
| Chrome | ✅ Since v113 |
| Edge | ✅ Since v113 |
| Firefox | ✅ Since v131 |
| Safari | ✅ Since 18.0 |
| Total | ~73% global |
| 浏览器 | 支持状态 |
|---|---|
| Chrome | ✅ 自v113版本起支持 |
| Edge | ✅ 自v113版本起支持 |
| Firefox | ✅ 自v131版本起支持 |
| Safari | ✅ 自18.0版本起支持 |
| 全球支持占比 | ~73% |
navigator.gpunavigator.gpu| Constraint | Strategy |
|---|---|
| No local file access | Asset bundling, CDN |
| Tab throttling | Pause when hidden |
| Mobile data limits | Compress assets |
| Audio autoplay | Require user interaction |
| 限制条件 | 应对策略 |
|---|---|
| 无本地文件访问权限 | 资源打包、使用CDN |
| 标签页节流 | 标签隐藏时暂停游戏 |
| 移动数据限制 | 压缩资源 |
| 音频自动播放限制 | 需用户交互触发 |
| Type | Format |
|---|---|
| Textures | KTX2 + Basis Universal |
| Audio | WebM/Opus (fallback: MP3) |
| 3D Models | glTF + Draco/Meshopt |
| 资源类型 | 推荐格式 |
|---|---|
| 纹理 | KTX2 + Basis Universal |
| 音频 | WebM/Opus（降级方案：MP3） |
| 3D模型 | glTF + Draco/Meshopt |
| Phase | Load |
|---|---|
| Startup | Core assets, <2MB |
| Gameplay | Stream on demand |
| Background | Prefetch next level |
| 阶段 | 加载内容 |
|---|---|
| 启动阶段 | 核心资源，大小<2MB |
| 游戏运行阶段 | 按需流式加载 |
| 后台阶段 | 预取下一关卡资源 |
| ❌ Don't | ✅ Do |
|---|---|
| Load all assets upfront | Progressive loading |
| Ignore tab visibility | Pause when hidden |
| Block on audio load | Lazy load audio |
| Skip compression | Compress everything |
| Assume fast connection | Handle slow networks |
Remember: Browser is the most accessible platform. Respect its constraints.
| ❌ 错误做法 | ✅ 正确做法 |
|---|---|
| 一次性加载所有资源 | 渐进式加载 |
| 忽略标签页可见性 | 标签隐藏时暂停游戏 |
| 阻塞音频加载 | 懒加载音频 |
| 跳过资源压缩 | 所有资源均需压缩 |
| 假设网络连接速度快 | 处理慢网络场景 |
记住： 浏览器是最具普适性的平台，要尊重它的限制条件。