零、写在前面

此教程为初级版本，旨在让开发者者快速入门Cocos Creator，熟悉软件基本操作，基本工作流以及游戏制作的基本流程，因为是初级版本，我将使用大量的图文来让大家快速投入到Cocos的学习中，后期的中高级将缩短图文，多用文字来表述操作。
内容参考官网的文档，地址如下：https://docs.cocos.com/creator/3.3/manual/zh/

一、新手上路

1.1 Hello World 项目

1.1.1 新建项目

• 资源管理器：显示了项目资源文件夹（assets）中的所有资源。
• 场景编辑器：用于展示和编辑场景中可视内容的工作区域。
• 层级管理器：用树状列表的形式展示场景中的所有节点和它们的层级关系，所有在 场景编辑器 中看到的内容都可以在 层级管理器 中找到对应的节点条目
• 属性检查器：用于查看并编辑当前选中节点及其组件属性的工作区域
• 资源预览：在 资源管理器 中选中资源，即可在 资源预览 面板中显示资源的缩略图。若选中资源所在的文件夹，即可显示文件夹下所有资源的缩略图，方便查看。
• 动画编辑器：用于制作一些不太复杂的、需要与逻辑进行联动的动画，例如 UI 动画。
• 控制台：用于显示报错、警告或其他 Cocos Creator 编辑器和引擎生成的日志信息。

关于编辑器各个面板，具体的内容请参考 编辑器面板。

1.1.2 新建场景（Create Scene）

在左下方的 资源管理器 面板中点击鼠标右键，选择 创建 -> Scene。

或者也可以直接点击左上角的 + 按钮，然后选择 Scene，即可在 资源管理器 的 asset 目录下新建一个场景：

1.1.3 创建物体（Create 3d Object）

在左上方的 层级管理器 面板中点击鼠标右键, 选择 创建 -> 3D 对象 -> Cube 立方体。或者也可以直接点击左上角的 + 按钮，然后选择 3D 对象 -> Cube 立方体。

即可创建一个立方体并且显示在 场景编辑器 中：（点击f可以快速移动窗口到立方体）

1.1.4 添加脚本（Create TypeScript）

关于ts的教程，大家可以参考下面的我整理的这篇文档，用啥查啥即可。【腾讯文档】TypeScript：https://docs.qq.com/doc/DRVZ3ckFXU1NzdWZO

• 新建脚本在 资源管理器 面板中点击鼠标右键，选择 创建 -> TypeScript，然后命名为 “HelloWorld”，即可在 资源管理器 的 asset 目录下新建一个脚本。

• 添加代码双击新建的脚本，脚本会自动在脚本编辑器中打开，前提是需要在编辑器菜单栏的 Cocos Creator -> 偏好设置 -> 外部程序 -> 默认脚本编辑器 中指定好使用的脚本编辑器。然后在脚本中添加 start() 函数，start() 函数会在组件第一次激活时调用，并输出 “Hello world”。 ```typescript

import { _decorator, Component, Node } from ‘cc’; const { ccclass, property } = _decorator;

/**

• Predefined variables
• Name = NewComponent
• DateTime = Sun Mar 27 2022 22:06:49 GMT+0800 (中国标准时间)
• Author = RobertCarlson
• FileBasename = NewComponent.ts
• FileBasenameNoExtension = NewComponent
• URL = db://assets/NewComponent.ts
• ManualUrl = https://docs.cocos.com/creator/3.3/manual/zh/ /

@ccclass(‘Hello’) export class NewComponent extends Component { // [1] // dummy = ‘’;

// [2]
// @property
// serializableDummy = 0;
start () {
   console.log('今晚打老虎！🐅')
   // 用的最多的就是我们的console.log() 
   // 但是在一些开发工作中console.info()用的也是比较多的，本质上是没有区别的，只不过名字叫的不一样而已
}
// update (deltaTime: number) {
//     // [4]
// }

}

/**

• [1] Class member could be defined like this.
• [2] Use property decorator if your want the member to be serializable.
• [3] Your initialization goes here.
• [4] Your update function goes here. *
• Learn more about scripting: https://docs.cocos.com/creator/3.3/manual/zh/scripting/
• Learn more about CCClass: https://docs.cocos.com/creator/3.3/manual/zh/scripting/ccclass.html
• Learn more about life-cycle callbacks: https://docs.cocos.com/creator/3.3/manual/zh/scripting/life-cycle-callbacks.html */

``` ❗注意：只有在类前加上@ccclass(‘Hello’)，才可以被cocos creater识别，才是有效的cc类，当然文件名，ccclass注解名和类名可以任取，所以我取了名字为Hello用来测试，并没用HelloWorld，但最好保持一致哦！
关于注解（一个TypeScript方法）：

1. 注解(装饰器)是一类特殊类型的声明，可以用在类、方法、构造器、属性和参数上。
2. 其实本质上，定义一个注解，就是定义一个TypeScript方法，只是该方法必须符合官方的规范。
3. 方法分别返回符合规范的函数闭包，参数target、propertyKey、descriptor。经测试，这三个参数中target和propertyKey是必须的，没有的话编译过不去，descriptor可以省略

[

](https://blog.csdn.net/qq_15253407/article/details/93175556)

• 绑定脚本

在 层级管理器 中选中创建的 Cube 节点，然后在 属性检查器 面板最下方点击 添加组件 -> 自定义脚本 -> HelloWorld，即可将脚本挂载到 Cube 节点上。或者也可以直接将脚本拖拽到 属性检查器 面板。

注意：场景设置完成后，切记要保存场景。

1.1.5 预览场景

简单的场景搭建完成后，就可以点击编辑器上方的 预览 按钮来预览游戏了。目前支持使用 浏览器/模拟器 进行预览。

以使用 浏览器 预览为例，Cocos Creator 会使用您的默认浏览器运行当前游戏场景，效果如下图所示：

可以看到在浏览器的开发者工具中的日志信息中输出了 “Hello World”。
再顺便讲一下预览参数各项的含义：（预览窗口大小即分辨率）

1.1.6 修改场景中的 Camera

在预览中我们可以看到立方体似乎有点太小了，这时便可以通过调整场景中的 Camera 来调整场景运行时显示的区域，Camera 代表的是游戏中的玩家视角。

• 首先在 层级管理器 中选中 Main Camera 节点，场景编辑器 中便会显示变换工具 Gizmo，以及玩家视角的小窗口。

  Gizmo：cocos使用 svg.js 作为操作工具，可把Gizmo视为对坐标轴，对称轴等的相关操作。

• 

• 然后在 场景编辑器 中拖动 Gizmo，或者修改 属性检查器 中的 Position 属性，使玩家视角窗口中的立方体显示得更为明显。

• 然后再次在浏览器中预览，可以看到场景中的立方体就很明显了

  1.2 项目结构

• assets：资源目录

• build：构建目录（在构建某平台后会生成该目录）
• library：导入的资源目录
• local：日志文件目录
• profiles：编辑器配置
• temp：临时文件目录
• package.json：项目配置

  1.2.1 资源文件夹（assets）

  assets 用来放置游戏中所有的本地资源、脚本和第三方库文件。只有在 assets 目录下的内容才能显示在 资源管理器中。assets 中的每个文件在导入项目后都会生成一个相同名字的 .meta 文件，用于存储对应的资源配置和索引信息。.meta文件需要一并提交到版本控制系统，详见 资源管理注意事项 —- meta 文件。
  一些第三方工具生成的工程或设计源文件，如 TexturePacker 的 .tps 文件，或 Photoshop 的 .psd 文件，可以选择放在 assets 外面管理。

  1.2.2 构建目标（build）

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

  1.2.3 资源库（library）

  library 是将 assets 中的资源导入后生成的，在这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式。
  当 library 丢失或损坏的时候，只要删除整个 library 文件夹再打开项目，就会重新生成资源库。

  1.2.4 本地设置（local）

  local 文件夹中包含该项目的本机上的配置信息，包括编辑器面板布局、窗口大小、位置等信息。开发者不需要关心这里的内容。

  1.2.5 编辑器配置（profiles）

  profiles 文件夹中包含编辑器的配置信息，包括各目标平台的构建配置信息、场景配置信息等。

  1.2.6 扩展插件文件夹（extensions）

  extensions 文件夹用于放置此项目的自定义扩展插件。如果需要手动安装扩展插件，可以手动创建该文件夹。如需卸载扩展插件，在 extensions 中删除对应的文件夹即可。

  1.2.7 项目设置（settings）

  settings 里保存特定项目相关的设置，如 项目设置 面板中相关的配置信息等。如果需要在不同开发者之间同步项目设置，请将 settings 目录加入到版本控制。

  1.2.8 临时文件夹（temp）

  temp 是临时文件夹，用于缓存一些 Cocos Creator 在本地的临时文件。这个文件夹可以在关闭 Cocos Creator 后手动删除，开发者不需要关心这里面的内容。

  1.2.9 package.json

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

  1.3 版本控制

  Cocos Creator 在新建项目时，会自动生成 .gitignore 文件，用于排除不应该提交到 git 仓库的文件。如果开发者使用其它版本控制系统，或者需要提交项目到其它地方，应该注意只需要提交 assets、extensions、settings、package.json，或其它手动添加的关联文件。

二、编辑器界面

https://docs.cocos.com/creator/3.3/manual/zh/editor/

三、制作第一个游戏

四、注意事项

语法格式

Cocos Creator 3.0 不同于 Cocos Creator v2.x 的语法格式，Cocos Creator 3.0 已全面支持 ES6 和 TS，因此只支持 ES6 和 TS 的 class。此外，我们还支持了 TS 的语法提示。针对 Cocos Creator 支持 ES5 语法的 cc.Class 形式已不再支持，请各位开发者悉知。