Cocos 是国产开源跨平台 2D/3D 实时互动内容引擎（厦门雅基软件），主打轻量、多端发布，国内大量休闲游戏、小游戏、H5 试玩广告都是用它开发的。

他有两个核心产品，一个是Cocos2d‑x（无可视化编辑器，写代码开发，主要语言 C++ / Lua / JS）；还有一个是Cocos Creator（一体化可视化编辑器，组件化架构，脚本主要用 TypeScript（JS））。

基础使用

项目结构

每一个Cocos Creator项目的开发者项目文件夹结构如下：

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

Cocos Creator 在新建项目时，会自动生成 .gitignore 文件，用于排除不应该提交到 git 仓库的文件。提交文件时只用提交上面加粗的文件夹即可。

基础界面

窗口

编辑器界面的组成和Unity差不多，包含Scene 场景、Hierachy 层级、Asset 资源管理器、Inspector 属性检查器、因此，和Unity一样的内容省略不记，这里只记录和Unity不一样的内容。

Scene 场景

  1. 参考图设置
    点击场景编辑器右上角的小方块按钮，即可打开参考图面板，这个面板主要用于辅助开发人员在场景编辑器中拼UI时作为对照参考。
选项 功能说明
add 添加 用于添加 UI 参考图，可添加多张参考图
delete 删除 用于删除当前选中框中的 UI 参考图
X 已选中的 UI 参考图显示在场景中的 X 轴位置
Y 已选中的 UI 参考图显示在场景中的 Y 轴位置
opacity 透明度 已选中的 UI 参考图显示在场景中的透明度
  1. 网格设置

点击场景编辑器右上角的设置按钮，即可进行网格设置。

选项 功能说明
3D 图标 场景是否启用 3D 图标，后面的输入框用于设置图标 Gizmo 的大小，取值范围为 0 ~ 8。
若勾选该项则表示启用 3D 图标，场景编辑器 中的图标 Gizmo 便会是一个 3D 面片，有近大远小的效果。
若不勾选该项，则图标 Gizmo 会显示为一个固定大小的图片。
显示网格 是否显示 场景编辑器 中的网格，后面的颜色设置框用于设置网格的颜色。
  1. 场景相机设置

点击场景编辑器右上角的相机按钮，即可设置场景相机的属性。

选项 功能说明
Fov 设置场景相机的视角大小
Far 设置场景相机的远裁剪面距离
Near 设置场景相机的近裁剪面距离
Color 设置场景背景色
Wheel Speed 设置当滚动鼠标滚轮时，场景相机前后移动的速度
Wander Speed 设置场景相机漫游时的移动速度
Wander Acceleration 设置相机漫游时是否开启加速（v3.3 新增）
若勾选该项则开启加速，相机移动将会越来越快
若不勾选该项，则相机会匀速移动。
  1. 渲染输出目标分辨率设置

点击场景编辑器右上角的相机按钮的旁边的下拉列表，可根据选择场景相机的渲染输出目标分辨率，会影响场景相机的可视范围，方便跟最终预览时选择的分辨率有相似的显示效果。

  1. 场景灯光设置

点击场景编辑器中间的小灯泡按钮，即可设置在进行场景编辑时是否使用场景灯光，默认使用。

  1. 场景自动释放

如果项目中的场景很多，随着新场景的切换，内存占用就会不断上升。除了使用 assetManager.releaseAsset 等 API 来精确释放不使用的资源，我们还可以使用场景的自动释放功能。

双击打开场景文件后，在 Hierarchy 选中 scene 节点，即可在 Inspector 中设置场景是否自动释放AutoReleaseAssets：开启后，从当前场景切换到下一个场景时，该场景中直接或间接引用到的所有资源都会自动释放。

Hierachy 层级、Asset 资源

和Unity操作一样。

Inspector 检视

Inspector面板左上角的 两个箭头 是编辑历史记录，点击可前进/后退选中过的节点/资源。

主菜单

CocosCreator

项主要包括软件信息、设置、窗口控制等功能。

选项 说明
关于 Cocos Creator 显示 Cocos Creator 相关版本号以及版权信息
布局 设置编辑器界面布局，暂时只支持默认布局
偏好设置 打开 偏好设置 面板，对编辑器进行个性化设置
快捷键 打开快捷键设置面板，查看编辑器各面板或功能模块默认使用的快捷键，支持自定义
关闭窗口（Ctrl/Cmd + W） 关闭当前窗口
退出 关闭当前编辑器，并自动打开 Dashboard

Preferences 面板中提供了编辑器的个性化设置，点击编辑器主菜单栏中的 Cocos Creator -> Preferences 即可打开。

偏好设置由几个不同的分页组成，修改设置之后 偏好设置 面板会自动保存修改。

General 通用设置

通用设置 分页主要是针对编辑器相关的一些基础信息进行配置，包括：

  • 编辑器语言
  • 选择本机预览IP地址：用户可以在本机有多个 IP 地址的情况下，手动选择其中之一作为预览时的默认地址和二维码地址。这里会列出所有本机的 IP，编辑器默认自动挑选一个 IP。
  • 预览服务器端口号：修改编辑器预览游戏时使用的端口号，修改完成后需要重启编辑器才能生效。
  • 数值默认步长
  • 主题颜色

External Programs 外部程序

外部程序 分页用于设置构建发布到原生平台时所需的开发环境，以及配置一些第三方程序。

当鼠标移动到具体的配置项时，左侧会显示一个灰色的圆形问号图标，点击该图标可设置将配置项应用于当前项目中或者应用于全局所有项目中。当设置为应用于当前项目时，灰色的图标会变成黄色。

Engine Manager 引擎管理器

引擎管理器 分页用于自定义引擎时配置引擎路径。

Device Manager 设备管理器

设备管理器 分页用于管理使用模拟器或者浏览器预览时的设备分辨率，支持在面板右侧手动添加/修改/删除自定义的设备分辨率。编辑器默认的设备分辨率不支持修改/删除。

AssetDB 资源数据库

资源数据库 分页用于设置 资源管理器 面板中的资源数据库的相关信息，包括 日志等级、忽略文件 和 默认 Meta。

Preview 预览

预览 分页主要用于在使用编辑器正上方的 预览 按钮时，可以设置的各种选项，但只对当前项目有效。

Build 构建发布

构建发布 分页用于设置执行 构建发布 时相关的信息，包括 日志文件打开方式 和 缓存资源的序列化 JSON。

Console 控制台

控制台 分页用于设置 控制台 面板输出的日志，包括 显示日期 和 文字大小。

Inspector 属性检查器

属性检查器 分页中的 离开编辑自动保存 功能用于设置 属性检查器 面板是否在属性编辑完成后自动保存修改。

Laboratory 实验室

实验室 分页中会不定期提供一些新的技术方案或实验性质的功能，可以通过开关选项来选择是否使用，大部分情况下默认开启。

File

该项主要用于项目或场景的新建、打开、保存等操作，以及导入 Cocos Creator 2.x 项目。

选项 说明
新建项目 打开 Dashboard 的 项目 分页，以新建一个项目。
打开项目 打开 Dashboard 的 项目 分页
新建场景（Ctrl/Cmd + N） 关闭当前场景并创建一个新场景，新创建的场景需要手动保存才会添加到项目目录下
保存场景（Ctrl/Cmd + S） 保存当前正在编辑的场景，如果是使用 文件 -> 新建场景 创建的场景，在第一次保存时会弹出对话框，需要选择场景文件保存的位置并填写文件名，然后点击 保存 即可。场景文件以 .scene 作为扩展名
另存为（Ctrl/Cmd +Shift+ S） 生成当前场景文件的副本，并保存在项目中
导入 Cocos Creator 2.x 项目 v2.x 资源导入工具，支持旧项目资源完美导入，以及代码的辅助迁移。

Project

选项 说明
项目设置 打开项目设置面板，设置特定项目的相关配置项
光照贴图 打开 光照贴图面板，配置生成光照贴图的烘焙参数
运行预览（Ctrl/Cmd + P） 点击该项即可在选择的浏览器/模拟器中预览项目效果
刷新预览（Ctrl/Cmd + Shift + P） 刷新已经打开的浏览器预览窗口
生成预览模板 该项用于自定义想要的预览效果
构建发布（Ctrl/Cmd + Shift + B） 打开 构建发布 面板，将游戏打包发布到目标平台上
构建项目构建模板 该项用于定制项目的构建模板
新建构建扩展包 该项用于自定义构建流程

Project Settings 面板通过点击编辑器主菜单栏中的 Project -> Project Settings 即可打开，主要用于设置特定项目的相关配置项。

  • Project Data：项目数据。主要用于设置默认 Canvas、渲染管线等，只对当前项目生效。
  • Layers：Layers 能让相机渲染部分场景，让灯光照亮部分场景。
    • 可自定义 0 到 19 个 Layers，清空输入框则删除原先的设置。
    • 后 12 个 Layers 是引擎内置的，不可修改。
  • Physics：物理。
  • Scripting：脚本。
  • Macro Config：引擎宏配置。提供了修改宏配置的快捷方式，配置的宏将会在预览、构建时生效，同时也会跟随自定义引擎的配置更新当前宏配置的默认值。
  • Feature Cropping：功能裁剪。主要是针对发布游戏时引擎中使用的模块进行裁剪，达到减小发布版引擎包体的效果。列表中未选中的模块在打包、预览时将会被裁剪掉。
  • Texture Compression：压缩纹理。在 Project Settings 中配置预设，然后在 属性检查器 中选择图片资源的预设方式。

Panel

该项主要用于打开编辑器中的各式面板。

Extension

该项主要包括扩展管理器、商城和创建扩展等。

工具栏

变换工具 主要包括 移动、旋转、缩放、矩形变换 和 吸附变换（旁边的设置按钮可以修改配置），将鼠标悬浮在任一变换工具上方时会显示相关的提示信息。

变化工具与运行预览游戏与Unity差不多，这里不做说明。

比较特别的是，在编辑器右方有一个IP地址，这是运行Cocos Creator的桌面电脑的局域网地址，连接同一局域网的移动设备可以访问这个地址来预览和调试游戏。将鼠标悬浮在局域网地址上，会浮现一个二维码，通过扫描二维码的方式也可以访问这个地址来预览和调试游戏。

在这个IP地址旁边的Project、App按钮分别可以打开项目所在的文件夹以及程序的安装路径

预览游戏

  • Rotate：决定显示横屏还是竖屏
  • Show FPS：用于选择是否在左下角显示每秒帧数和 Drawcall 数量等调试信息

坐标系

Cocos的世界坐标系是右手坐标系（Unity是左手坐标系！），z轴正方向向前。

资源系统

图像资源

属性 说明
useCompressTexture 是否使用压缩纹理，详情请参考 压缩纹理。
Type 用于设置图像资源的类型，包括 raw、texture（默认，常用于 3D 模型的渲染）、normal map、sprite-frame（）、texture cube（立方贴图类型，使用在全景图上，常用于制作天空盒。）。
Flip Vertical 是否沿 X 轴垂直翻转导入的贴图。
Bake Offline Mimmaps 是否烘焙离线 Mipmap
Fix Alpha Transparency Artifacts 消除透明伪影。
为全透明像素填充相邻像素的颜色，防止纹理过滤引起的黑边问题。当使用 Alpha 透明通道时，请启用此功能。
仅对 texture、raw、sprite-frame 以及 texture cube 生效
Is RGBE 是否是 RGBE 压缩格式，该选项仅在 Type 为 立方体贴图 时生效

Texture 纹理贴图资源

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

SpriteFrame 精灵帧资源

SpriteFrame 是 UI 渲染基础图形的容器。其本身管理图像的裁剪和九宫格信息。

注意：

点开一张spriteFrame，Inspector窗口有一些可编辑的东西。其中，以Trim 开头的是有关于裁剪的设置。导入图像资源后生成的 SpriteFrame 默认会进行自动剪裁，去除原始图片周围的透明像素区域。如果导入的资源是特效帧，需要吧Trim Type设置为none，否则特效可能会到处乱飘。

TextureCube 立方体纹理

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

LabelAtlas 艺术数字资源

艺术数字资源 是一种用户自定义的资源，它可以用来配置艺术数字字体的属性。本质上是一个图集，但是使用时需要创建一个Lable节点，然后在Inspector中将新建好的艺术数字资源拖拽到节点Lable组件的Font属性上即可。

属性 功能说明
SpriteFrame 设置事先绘制好的包含所需字体样式的图片
Item Width 指定每一个字符的宽度
Item Height 指定每一个字符的高度
Start Char 指定艺术数字字体里面的第一个字符，如果字符是空格，也需要在这个属性里面输入空格字符
Font Size 显示每个字符的大小，由 Item Width 和 Item Height 自动计算得出，不可编辑

预制体

由预制体生成的实例既可以继承模板的数据，又可以有自己定制化的数据修改。

预制体支持嵌套使用，也就是预制体下可以有子预制体。

字体资源

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

系统字体

系统字体是调用设备操作系统自带的ttf字体，项目中不需要放ttf文件，由平台底层实时渲染文字，遇到任何字符现场生成纹理。其中，ttf格式的文件是一套存文字外形的文件，用矢量曲线描述字形，放大也不会糊。

动态字体

使用自己导入项目的ttf字体渲染。

位图字体

位图字体由fnt格式的字体文件和一张png图片组成，fnt文件提供了对每一个字符小图的索引。导入位图字体的时候，务必将 fnt 文件和 png 文件同时拖拽到 资源管理器 中。

注意！导入位图字体之后，需要将 png 文件的类型更改为 sprite-frame，否则位图字体将无法正常使用。
为了提高资源管理效率，建议将导入的 fnt 和 png 文件存放在单独的目录下，不要和其他资源混在一起。

之后就可以创建Label，然后将字体资源拖拽到创建的Label组件中的Font属性栏中。

材质资源

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

功能模块

图形渲染

渲染管线

渲染管线用于控制场景的渲染流程，包括光照管理、物体剔除、渲染物体排、渲染目标切换等。

由于每个阶段对于不同项目来说可以有不同的优化处理方式，所以用统一的方法来处理不同类型项目的渲染流程很难达到最优化的结果。可定制化的渲染管线用于对渲染场景中的每个阶段进行更灵活的控制，可以针对不同的项目做更深层次的优化方案。

在可定制化的渲染管线中，可以选择使用引擎内置的渲染管线，内置渲染管线包括 前向渲染管线 和 延迟渲染管线，引擎默认使用前向渲染管线。（可以在Project -> ProjectSettings -> Project Data -> RenderPipeline更改）

前向渲染

前向渲染主要包括 ShadowFlow 和 ForwardFlow 两个阶段：

  • ShadowFlow 中包含一个 ShadowStage 会预先对场景中需要投射阴影的物体进行阴影贴图的绘制。
  • ForwardFlow 包含一个 ForwardStage，会对场景中所有物体按照 非透明 -> 光照 -> 透明 -> UI 的顺序依次进行绘制。

延迟渲染

对于光照数量比较多的项目可以使用 延迟渲染管线 来缓解光照计算的压力。

内置的延迟渲染管线主要包括 ShadowFlow 和 MainFlow 两个过程：

  • ShadowFlow 与前向渲染一致，用于预先进行阴影贴图的绘制。
  • MainFlow 包含了 GBufferStage、LightingStage、BloomStage 和 PostProcessStage 四个阶段：
    • GbufferStage 会对场景中的非透明物体进行绘制；
    • 然后 LightingStage 会对输出到 GBuffer 中的非透明物体信息进行基于屏幕空间的光照计算，再绘制半透明物体；
    • 若还开启了 Bloom 效果，BloomStage 会对已经经过 LightingStage 处理后的图像进行 Bloom 后处理；
    • 最后 PostProcessStage 会把 BloomStage/LightingStage 输出的全屏图像绘制到主屏幕中，再进行 UI 的绘制。

相机

属性名称 说明
Priority 相机的渲染优先级，值越小越优先渲染
Visibility 设置哪些层级（Layer）的节点应该被相机观察到

另外，相机还可以进行分组渲染。分组渲染功能是通过相机组件的 Visibility 属性配合节点的 Layer 属性 共同决定的。用户可通过代码设置 Visibility 的值来完成分组渲染。所有节点默认都属于 DEFAULT 层，在所有相机都可见。

光照

光照有三个重要的度量单位：光通量、亮度、照度。我们通常用光通量和亮度描述常见的带有照明面积的光源；照度用来描述太阳光。

光源决定了物体所受到的光照的颜色、色温、强度、方向、以及产生的阴影效果等。

光源类型

Cocos支持以下光源：平行光、球面光、聚光灯、环境光。接下来一一讲解：

平行光

平行光又称方向光，是最常用的一种光源，模拟了无限远处的光源发出的光线，常用于实现太阳光。

注意！ Cocos Creator 目前只支持一个平行光。若同时添加多个，则以最后一个添加的为准。

球面光

球面光会向所有方向均匀地发散光线，接近于蜡烛产生的光线。物体受到的光照强度会随着跟光源距离的增大而减弱，当距离超过设置的光照影响范围，则光照强度为 0。

在实际应用中可用于模拟火把、蜡烛、灯泡等光源，照亮四周一定距离内的环境。

聚光灯

聚光灯 是由一个点向一个方向发射一束锥形光线，类似于手电筒或舞台照明灯产生的光线。

环境光

在生活中，错综复杂的光线与凹凸不平的物体表面相互反射，使得整个环境都被照亮，仿佛被一层光均匀笼罩，这个光一般称为 环境光，也称为 漫射环境光。

因为环境光可以均匀地照亮场景中的所有物体，常用于解决模型背光面全黑的问题，一般需要配合其他类型的光源一起使用。例如场景中只有一个平行光，那么在模型的背光源处会显得非常暗，加入环境光则可以提升模型背部的亮度，显得更加美观。

注意！ 由于环境光是没有方向的，所以不能产生阴影。

渲染光照的时候会先渲染平行光，再渲染其他光。

阴影

物体开启阴影效果的步骤如下：

  1. 在Hierarchy中选中Scene，然后再Inspector窗口的shadows组件中勾选Enabled。
  2. 在Hierarchy中选中需要显示阴影的3D节点，然后在Inspector的MeshRenderer组件中将ShadowCastingMode属性设置为ON。（若阴影类型是 ShadowMap，还需要将 MeshRenderer 组件上的 ReceiveShadow 属性设置为 ON。）

注意！ 如果阴影无法正常显示，需要调整一下方向光的照射方向。

shadows的参数如下：

属性 说明
Type 阴影类型
Saturation 调节阴影饱和度，建议设置为 1.0。若需要减小方向光阴影的饱和程度，推荐通过增加环境光来实现，而不是调节该值
ShadowColor 设置阴影颜色
Normal 阴影接收平面的法线，垂直于阴影，用于调整阴影的倾斜度
Distance 阴影在接收平面上与坐标原点的距离

Type 阴影类型：

  • Planar shadow 平面阴影：一般用于较为简单的场景。Planar 类型的阴影只有投射在平面上才能正常显示，不会投射在物体上，也就是说 MeshRenderer 组件中的 ReceiveShadow 属性是无效的。
  • ShadowMap 阴影贴图：一般用于要求光影效果比较真实，且较为复杂的场景。它是以光源为视点来渲染场景的。从光源位置出发，场景中看不到的地方就是阴影产生的地方。
    • MaxReceived ：最多支持产生阴影的光源数量，默认为 4 个，可根据需要自行调整。

光照贴图

烘焙系统会对光源稳定的静态物体所受到的光照和阴影等进行预先计算，计算产生的结果存放在一张纹理贴图中，这张贴图我们称之为 光照贴图。

生成的光照贴图 Creator 会在运行时自动处理并使用。在光源固定的场景中，使用光照贴图代替实时的光照计算，可以减少资源消耗，从而提高场景运行效率。

光照贴图有一个可以编辑的面板：Lightmap。里面有两个页签：Scene、Baked。其中，Scene主要用于配置生成光照贴图相关的参数；Baked主要用于展示生成的光照贴图及其相关信息。

2D对象

2D渲染

UI系统