主题
13 · Phaser ↔ Cocos 心智对照表
目标:一张表收束阶段二两种引擎的对应关系;明确「什么时候选谁」。
前置:12 · Cocos 同玩法迁移 · 10 · Phaser 验收
本篇几乎无新代码,适合复习与面试口述。
1. 总对照
| 维度 | Phaser 3(本系列) | Cocos Creator 3.x(本系列) |
|---|---|---|
| 工程入口 | Vite + new Phaser.Game(config) | Dashboard 项目 + .scene + 编辑器预览 |
| 语言 | TypeScript | TypeScript |
| 场景组织 | Scene 类,代码驱动 | 节点树 + 多组件;场景是资源 |
| 「页面切换」 | this.scene.start / restart | director.loadScene / 加载场景 |
| 生命周期 | preload / create / update | 组件 onLoad / start / update |
| 可见物体 | Image / Sprite + 纹理 key | 节点 + Sprite + SpriteFrame |
| 资源 | Boot generateTexture / loader | 资源管理器导入;Prefab |
| 物理 | Arcade(本系列) | Physics2D + Collider |
| 碰撞回调 | physics.add.overlap | Contact2DType.BEGIN_CONTACT |
| 输入 | input.keyboard cursors | input.on(KEY_DOWN/UP) |
| 定时器 | time.addEvent | schedule / scheduleOnce |
| 对象集合 | Group + get / killAndHide | Prefab instantiate + destroy(池化见阶段三) |
| UI 文本 | this.add.text | Label |
dt | update(_, deltaMs) | update(dtSeconds) |
| 坐标系常见默认 | 左上为原点 | 设计分辨率中心为原点(可改) |
2. 前端迁移直觉
| 前端 | Phaser | Cocos |
|---|---|---|
| SPA + 路由 | 多 Scene | 多 Scene 资源 |
| 组件树 | 弱(偏代码对象) | 强(节点树) |
| 可视化搭建 | 弱 | 强(编辑器) |
| npm 生态嵌 H5 | 很顺 | 需导出/构建流水线(本系列未写) |
3. 何时选谁(本系列结论)
| 目标 | 更合适 |
|---|---|
| 网页嵌入、H5 营销、继续 Vite 纯代码 | Phaser |
| 微信/抖音小游戏产线、策划改关卡、团队用编辑器 | Cocos Creator |
| 先验证玩法、一天出原型 | 两者都行;你已有前端栈时 先 Phaser 更快 |
| 独立 Steam / 非 Web | 本系列不覆盖(Godot 等) |
一句话:玩法与架构能力两边通用;选引擎看分发平台与团队工具,不看「谁更高级」。
4. 阶段二你已经证明的事
- 同一套街机规格,可在 代码引擎 与 编辑器引擎 各落地一版。
- Game Loop、输入状态、冷却、碰撞、重启——与阶段一原生 Canvas 同构。
- 差异主要在 API 外形与工作流,不是另一门「游戏数学」。
验收清单
- [ ] 不看文也能说出至少 6 组 Phaser↔Cocos 对应
- [ ] 能向他人解释为何本系列先 Phaser 后 Cocos
- [ ] 知道坐标系与
dt单位是高频踩坑点
