🚀 Cocos Creator 新手入门指南

#一、Cocos Creator 是什么

Cocos Creator 是一款专注于 2D 和 3D 游戏开发的引擎，由 Cocos 团队开发。它的核心理念是组件化开发——把游戏中的每个功能拆成独立的组件，像搭积木一样组合起来。

主要特点：

• 完全免费，支持发布到 Web、iOS、Android、桌面等多平台
• 使用 TypeScript 编写脚本，对前端开发者非常友好
• 编辑器可视化操作，所见即所得
• 内置资源管理、动画系统、UI 系统、物理引擎等

适用场景：2D 游戏、小游戏、H5 游戏、UI 应用、简单的 3D 游戏

#二、编辑器界面速览

打开 Cocos Creator 后，主要看到这几个面板：

面板	位置	用途
层级管理器	左上	显示场景中所有节点的父子关系
场景编辑器	中间	可视化编辑场景，拖拽、放置节点
属性检查器	右侧	查看和修改选中节点/组件的属性
资源管理器	左下	管理项目中的所有资源文件
控制台	下方	显示日志、报错信息

快捷键：

• Cmd/Ctrl + S：保存场景
• Cmd/Ctrl + Z：撤销
• Cmd/Ctrl + Shift + Z：重做
• Delete：删除选中节点
• Cmd/Ctrl + D：复制选中节点
• Cmd/Ctrl + Shift + F：在场景中搜索节点

#三、核心概念

#3.1 场景（Scene）

场景就是游戏的一个画面或一个关卡。每个项目至少有一个场景。

• 一个场景 = 一棵节点树
• 游戏运行时，通过 director.loadScene() 切换场景
• 场景文件以 .scene 格式存储在 assets 目录下

#3.2 节点（Node）

节点是场景中的基本单元，所有东西都是节点。

节点可以做什么：

• 放置在场景中（如角色、背景、按钮）
• 作为其他节点的父节点（形成父子层级）
• 挂载组件（赋予节点具体功能）

节点属性：

属性	说明
position	位置（x, y, z）
rotation	旋转角度
scale	缩放比例
anchor	锚点（定位参考点）
opacity	不透明度（0-255）
active	是否激活（禁用后整个节点及其子节点不工作）

#3.3 组件（Component）

组件是挂在节点上的功能模块。一个节点可以挂多个组件。

常见内置组件：

组件	用途	常见使用场景
Sprite	显示图片	角色、背景、UI 图标
Label	显示文字	分数、对话、提示文字
Button	按钮	菜单按钮、交互按钮
Layout	自动布局	列表、网格排列
SpriteRenderer	3D 精灵渲染	3D 场景中的平面图片
MeshRenderer	3D 网格渲染	3D 模型显示
Camera	摄像机	视角控制
ParticleSystem2D	2D 粒子	火焰、烟雾、特效
ParticleSystem3D	3D 粒子	3D 特效
AudioSource	音频播放	背景音乐、音效
Collider2D	2D 碰撞体	碰撞检测
PhysicsSystem2D	2D 物理系统	重力、碰撞响应

#3.4 资源（Asset）

项目中的所有文件都是资源，存放在 assets 目录下：

资源类型	格式	说明
脚本	.ts	TypeScript 代码
场景	.scene	游戏场景
预制体	.prefab	可复用的节点模板
纹理	.png / .jpg	图片资源
音频	.mp3 / .wav	音效和音乐
字体	.ttf / .fnt	文字字体
动画	.anim	动画片段
动画控制器	.anim	动画状态机

#四、新建项目快速上手

#4.1 创建项目

1. 打开 Cocos Dashboard
2. 点击「新建」
3. 选择模板（推荐「Empty(2D)」或「Hello World」）
4. 选择存储路径，点击创建

#4.2 添加一个精灵（图片显示）

方法 1：直接拖拽

1. 把图片资源拖到场景编辑器中
2. 引擎自动创建一个带有 Sprite 组件的节点

方法 2：手动创建

1. 在层级管理器右键 → 创建 → 2D 对象 → Sprite
2. 在属性检查器中，把图片拖到 Sprite Frame 属性上

#4.3 添加文字

1. 在层级管理器右键 → 创建 → 2D 对象 → Label
2. 在属性检查器中修改 String 属性输入文字
3. 设置字体大小、颜色、对齐方式

#4.4 添加按钮

1. 在层级管理器右键 → 创建 → UI → Button
2. 按钮节点包含一个子节点 Label（按钮文字）
3. 在属性检查器中找到 Button 组件的 Click Events，点击 + 添加点击事件

#五、TypeScript 脚本基础

#5.1 创建脚本

1. 在资源管理器右键 → 创建 → TypeScript → NewComponent
2. 输入脚本名称（如 PlayerController）
3. 双击打开编辑（默认用 VS Code）

#5.2 脚本结构

复制import { _decorator, Component, Node } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('PlayerController')
export class PlayerController extends Component {

    // 在属性面板中暴露的变量
    @property
    speed: number = 100;

    // 节点加载完成时调用
    onLoad() {
        console.log('PlayerController 加载完成');
    }

    // 游戏运行时每帧调用
    update(dt: number) {
        // 每帧移动
    }
}

#5.3 挂载脚本到节点

1. 把脚本文件从资源管理器拖到场景中的节点上
2. 或者在节点的属性检查器底部点「添加组件」，搜索脚本名称

#5.4 获取其他节点/组件

复制// 获取同节点上的其他组件
const sprite = this.getComponent(Sprite);

// 通过名字获取子节点
const coin = this.node.getChildByName('Coin');

// 通过路径获取深层子节点
const hp = this.node.getChildByPath('UI/HP Bar');

// 通过类型获取子节点上的组件
const label = this.node.getChildByName('Score').getComponent(Label);

// 获取所有子节点
this.node.children.forEach(child => {
    console.log(child.name);
});

#5.5 控制节点属性

复制// 修改位置
this.node.setPosition(100, 200, 0);

// 相对移动
const pos = this.node.position;
this.node.setPosition(pos.x + 10, pos.y, pos.z);

// 修改缩放
this.node.setScale(2, 2, 1);

// 修改旋转
this.node.setRotation(0, 0, 45);  // Z 轴旋转 45 度

// 修改透明度
this.node.opacity = 128;  // 半透明

// 显示/隐藏节点
this.node.active = false;  // 隐藏
this.node.active = true;   // 显示

#六、常用功能模块

#6.1 动画系统

Cocos Creator 内置了强大的动画编辑器。

创建动画：

1. 选中节点 → 属性检查器 → 点击 Animation 组件的 Add Animation
2. 打开动画编辑器（窗口 → 动画 → Animation）
3. 点击录制按钮，在不同时间点修改属性，自动生成关键帧

代码播放动画：

复制import { Animation } from 'cc';

// 播放动画
this.getComponent(Animation).play('idle');

// 监听动画完成
this.getComponent(Animation).on(Animation.EventType.FINISHED, () => {
    console.log('动画播放完毕');
});

#6.2 事件系统

Cocos Creator 使用事件机制实现节点间的通信。

发送事件：

复制import { EventTarget } from 'cc';

// 自定义事件中心
const gameEventTarget = new EventTarget();

// 发送事件
gameEventTarget.emit('player-die', { score: 100 });

监听事件：

复制// 监听自定义事件
gameEventTarget.on('player-die', (data) => {
    console.log('玩家死亡，分数：', data.score);
});

// 监听节点触摸事件
this.node.on(Node.EventType.TOUCH_START, (event) => {
    console.log('点击位置：', event.getLocation());
});

常用触摸事件：

事件类型	说明
TOUCH_START	手指按下
TOUCH_MOVE	手指移动
TOUCH_END	手指抬起
TOUCH_CANCEL	触摸被取消

#6.3 定时器

复制// 延迟执行
this.scheduleOnce(() => {
    console.log('1 秒后执行');
}, 1);

// 重复执行
this.schedule(() => {
    console.log('每 0.5 秒执行一次');
}, 0.5);

// 执行 N 次
this.schedule(() => {
    console.log('执行 3 次');
}, 1, 3);

// 取消所有定时器
this.unscheduleAllCallbacks();

#6.4 预制体（Prefab）

预制体是可复用的节点模板。比如你可以创建一个「子弹」预制体，然后在游戏运行时动态生成多个子弹实例。

创建预制体：

1. 在场景中设计好节点
2. 把节点从层级管理器拖到资源管理器
3. 自动保存为 .prefab 文件

动态实例化：

复制import { instantiate, Prefab } from 'cc';

@property(Prefab)
bulletPrefab: Prefab = null;  // 在属性面板中拖入预制体

fire() {
    const bullet = instantiate(this.bulletPrefab);
    bullet.setPosition(this.node.position);
    this.node.parent.addChild(bullet);
}

#6.5 UI 系统

Cocos Creator 的 UI 基于 Canvas 和 Widget（对齐）组件。

基本概念：

• Canvas：UI 的根节点，定义设计分辨率和适配策略
• Widget：控制节点相对于父节点的对齐方式（上、下、左、右、居中）
• Layout：自动排列子节点（水平、垂直、网格）

添加 UI 元素：

1. 创建 Canvas 节点（右键 → 创建 → UI → Canvas）
2. 在 Canvas 下创建 UI 元素（按钮、文字、图片等）
3. 用 Widget 组件设置对齐方式

常用 UI 组件：

组件	用途
Button	可点击的按钮
Toggle	开关/复选框
Slider	滑动条
EditBox	输入框
ScrollView	可滚动的容器
RichText	富文本（支持多种样式）
ProgressBar	进度条

#6.6 资源动态加载

复制import { resources, SpriteFrame, Sprite } from 'cc';

// 加载图片资源
resources.load('textures/hero', SpriteFrame, (err, asset) => {
    if (!err) {
        this.getComponent(Sprite).spriteFrame = asset;
    }
});

// 加载预制体
import { Prefab } from 'cc';
resources.load('prefabs/enemy', Prefab, (err, asset) => {
    if (!err) {
        const node = instantiate(asset);
        this.node.addChild(node);
    }
});

#七、调试技巧

#7.1 控制台日志

复制console.log('普通日志');
console.warn('警告信息');
console.error('错误信息');

在编辑器下方的「控制台」面板查看输出。

#7.2 场景中的调试绘制

复制import { Graphics } from 'cc';

// 在节点上添加 Graphics 组件，然后绘制
const g = this.getComponent(Graphics);
g.clear();
g.strokeColor = new Color(255, 0, 0, 255);
g.strokeRect(0, 0, 100, 100);  // 画一个红色矩形

#7.3 常见报错及解决

错误信息	原因	解决方法
Cannot read property of null	访问了空引用	检查节点/组件是否正确获取
Node is destroyed	访问了已销毁的节点	在 onDestroy 后不再访问该节点
Property not found	组件属性未定义	检查 @property 装饰器是否正确
Asset not found	资源路径错误	检查资源路径和拼写

#八、项目结构建议

复制assets/
  ├── scenes/           # 场景文件
  ├── scripts/           # TypeScript 脚本
  │   ├── core/          # 核心逻辑（GameManager 等）
  │   ├── player/        # 玩家相关
  │   ├── enemy/         # 敌人相关
  │   ├── ui/            # UI 界面
  │   └── utils/         # 工具函数
  ├── prefabs/           # 预制体
  │   ├── bullets/       # 子弹
  │   ├── effects/       # 特效
  │   └── ui/            # UI 预制体
  ├── textures/          # 图片资源
  │   ├── characters/    # 角色图
  │   ├── tiles/         # 地图瓦片
  │   └── ui/            # UI 图片
  ├── audio/             # 音频资源
  │   ├── bgm/           # 背景音乐
  │   └── sfx/           # 音效
  └── animations/        # 动画资源

#九、新手常见问题

#Q：Cocos Creator 和 Unity 有什么区别？

对比项	Cocos Creator	Unity
价格	完全免费	收费（收入超阈值）
语言	TypeScript	C#
2D 能力	非常强	强（但不如专注 2D）
3D 能力	支持但相对弱	非常强
小游戏支持	原生支持	需要额外插件
社区规模	国内较大	全球最大

#Q：我应该学 2D 还是 3D？

• 新手建议从 2D 开始：概念更简单，学习曲线更平缓
• 如果目标是做 3D 游戏，可以先用 2D 熟悉引擎，再转 3D
• Cocos Creator 的 2D 能力是它的强项

#Q：怎么发布游戏？

1. 菜单 → 项目 → 构建发布
2. 选择平台（Web Mobile / Android / iOS 等）
3. 配置参数（包名、图标等）
4. 点击构建 → 编译 → 运行

#Q：遇到问题怎么找帮助？

• 官方文档：https://docs.cocos.com/creator/manual/zh/
• 官方论坛：https://forum.cocos.org/
• GitHub：https://github.com/cocos/cocos-engine
• Cocos 技术交流群：在论坛可以找到

#十、学习路线建议

复制第 1 周：熟悉编辑器
  ├── 了解各面板功能
  ├── 学会创建节点、添加组件
  └── 尝试修改节点属性

第 2 周：学习脚本基础
  ├── TypeScript 基础语法
  ├── 组件的生命周期
  └── 控制节点移动、显示隐藏

第 3 周：常用功能
  ├── 事件系统（触摸、按钮点击）
  ├── 动画系统
  └── UI 制作

第 4 周：综合实践
  ├── 做一个小游戏（如打地鼠、消消乐）
  ├── 学习预制体和动态加载
  └── 尝试发布到 Web

#十一、总结

Cocos Creator 的核心就是「节点 + 组件 + 脚本」：

• 节点是场景中的实体
• 组件赋予节点功能
• 脚本自定义游戏逻辑

记住这几个关键点，你就已经入门了：

• 所有东西都是节点，节点可以有子节点
• 功能通过组件实现，一个节点可以挂多个组件
• 脚本也是组件，挂在节点上运行
• 生命周期回调（onLoad、start、update）控制执行时机
• 预制体是可复用的节点模板