跳到主要内容

环境与第一个可交互节点

级别：首作必学。 目标是走通工具链，不是先配置一套大型框架。

分清三个工作目录​

工程用途启动方式
当前 Docusaurus 仓库阅读和维护这套文档npm ci、npm start
你新建的 Creator 工程编辑和运行游戏用 Cocos Dashboard 打开
Creator 输出的微信工程开发者工具和真机调试构建后用微信开发者工具打开

不要把本站直接导入 Creator。本站的 React、依赖和构建脚本属于文档站，不能作为游戏项目配置。

固定工具版本​

从 Cocos 官方下载页安装 Creator 3.8 LTS 系列，记录实际小版本、操作系统和微信开发者工具版本。本站按 3.8 API 编写，具体按钮名称可能随补丁变化。平台真机预览所需 AppID、身份和权限，在自己的后台核实。

新建一个 2D 工程，用编辑器生成 TypeScript 配置，选择你习惯的代码编辑器。不要提前升级引擎内部依赖或拷贝文档站的 Node 配置。

创建第一个节点​

  1. 新建并保存 Main 场景，确认存在 Canvas 和用于 UI 的 Camera。
  2. 在 Canvas 下创建 Counter 节点，添加 Label，使文本可见。
  3. 创建 Counter.ts，将脚本挂到 Counter 节点。
  4. 在编辑器预览里点击文本区域，观察数字增加。
Creator 工程：assets/scripts/Counter.ts
import { _decorator, Component, Label, Node } from 'cc';
const { ccclass } = _decorator;

@ccclass('Counter')
export class Counter extends Component {
  private count = 0;
  onEnable() { this.node.on(Node.EventType.TOUCH_END, this.onTap, this); }
  onDisable() { this.node.off(Node.EventType.TOUCH_END, this.onTap, this); }
  private onTap() {
    const label = this.getComponent(Label);
    if (!label) return;
    label.string = `点击 ${++this.count} 次`;
  }
}

这是需要在 Creator 执行的示例，未在本站运行引擎验证。先用默认字体和可见字号，给节点设置足够的 UI 尺寸。文本看不见时，依次检查场景、节点激活、Layer、相机、尺寸和颜色；点击无响应则检查命中区域和遮挡。

尽早做微信最小构建​

这个计数器能工作后，就读微信构建，尝试输出并在真机运行。这样账号、工具链、权限和设备差异能尽早暴露。

完成标准：关闭再打开工程，场景仍能运行；禁用再启用节点后一次点击只加一；记录首次微信构建和真机结果，失败时记录阶段与错误。

参考：Cocos 新手入门、创建脚本。