Cocos Creator 是以内容创作为核心，实现了脚本化、组件化和数据驱动的游戏开发工具。具备了易于上手的内容生产工作流，以及功能强大的开发者工具套件，可用于实现游戏逻辑和高性能游戏效果。

1.工作流程

2.项目文件夹结构

初次创建并打开一个 Cocos Creator 项目后，开发者项目文件夹的结构如下：

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

资源文件夹（assets）

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

构建目标（build）

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

资源库（library）

library 是将 assets 中的资源导入后生成的，在这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式。

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

本地设置（local）

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

编辑器配置（profiles）

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

扩展插件文件夹（extensions）

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

项目设置（settings）

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

临时文件夹（temp）

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

package.json

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

3.编辑器界面

（A）层级管理器：以树状列表的形式展示场景中的所有节点和它们的层级关系，所有在 场景编辑器 中看到的内容都可以在 层级管理器 中找到对应的节点条目，在编辑场景时这两个面板的内容会同步显示，一般我们也会同时使用这两个面板来搭建场景。
（B）资源管理器：显示了项目资源文件夹（assets）中的所有资源。这里会以树状结构显示文件夹并自动同步在操作系统中对项目资源文件夹内容的修改。您可以将文件从项目外面直接拖拽进来，或使用菜单导入资源。
（C）场景编辑器：用于展示和编辑场景中可视内容的工作区域。通过在场景编辑器中搭建场景，即可获得所见即所得的场景预览。
（D）动画编辑器：用于编辑并存储动画数据。
（E）属性检查器：用于查看并编辑当前选中节点和组件属性的工作区域，这个面板会以最适合的形式展示和编辑来自脚本定义的属性数据。
（F）项目预览：在场景搭建完成之后，在 Web 或原生平台预览游戏的运行效果。

4.场景编辑器

场景编辑器 是内容创作的核心工作区域，用于选择和摆放场景图像、角色、特效、UI 等各类游戏元素。在这个工作区域内可以选中并通过 变换工具 修改节点的位置、旋转和缩放等属性，并可以获得所见即所得的场景效果预览。

5.层级管理器

6.资源管理器

资源管理器 面板是用于访问和管理项目资源的重要工作区域。在开始制作游戏时，导入资源 通常是必须的步骤。在新建项目时可以使用 HelloWorld 模板项目，就可以看到 资源管理器 中已经包含了一些基本资源类型。

7.场景制作

场景是游戏中的环境因素的抽象集合，是创建游戏环境的局部单位，我们可以理解为游戏开发设计人员通过在编辑器中制作一个场景，来表现游戏中的一部分世界内容。

7.1 场景结构

Cocos Creator 通过节点树和节点组件系统实现了自由的场景结构。其中 Node 负责管理节点树的父子关系以及空间矩阵变换 Transform，这样可以轻松地在场景中管理和摆放所有的实体节点。
组件系统赋予了节点各种各样的高级功能，比如模型渲染（MeshRenderer 组件）、动画（Animation 组件）、光源（Light 组件）、地形（Terrain 组件）等。其中 3D 场景中的必要元素是 Camera 组件，Camera 组件代表的是游戏中的玩家视角，没有 Camera 就什么也看不见。因而在创建场景时，Creator 会默认创建一个挂载了 Camera 组件的节点。

7.2 场景制作相关工作流程

场景资源
节点和组件
坐标系和节点属性变换
节点层级和显示顺序
使用场景编辑器搭建场景
天空盒
全局雾
阴影

8.资源

资源管理器 面板中的资源和 操作系统的文件管理器 中看到的项目资源文件是同步的，在 资源管理器 中对资源的移动、重命名和删除，都会同步到 操作系统的文件管理器。

所有资源文件都会在导入时生成一份同名的 .meta 后缀的配置文件这份配置文件提供了该资源在项目中的唯一标识 UUID 以及其他的一些配置信息。

8.1 图像资源

图像资源又经常被称作贴图、图片，是游戏中绝大部分图像渲染的数据源。图像资源一般由图像处理软件（比如 Photoshop、Windows 上自带的画图）制作而成并输出成 Cocos Creator 可以使用的文件格式，目前支持 JPG、PNG、BMP、TGA、HDR、WEBBP、PSD、PSD、TIFF 等格式。

在 资源管理器 面板选中导入的图像资源，在 属性检查器 面板中便可根据需要设置图像资源的使用类型，目前支持以下几种：

raw：原始图片类型，无作用，用户不需要关心。
texture：图像资源类型，也是导入的图像资源的默认类型，详情可参考纹理贴图资源。
normal map：法线贴图类型，常用于渲染 3D 模型，可在模型材质中勾选 USE NORMAL MAP 属性使用。需要注意的是，如果材质中没有定义 USE NORMAL MAP 就没有该属性。
sprite-frame：精灵帧资源，用于 2D/UI 制作上，详情可参考 SpriteFrame。
texture cube：立方贴图类型，使用在全景图上，常用于制作天空盒。详情可参考立方体贴图。

1.纹理贴图资源（Texture）

当程序渲染 UI 或者模型时，会使用纹理坐标获取纹理颜色，然后填充在模型网格上，再加上光照等等一系列处理便渲染出了整个场景。

Texture2D

Texture2D 是纹理贴图资源的一种，通常用于 3D 模型的渲染，如模型材质中的反射贴图、环境光遮罩贴图等等。

genMipmaps

为了加快 3D 场景渲染速度和减少图像锯齿，贴图被处理成由一系列被预先计算和优化过的图片组成的序列，这样的贴图被称为 mipmap。

2.SpriteFrame

将 SpriteFrame 资源拖拽到 Sprite 组件的 SpriteFrame 属性框中，即可切换 Sprite 显示的图像。

在运行时，以上图中导入的名为 content 的图片为例，整个资源分为三部分：

content：图像源资源 ImageAsset
content 的子资源 spriteFrame，即精灵帧资源 SpriteFrame
content 的子资源 texture，即贴图资源 Texture2D

当资源存放在 resources 目录下时，我们可直接加载到 spriteFrame 资源。

const url = 'test_assets/test_atlas/content/spriteFrame';
resources.load(url, SpriteFrame, (err: any, spriteFrame) => {const sprite = this.getComponent(Sprite);sprite.spriteFrame = spriteFrame;
});

存放在服务器上的资源只能加载到图像源资源 ImageAsset，加载方法请参考动态加载资源。

const self = this;const url = 'test_assets/test_atlas/content';resources.load(url, ImageAsset, (err: any, imageAsset) => {const sprite = this.getComponent(Sprite);sprite.spriteFrame = SpriteFrame.createWithImage(imageAsset);});

3.立方体贴图

TextureCube 为立方体纹理，常用于设置场景的天空盒。

4.图集资源（Atlas）

在游戏中使用多张图片合成的图集作为美术资源，有以下优势：

合成图集时会去除每张图片周围的空白区域，加上可以在整体上实施各种优化算法，合成图集后可以大大减少游戏包体和内存占用
多个 Sprite 如果渲染的是来自同一张图集的图片时，这些 Sprite 可以使用同一个渲染批次来处理，大大减少 CPU 的运算时间，提高运行效率。

5.自动图集资源 (Auto Atlas)

自动图集 作为 Cocos Creator 自带的合图功能，可以将指定的一系列碎图打包成一张大图，是以当前文件夹下的所有 SpriteFrame 作为碎图资源。

8.2 预制件（Prefab）

预制件用于存储一些可以复用的场景对象。

创建预制件有两种方法：

在场景中将节点编辑好之后，直接将节点从 层级管理器 拖到 资源管理器 中即可完成预制件资源的创建。
点击 资源管理器 左上方的 + 按钮，或者点击面板空白处，然后选择 Node Prefab 即可。（v3.1.1 新增）

8.3 字体资源

使用 Cocos Creator 制作的游戏中可以使用三类字体资源：系统字体，动态字体和位图字体。

8.4 音频资源（AudioClip）

目前 Cocos Creator 支持导入以下格式的音频文件：

音频格式	说明
`.ogg`	`.ogg` 是一种开源的有损音频压缩格式，与同类型的音频压缩格式相比，优点在于支持多声道编码，采用更加先进的声学模型来减少损失音质，同时文件大小在相同条件下比 `.mp3` 格式小。目前 Android 系统所有的内置铃声也都使用 `.ogg` 文件。
`.mp3`	`.mp3` 是最常见的一种数字音频编码和有损压缩格式。通过舍弃 PCM 音频资料中对人类听觉不重要的部分，达到压缩成较小文件的目的。但对于大多数用户的听觉感受来说，压缩后的音质与压缩前的相比并没有明显的下降。MP3 被大量软硬件支持，应用广泛，是目前的主流。
`.wav`	`.wav` 是微软与 IBM 公司专门为 Windows 开发的一种标准数字音频文件，该文件能记录各种单声道或立体声的声音信息，并能保证声音不失真，因为音频格式未经过压缩。但文件占用相对较大。
`.mp4`	`.mp4` 是一套用于音频、视频信息的压缩编码标准，对于不同的对象可采用不同的编码算法，从而进一步提高压缩效率。
`.m4a`	`.m4a` 是仅有音频的 MP4 文件。音频质量是压缩格式中非常高的，同时在相同的比特率下，文件占用更小。

采用不同的音频编码格式，在相同的条件下，生成的音频文件大小和音质都各有不同。

8.5 材质资源

材质控制着每个模型最终的着色，材质由着色器构成，通过材质和着色器控制最终的着色流程。

在 3D 模型中使用

通过网格/蒙皮网格/批量蒙皮网格渲染器组件上的 Materials 属性，我们可以指定当前 3D 模型所使用的材质。点击 Materials 属性框右侧的箭头图标按钮，可以看到当前项目中所有的材质资源，根据需要选择即可。或者也可以将所需的材质资源从 资源管理器 直接拖拽到 Materials 属性框中。

8.6 模型资源

目前，Creator 支持 FBX 和 glTF 两种格式的模型文件。

FBX（.fbx）：支持 FBX 2020 及更早的文件格式。
glTF（.gltf 、.glb）：支持 glTF 2.0 及更早的文件格式，详情可参考 glTF 模型。

关于如何从第三方工具导出这两种模型文件，请参考导入从 DCC 工具导出的模型。

8.7 骨骼动画资源（Spine）

骨骼动画所需资源有：

.json/.skel 骨骼数据
.png 图集纹理
.txt/.atlas 图集数据

从服务器远程加载 Spine

加载文本格式的 Spine 资源

let comp = this.getComponent('sp.Skeleton') as sp.Skeleton;let image = "http://localhost/download/spineres/1/1.png";
let ske = "http://localhost/download/spineres/1/1.json";
let atlas = "http://localhost/download/spineres/1/1.atlas";
assetManager.loadAny([{ url: atlas, ext: '.txt' }, { url: ske, ext: '.txt' }], (error, assets) => {assetManager.loadRemote(image, (error, texture: Texture2D) => {let asset = new sp.SkeletonData();asset.skeletonJson = assets[1];asset.atlasText = assets[0];asset.textures = [texture];asset.textureNames = ['1.png'];skeleton.skeletonData = asset;});
});

加载二进制格式的 Spine 资源

let comp = this.getComponent('sp.Skeleton') as sp.Skeleton;let image = "http://localhost/download/spineres/1/1.png";
let ske = "http://localhost/download/spineres/1/1.skel";
let atlas = "http://localhost/download/spineres/1/1.atlas";
assetManager.loadAny([{ url: atlas, ext: '.txt' }, { url: ske, ext: '.bin' }], (error, assets) => {assetManager.loadRemote(image, (error, texture: Texture2D) => {let asset = new sp.SkeletonData();asset._nativeAsset = assets[1];asset.atlasText = assets[0];asset.textures = [texture];asset.textureNames = ['1.png'];asset._uuid = ske; // 可以传入任意字符串，但不能为空asset._nativeURL = ske; // 传入一个二进制路径用作 initSkeleton 时的 filePath 参数使用comp.skeletonData = asset;let ani = comp.setAnimation(0, 'walk', true);});
});

8.8 DragonBones 骨骼动画资源

DragonBones 骨骼动画资源包括：

.json/.dbbin 骨骼数据
.json 图集数据
.png 图集纹理

8.9 地图资源

地图所需资源有：

.tmx 地图数据
.png 图集纹理
.tsx tileset 数据配置文件（部分 tmx 文件需要）

8.10 JSON 资源

Creator 支持使用 Json 文件，通过资源导入的方式将其导入到编辑器，所有的 JSON 文件都会导入为 cc.JsonAsset 格式的资源。

通过编辑器

首先在 资源管理器 中新建一个 TypeScript，脚本内容示例如下：


import { _decorator, Component, JsonAsset } from 'cc';
const { ccclass, property } = _decorator;@ccclass('ItemTemplate')
export class ItemTemplate extends Component {// 声明属性 ‘itemGiftJson‘ 的类型为 JsonAsset@property(JsonAsset)itemGiftJson: JsonAsset = null!;start () {// 获取到 Json 数据const jsonData: object = this.itemGiftJson.json!;}
}

保存脚本内容后回到编辑器，将脚本挂载到相应的节点上，然后将 资源管理器 中的 Json 资源拖拽到脚本组件相应的属性框中。例如下图：

9.脚本及事件机制

Cocos Creator 脚本用于实现用户定义的（游戏）行为，支持 JavaScript 和 TypeScript 两种编程语言。通过编写脚本组件，并将它挂载到场景节点中来驱动场景中的物体。

在组件脚本的编写过程中，开发者可以通过声明属性，将脚本中需要调节的变量映射到 属性检查器 中，以便策划和美术进行调整。与此同时，也可以通过注册特定的回调函数，来帮助初始化、更新甚至销毁节点。

CocosCreater 教程（上）相关推荐

教程-上传应用公钥并获取支付宝公钥
教程-上传应用公钥并获取支付宝公钥 1. 点击签名验签工具右下角的"上传公钥"会打开支付宝开放平台网页,输入账号登录.(建议使用IE或Chrome浏览器.) 2. 在" ...
上树建站教程：新手单页网站制作教程上集
功能强大. 链接.文件下载等功能,一份源程序可以制造出无数个网站,只需一些超级简单的页面程序可以随意的编辑.修改,包括:图片.文案.背景.图片滚动单页型网站:就是一个独立页面的网站,是一个纯HT ...
Hyperledger Fabric 2.0 官方文档中文版第6章教程(上)
Hyperledger Fabric 2.0 官方文档中文版第6章教程上总目录 6.教程(上) 将智能合约部署到通道启动网络 Logspout设置打包智能合约安装链码包批准链码定义将链码 ...
SpringCloud详细教程(上)
[订阅专栏合集,关注公众号,作者所有付费文章都能看(持续更新)] 推荐[SpringCloud教程]https://blog.csdn.net/hellozpc/article/details/836 ...
基于JUPYTER的python主流库新手教程(上)
基于JUPYTER的python主流库新手教程(上) 作者:二马传奇 0. 基本测试 for i in range(5):print(i,end=",") 0,1,2,3,4, 1 ...
样式表（CSS：Cascading Style Sheets）简要教程[上]
首先提供两个手册的下载 CSS2&JavaScript.rar 一．样式表基础 1．样式表中每一个条目由选择符(selector)和对应的规则组成,选择符通常是HTML元素名称,也可以是类( ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
七牛云存储Python SDK使用教程 - 上传策略详解
本教程旨在介绍如何使用七牛的Python SDK来快速地进行文件上传,下载,处理,管理等工作. 前言我们在上面的两节中了解到,客户端上传文件时,需要从业务服务器申请一个上传凭证(Upload Tok ...
5W字高质量java并发系列详解教程(上)-附PDF下载
文章目录第一章 java.util.concurrent简介主要的组件 Executor ExecutorService ScheduledExecutorService Future Count ...

CocosCreater 教程（上）