从0开始的游戏编程——Cocos Creator开发

快速入门

组件化开发模式

传统开发模式痛点

开发逻辑：以代码驱动数据/资源实现功能。
核心问题：代码与数据高耦合，导致复用性差，功能组件难以重复使用。
协作障碍：开发人员与设计人员工作流程不统一，协调成本高。

Cocos Creator组件化开发的优势

开发范式：数据节点优先，通过为节点添加组件赋予功能。
组件复用：功能模块化，可跨项目重复使用。
开发统一：标准化开发流程，降低团队协作成本。
分工明确：优化开发人员与设计人员协作流程。

安装Cocos Creator

自己去官网安装即可

Hello World初体验

直接看官方文档即可

Cocos Creator项目目录结构

项目目录生成时机：通过Cocos Creator新建项目后自动生成。
项目目录标识：以项目名称命名的独立文件夹（示例中为new project2）。
关键验证文件 ：project.json与assets目录共同构成项目合法性标识。

目录/文件	核心功能	管理建议	引擎交互机制
`assets`	资源存储核心目录，存放游戏本地资源、脚本及第三方库	所有需在编辑器中显示/编辑的资源必须放入此目录	通过Meta文件建立资源索引，支持资源管理器可视化操作
`library`	资源编译缓存库，存储引擎处理后的运行时文件	无需手动编辑，丢失可通过`assets`重新生成	自动处理`assets`中资源，生成优化后的运行时版本
`local`	存储编辑器个性化配置，如窗口布局、面板位置	布局混乱可通过"恢复默认布局"重置	记录用户界面偏好，下次启动后自动应用
`packages`	项目级插件管理目录，存放自定义扩展组件	卸载插件需删除对应子文件夹	支持项目专属插件隔离，不影响全局设置
`settings`	项目配置中枢，包含包名、场景设置、平台参数	通常无需手动修改，通过编辑器界面配置	存储构建发布、预览等关键项目参数
`temp`	本地缓存目录，存放临时文件与性能优化数据	可在关闭引擎后安全删除	引擎自动管理的缓存机制，提升操作流畅度
`project.json`	项目元数据文件，包含引擎版本等核心信息	禁止删除，是项目合法性标志	标识项目类型（如Cocos 2D HTML5引擎），用于编辑器识别
Meta文件	资源索引配置文件，包含UUID与版本信息	严禁手动编辑，需随资源一同提交版本控制	引擎通过UUID唯一标识资源，实现高效资源管理

资源文件夹（assets）

assets 将会用来放置游戏中所有的本地资源、脚本和第三方库文件。只有在 assets 目录下的内容才能显示在资源管理器中。assets 中的每个文件在导入项目后都会生成一个相同名字的 .meta 文件，用于存储对应的资源配置和索引信息。.meta 文件需要一并提交到版本控制系统。

一些第三方工具生成的工程或设计原文件，如 TexturePacker 的 .tps 文件，或 Photoshop 的 .psd 文件，可以选择放在 assets 里面来管理。

资源库（library）

library 又称导入资源目录，是将 assets 中的资源导入后生成的（ assets 里面的资源不一定最终都能用得上，library 里面存的就是游戏最终发布时运行所需要的资源）

当 library 丢失或损坏的时候，只要删除整个 library 文件夹再打开项目，就会重新生成资源库。

日志文件目录（local）

local 文件夹记录着项目的日志信息，同时也包含该项目的本机配置信息，包括编辑器面板布局，窗口大小，位置等（开发者不需要关心这里的内容）

编辑器配置（profiles）

profiles 文件夹记录着我们对CocosCreator编辑器做出的各种配置信息，包括各目标平台的构建配置信息、场景配置信息等

临时文件目录（temp）

temp 是临时文件夹，用于缓存一些 Cocos Creator 在本地的临时文件。

这个文件夹以及前面提到的library文件夹，都可以在关闭 Cocos Creator 后手动删除，然后我们再重启游戏，系统就又会立即自动生成这俩文件夹（相当于清理游戏的缓存）

项目设置（settings）

settings 里保存项目相关的设置配置，如 构建发布 菜单里的包名、场景和平台选择等。

project.json

project.json 文件和 assets 文件夹一起，作为验证 Cocos Creator 项目合法性的标志，只有包括了这两个内容的文件夹才能作为 Cocos Creator 项目打开。开发者不需要关心里面的内容。

构建目录（build）

在使用主菜单中的 项目→构建发布... 使用默认发布路径发布项目后，编辑器会在项目路径下创建 build 目录，并存放所有目标平台的构建工程。

Cocos Creator基本概念

Cocos Creator（游戏开发引擎）的基础架构围绕 场景（Scene）、节点（Node）和组件（Component） 三大核心概念构建。三者通过层级化结构与组合式开发实现游戏世界的构建，形成 "场景包含节点，节点挂载组件" 的核心逻辑：

1个游戏是由多个场景组成的,1个场景是由多个节点组成的,1个节点是由多个组件组成的。

场景（Scene）：游戏世界的基本单元

场景就是玩家进行游戏的环境，开发者可以通过场景编辑器设计各种各样漂亮的场景，作为玩家游戏进行的平台

节点（Node）与组件（Component）：游戏实体的构成逻辑

节点：空间位置的载体，本身不具备功能，仅提供坐标、旋转、缩放等基础空间属性。
组件：功能实现的单元，如按钮组件（Button）、图片组件（Sprite），必须挂载于节点才能生效。
组合逻辑：通过"节点+多组件"的组合方式定义游戏实体（如"玩家节点"挂载"移动组件+碰撞组件+动画组件"）

组件式开发架构 VS 继承式开发架构

特性	组件式开发（Cocos Creator）	传统继承式开发
核心思想	组合优于继承，通过组件搭配实现功能复用	通过类继承扩展功能，易导致类爆炸
灵活性	动态添加/移除组件改变实体功能	功能固定，修改需重构继承关系
开发效率	可视化配置组件参数，无需重复编码	需手动编写大量功能代码
实例	按钮节点 = 基础节点 + Button组件 + Label组件	自定义Button类继承自基础UI类

层级结构示例

auto 复制代码

场景（Scene）
└── 主界面节点（Node）
    ├── 背景图节点（挂载Sprite组件）
    └── 按钮节点（挂载Button组件 + Label组件）
└── 玩家节点（Node）
    ├── 角色模型节点（挂载Animation组件）
    └── 碰撞体节点（挂载Collider组件）

组件式开发架构的优点

引擎设计哲学：Cocos Creator通过节点-组件系统降低耦合度，允许开发者通过组合而非修改源码扩展功能。
开发流程关键：新建场景 → 创建节点 → 挂载组件 → 配置属性 → 编写逻辑脚本，形成标准化开发链路。
可视化优势：所有操作可通过编辑器完成，减少纯代码开发工作量，尤其适合快速原型制作。

Cocos Creator的坐标系

Cocos Creator作为主流游戏开发引擎，其坐标系和事件响应系统是构建交互逻辑的基础框架。坐标系定义游戏对象空间位置，事件响应系统处理用户输入（如触摸、键盘操作），二者共同支撑游戏的交互体验实现。

Cocos Creator采用笛卡尔右手坐标系，二维空间坐标轴定义如下：

X轴：红色标识，水平向右为正方向
Y轴：绿色标识，垂直向上为正方向
Z轴：蓝色标识，垂直屏幕向外为正方向（拇指指向）

2D与3D模式坐标差异

维度	2D模式	3D模式
坐标轴	仅使用X轴和Y轴	完整X/Y/Z三轴
应用场景	2D平面游戏（如横版过关、休闲小游戏）	3D场景、3D角色控制
编辑器显示	平面坐标网格	立体坐标轴+透视视图
Z轴作用	不直接使用（可用于渲染层级控制）	深度定位与空间位置计算

Cocos Creator的事件响应系统

事件响应系统中的事件，指的就是用户通过键盘鼠标等外设输入的信号（如触摸、键盘操作）。而所谓的事件响应系统，就是规定当你的游戏收到这些信号之后，应该如何处理，如何输出

核心事件类型

触摸事件（最常用）
- touchstart：手指开始触摸屏幕时触发
- touchmove：手指在屏幕移动时持续触发
- touchend：手指离开屏幕时触发
- touchcancel：触摸点移出目标区域后离开时触发（如滑动后在屏幕外抬起）
其他事件类型：键盘事件、自定义事件（需手动派发）

事件监听API：`node.on()`

核心语法：

javascript 复制代码

this.node.on(事件类型, 回调函数, 绑定对象);

参数	说明	示例
事件类型	字符串常量，指定事件种类	`'touchstart'`
回调函数	事件触发时执行的处理逻辑	`function(event){ console.log('触摸开始'); }`
绑定对象	回调函数中的`this`指向	通常为`this`（当前节点组件）

事件传播机制

事件从触发到处理分为捕获阶段→目标阶段→冒泡阶段三阶段：

捕获阶段：事件从根节点向下传递至目标节点
目标阶段：事件到达目标节点并执行回调
冒泡阶段：事件从目标节点向上传递至根节点（可拦截）

冒泡控制方法：

event.stopPropagation()：阻止事件继续向上冒泡
emit方法派发的事件：无冒泡阶段（需手动控制传播）

实践案例：触摸事件实现流程

步骤1：节点绑定脚本

在编辑器中选择目标节点（如示例中的"小方块"）
在属性检查器中添加脚本组件（New Script）

步骤2：编写事件监听代码

javascript 复制代码

import { _decorator, Component, Node, EventTouch, log } from 'cc';
const { ccclass, property } = _decorator;


@ccclass('NewScript')
export class NewScript extends Component {
    onLoad() {
        this.node.on(Node.EventType.TOUCH_START, function () {
            log("触摸开始！");
        }, this);
    }
    // 在脚本的onLoad生命周期中注册事件
    start() {

    }

    update(deltaTime: number) {
        
    }
}

步骤3：运行与调试

运行项目并打开浏览器控制台
点击目标节点区域，触发touchstart事件
验证控制台是否输出"触摸开始"日志

Cocos Creator 键盘事件

键盘事件的级别：键盘事件属于系统级事件（System Event），不受节点加载状态影响，全局可监听。
如何处理键盘事件？ ：开发者主要通过 cc.systemEvent API 进行事件管理，cc 为引擎上下文对象。
系统事件监听：系统事件不止键盘事件这一种。我们可以采用同样的方法监听手机端重力感应等其他的系统事件

系统事件监听语法

javascript 复制代码

cc.systemEvent.on(事件类型, 回调函数, 绑定对象);

参数1（事件类型） ：需使用 cc.SystemEvent.EventType 枚举常量（如 'KEY_DOWN'/'KEY_UP'）。
参数2（回调函数） ：接收事件对象 e 作为参数，包含按键信息。
参数3（绑定对象） ：通常为 this，指定回调函数作用域。

键盘事件类型

事件类型	触发时机	枚举常量	应用场景
按键按下	键盘按下瞬间	`cc.SystemEvent.EventType.KEY_DOWN`	连续输入检测（如移动控制）
按键抬起	键盘释放瞬间	`cc.SystemEvent.EventType.KEY_UP`	单次操作触发（如确认按钮）

开发注意 ：cc.SystemEvent（枚举对象）与 cc.systemEvent（事件实例）名称相似但功能不同，前者含枚举常量，后者用于事件绑定。

Cocos Creator编辑器介绍

下面我们只是对 Cocos Creator编辑器进行一个初步介绍，进一步具体的可以看官方手册

层级管理器

默认节点有两个，一个是Main Light (光源节点)，另一个是Main Camera (摄像机节点)

场景编辑器

顾名思义，用来设计我们游戏里面的场景，红线对应 x 轴左右方向，蓝线对应 z 轴前后方向，绿线对应 y 轴上下方向)

下面给出场景编辑器使用过程中的几种快捷方式

选中某个节点，然后按住键盘上的F------自动聚焦该节点

按住alt+按住鼠标左键+移动鼠标------调整视角
按住鼠标右键+提示操作------相机漫游
- w往前，s往后，a往左，d往右，q往下，e往上
- 按住的同时，可以按上档键进行一个加速。

属性检查器

查看和编辑节点的组件

资源管理器

储存和查看资源文件 (assets 文件夹是储存自定义文件，internal 文件夹是官方自带文件资源)

资源预览

查看文件、路径等信息

控制台

查看输出信息，报错等

动画编辑器 / 动画图

用于编辑游戏动画

对节点的操作

创建3D节点

首先在层级管理器内空白处单击右键，创建一个平面

如何移动节点的位置？（图形的平移变换）

属性编辑器里修改位置坐标
选中该立方体，选中移动模式，然后沿着某个坐标轴的方向上下拖动

如何旋转节点？（图像的旋转变换）

选中立方体，在属性编辑器里输入旋转参数
选中该立方体，选中旋转模式，然后沿着某个旋转平面左右拖动

如何对图形伸缩？（图形的伸缩变换）

选中立方体，在属性编辑器里输入伸缩变换的参数
选中立方体，选中伸缩模式，沿着某个伸缩方向左右拖动

如何修改模型颜色？

在资源管理器assets目录下创建一个文件夹material
在material目录下创建一个材质文件，重命名为x1
在材质文件x1的属性编辑器栏内调整颜色
在属性编辑器右上角点击保存
左键点击x1文件（长按不松开），将鼠标拖动到我们要染色的图形处，松开鼠标，就能完成染色了
当然我们也可以先选中要染色的文件，调出它的属性显示器，然后将x1拖到下图红框内的小蓝条位置，然后松开鼠标，也能完成染色

上面这些操作的本质，实际上干的就是一件事儿，将我们目标图形的染色文件从标准默认文件修改为我们的x1文件。因为如果我们完成上述操作之后，再修改x1文件的颜色配置，那么与此同时，所有采用x1文件染色配置的图形颜色都会随之改变

相机节点设置

选中相机节点，然后在属性编辑器内修改它的配置，最常修改的就是该相机的位置坐标、摄影方向，以及视角宽广度

修改位置坐标还是在老位置修改

修改视角宽广度则是在下面两个位置

这个视角宽广度怎么理解呢？看下面这个图，图中的白色边框围成了一个棱台，Fov这个参数就是棱台上下面的面积之比，因此Fov越大，说明张的口子越大，视野越开阔。Far这个参数则是棱台的高（上下平面之间的距离）

光源节点设置

光源也可以分为平行光源、球状光源、点光源，这个很简单，你自己玩玩就会了

值得注意的是，你要是想实时在场景编辑器上查看光源效果，你必须得把右上角的点光源图标点亮

父节点和子节点的关系

如何构建父子节点关系？

假如我想让capsule成为Cube的子节点，那我直接在层级管理器中拖动cube目录项，拖到Cube目录项位置处就行
父子节点之间有什么特殊的关系？
- 如果我们对父节点做了相应的伸缩、平移、旋转变换，子节点也会跟着做与父节点同样的变换
- 但是如果我们对子节点做了相应的伸缩、平移、旋转变换，父节点是不受影响的
- 同理，如果我们对爷爷节点做了伸缩、平移、旋转变换，那么父节点和子节点也会跟着做与爷爷节点同样的变换，但是如果对孙子节点做变换，父节点和爷爷节点不受影响
为什么要搞这种父子节点的关系？
- 比如你做的是一个枪战游戏，你人在带着枪跑的时候，子弹是跟着枪一起移动的，也就是说枪动子弹也动，而当子弹射出去的时候，枪是不动的，那么这种情况就非常适合我们前面说的父子节点关系，我们可以把枪设置成父节点，子弹当做枪的子节点即可

从0开始的游戏编程——Cocos Creator开发

快速入门

组件化开发模式

传统开发模式痛点

Cocos Creator组件化开发的优势

安装Cocos Creator

Hello World初体验

Cocos Creator项目目录结构

资源文件夹（assets）

资源库（library）

日志文件目录（local）

编辑器配置（profiles）

临时文件目录（temp）

项目设置（settings）

project.json

构建目录（build）

Cocos Creator基本概念

场景（Scene）：游戏世界的基本单元

节点（Node）与组件（Component）：游戏实体的构成逻辑

组件式开发架构 VS 继承式开发架构

层级结构示例

组件式开发架构的优点

Cocos Creator的坐标系

Cocos Creator的事件响应系统

核心事件类型

事件监听API：node.on()

事件传播机制

实践案例：触摸事件实现流程

Cocos Creator 键盘事件

系统事件监听语法

键盘事件类型

Cocos Creator编辑器介绍

层级管理器

场景编辑器

属性检查器

资源管理器

资源预览

控制台

动画编辑器 / 动画图

对节点的操作

创建3D节点

如何移动节点的位置？（图形的平移变换）

如何旋转节点？（图像的旋转变换）

如何对图形伸缩？（图形的伸缩变换）

如何修改模型颜色？

相机节点设置

光源节点设置

父节点和子节点的关系

事件监听API：`node.on()`