11 · Cocos Creator 入门：编辑器与 TS 组件

目标：装好 Cocos Creator 3.x，建空 2D 项目；用编辑器搭节点并挂 TS 组件；对照 Phaser Scene 生命周期。
前置：10 · Phaser 一关验收
官方：Cocos Creator 手册 · 脚本指南
本系列按 Creator 3.8.x 心智 写（3.x 通用：@ccclass / Node / Component）。

1. 为什么还要碰编辑器

Phaser 是「纯代码 SPA」。Cocos 是国内小游戏常见产线：层级树 + 组件 + 预制体，接近「Unity 味」，也接近前端「组件树 + 挂逻辑」。

本篇综合两条路：

1. 编辑器：点哪里、建什么节点
2. TS：生命周期与改 position 的最小脚本

不做微信导出（阶段四）。

2. 编辑器操作：建项目与分辨率

1. 打开 Cocos Dashboard，安装 Creator 3.8.x（或同代 3.x）。
2. 新建项目 → 选 空项目 / 2D 模板。
3. 菜单 项目 → 项目设置 → 项目数据：设计分辨率设为 480 × 640（竖版街机，对齐 Phaser）。
4. 打开默认场景（如 scene.scene），确认有 Canvas（或 2D 相机所在节点树）。3.x 不同模板节点名略有差异，核心是：有相机、能看见 2D 内容。

3. 编辑器操作：节点与脚本

1. 在层级管理器里，于场景根下新建空节点，命名 Player。
2. 给 Player 加 UITransform（若无）与 Sprite：可用内置白色精灵，把颜色改成黄色，内容尺寸约 40×24。
   （无现成图时：用 Graphics 或简单 Quad/Sprite 色块即可，与 Phaser 色块同哲学。）
3. 资源管理器 → 新建 → TypeScript，命名 PlayerMover.ts，保存到 assets/scripts/。
4. 选中 Player → 属性检查器 → 添加组件 → 自定义脚本 PlayerMover。
5. 点编辑器上方 预览（浏览器或编辑器内预览）。

4. 对应 TS：最小组件

assets/scripts/PlayerMover.ts：

import { _decorator, Component, Vec3 } from 'cc'
const { ccclass, property } = _decorator

@ccclass('PlayerMover')
export class PlayerMover extends Component {
  @property
  speed = 120

  private _tmp = new Vec3()

  onLoad() {
    // 类似 Phaser init / 构造后首次
  }

  start() {
    // 类似 Phaser create 末尾：依赖都就绪
  }

  update(dt: number) {
    // dt：秒。对照 Phaser update 的 delta/1000、阶段一 fixedDt
    this.node.getPosition(this._tmp)
    this._tmp.x += this.speed * dt
    if (this._tmp.x > 200) this._tmp.x = -200
    this.node.setPosition(this._tmp)
  }
}

预览中黄色块应水平来回扫（或一直向右再重置）——证明：编辑器挂载 + TS update 改节点 闭环通了。

5. 生命周期对照

Phaser Scene	Cocos Component	前端直觉
init	onLoad	构造后早期
create	start	mounted、依赖就绪
update(time, deltaMs)	update(dtSeconds)	每帧
shutdown	onDestroy	unmounted

Phaser	Cocos
this.add.sprite	编辑器建节点 或 instantiate(prefab)
Scene 是玩法容器	节点树是容器，脚本挂在节点上
Game config 入口	场景文件 + 构建运行

节点树 ≈ DOM / Vue 组件树；Component ≈ 挂在节点上的行为脚本。

6. 常见坑

坑	处理
脚本改了预览没变	等编译完成；看控制台报错
看不见物体	检查是否在相机可见层；坐标是否在设计分辨率内
dt 当毫秒用	Cocos update(dt) 是秒
3.x / 2.x API 混用	本系列只跟 3.x 手册

验收清单

• [ ] Creator 3.x 能打开并预览空 2D 场景
• [ ] 设计分辨率 480×640
• [ ] Player 节点挂上自定义 TS 组件
• [ ] 预览中物体位置随 update 变化
• [ ] 能口述 Phaser Scene 钩子与 Cocos 组件钩子的对应

下一篇

→ 12 · Cocos 对照：同玩法最小迁移