参考原文地址

二、2D对象

区别于 3D 模型对象，我们将不涉及模型的图片渲染体统称为 2D 渲染对象。2D 渲染对象的处理在底层的数据提交上与 3D 模型存在差异，其遵循自己的规则做出了一些针对性的调整以实现更好的效率表现和使用体验。
渲染结构说明：
2D 渲染对象的收集采用树状结构。
RenderRoot 节点（带有 RenderRoot2D 组件的节点）：

1. 为 2D 对象数据收集的入口节点，所有的 2D渲染对象需在 RenderRoot 节点下才可以被渲染。
2. 由于 Canvas 组件本身继承 RenderRoot2D 组件，所以 Canvas 组件也可以作为数据收集的入口。
3. 2D 渲染节点必须带有 UITransform 组件作为渲染顶点数据、点击或者对齐策略等功能生效的必要条件。

2D 渲染也可以支持对模型进行渲染，唯一的条件是带有网格渲染器组件（例如 MeshRenderer/SkinnedMeshRenderer）的节点必须添加 UI/UIMeshRenderer 组件才可以和 UI 在相同的管线上进行渲染。
2D 渲染流程如下：

分类：
2D 渲染对象 ：一般只负责将 2D 对象渲染出来
用户界面 User-interface（UI）：更多的承担着用户交互的能力

2.1 2D渲染

引擎中所有不拥有的 model 的渲染对象都为 2D 渲染对象。
与 3D 对象不同，2D 对象本身不拥有 model 信息，其顶点信息是由 UITransform 组件的 Rect 信息持有并由引擎创建的，且本身没有厚度。由于引擎的设计要求，2D 渲染对象需要为 RenderRoot 节点（带有 RenderRoot2D 组件的节点）的子节点才能完成数据的收集操作。
所以 2D 渲染对象的渲染要求有两点：

1. 自身带有 UITransform 组件
2. 需要为带有 RenderRoot2D/Canvas 组件节点的子节点

2D 渲染对象可见性说明：
由于 2D 渲染对象在 Camera 的可见性判断上和 3D 渲染节点并无区别，所以用户需要自己控制节点的 layer 属性并设置 Camera 的 Visibility 来配合进行分组渲染，如果场景中出现多个相机的情况，错误的 layer 设置导致节点重复渲染或不渲染。
2D 渲染组件：
本身拥有渲染能力的组件我们称为 2D 渲染组件，包括：

• Sprite 组件参考
• Label 组件参考
• Mask 组件参考
• Graphics 组件参考
• RichText 组件参考
• UIStaticBatch 组件参考
• TiledMap 组件参考
• TiledTile 组件参考
• Spine（骨骼动画）Skeleton 组件参考
• DragonBones（龙骨）ArmatureDisplay 组件参考
• MotionStreak 组件参考

  2.1.1 Sprite 组件参考

  Sprite（精灵）是 2D/3D 游戏最常见的显示图像的方式，在节点上添加 Sprite 组件，就可以在场景中显示项目资源中的图片。
  
  点击 属性检查器 下面的 添加组件 按钮，然后选择 2D/Sprite 即可添加 Sprite 组件到节点上。

  属性

  | 属性 | 功能说明 | | —- | —- | | Type | 渲染模式，包括普通（Simple）、九宫格（Sliced）、平铺（Tiled）和填充（Filled）四种模式，详情请参考下文 渲染模式 部分的内容 | | CustomMaterial | 自定义材质，使用方法参考 自定义材质 | | Grayscale | 灰度模式，开启后 Sprite 会使用灰度模式渲染。 | | Color | 图片颜色 | | Sprite Atlas | Sprite 显示图片资源所属的图集（参考 Atlas
  ）。 | | Sprite Frame | 渲染 Sprite 使用的 SpriteFrame 图片资源
  。 | | Size Mode | 指定 Sprite 的尺寸
  Trimmed 表示会使用原始图片资源裁剪透明像素后的尺寸
  Raw 表示会使用原始图片未经裁剪的尺寸
  Custom 表示会使用自定义尺寸。当用户手动修改过 Size 属性后，Size Mode 会被自动设置为 Custom，除非再次指定为前两种尺寸。 | | Trim | 是否渲染原始图像周围的透明像素区域，详情请参考 图像资源的自动剪裁 |

添加 Sprite 组件之后，通过从 资源管理器 中拖拽 SpriteFrame 类型的资源到 SpriteFrame 属性引用中，就可以通过 Sprite 组件显示资源图像。
如果拖拽的 SpriteFrame 资源是包含在一个 Atlas 图集资源中的，那么 Sprite 的 Atlas 属性也会被一起设置。
若要动态更换 SpriteFrame 则需要先动态加载图片资源，然后再进行替换，详情请参考 获取和加载资源：动态加载。

渲染模式

Sprite 组件支持以下几种渲染模式：

• 普通模式（Simple）：根据原始图片资源渲染 Sprite，一般在这个模式下我们不会手动修改节点的尺寸，来保证场景中显示的图像和美术人员生产的图片比例一致。
• 九宫格模式（Sliced）：图像将被分割成九宫格，并按照一定规则进行缩放以适应可随意设置的尺寸(size)。通常用于 UI 元素，或将可以无限放大而不影响图像质量的图片制作成九宫格图来节省游戏资源空间。详细信息请阅读 使用 Sprite 编辑器制作九宫格图像 一节。
• 平铺模式（Tiled）：当 Sprite 的尺寸增大时，图像不会被拉伸，而是会按照原始图片的大小不断重复，就像平铺瓦片一样将原始图片铺满整个 Sprite 规定的大小。
• 填充模式（Filled）：根据原点和填充模式的设置，按照一定的方向和比例绘制原始图片的一部分。经常用于进度条的动态展示。

  填充模式（Fill）

  Type 属性选择填充模式后，会出现一组新的属性可供配置：

Fill Range 填充范围补充说明

在 HORIZONTAL 和 VERTICAL 这两种填充类型下，Fill Start 设置的数值将影响填充总量，如果 Fill Start 设为 0.5，那么即使 Fill Range 设为 1.0，实际填充的范围也仍然只有 Sprite 总大小的一半。
而 RADIAL 类型中 Fill Start 只决定开始填充的方向，Fill Start 为 0 时，从 x 轴正方向开始填充。Fill Range 决定填充总量，值为 1 时将填充整个圆形。Fill Range 为正值时逆时针填充，为负值时顺时针填充。

2.2 UI系统（ User-interface）

本章将介绍 Cocos Creator 中强大而灵活的 UI（用户界面）系统，通过组合不同 UI 组件来生产能够适配多种分辨率屏幕的、通过数据动态生成和更新显示内容，以及支持多种排版布局方式的 UI 界面。
入门：
在引擎中界定 UI 和 2D 渲染对象的区别主要在于适配和交互，所有的 UI 需要在 Canvas 节点下，以做出适配行为，而 Canvas 组件本身继承自 RenderRoot2D 组件，所以也可以作为数据收集的入口。
UI 是游戏开发的必要交互部分，一般游戏上的按钮、文字、背景等都是通过 UI 来制作的。在开始制作一款 UI 时，首先需要确定当前设计的内容显示区域大小（设计分辨率），可以在菜单栏的 项目 -> 项目设置 -> 项目数据 面板中设置：

设计分辨率设置完成后，开始创建 UI 元素，所有的 UI 元素都包含在 Canvas 节点下。可以在 层级管理器 面板中点击左上方的 + 按钮，然后选择 UI Component -> Canvas 来创建 Canvas 节点。Canvas 节点上有一个 Canvas 组件，该组件可以关联一个 camera。
注意：

1. 在一个场景中可以存在多个 Canvas 节点，但是 Canvas 节点不应该嵌套在另一个 Canvas 节点或其子节点下。
2. Canvas 组件并非和 camera 是一一对应关系，它们之前的渲染与否完全取决于 node 的 layer 和 camera 的 Visibility，在多 Canvas 的时候要格外注意 layer 管理以得到想要的渲染效果。

接下来就可以在 Canvas 节点下创建 UI 节点了。编辑器自带的 UI 节点有以下几种：

可以通过选中节点，在 属性检查器 面板中点击 添加组件 来查看 UI 组件。

UI 渲染组件的先后顺序采用的是深度排序方案，也就是 Canvas 节点下的子节点的排序就已经决定了之后的整个 渲染排序。
在一般的游戏开发中，必要的 UI 元素除了 Sprite（精灵图）、Label（文字）、Mask（遮罩）等基础 2D 渲染组件外，还有用于快速搭建界面的 Layout（布局）、Widget（对齐）等。其中 Sprite 和 Label 用于渲染图片和文字。Mask 主要用于限制显示内容，比较常用的地方是一些聊天框和背包等。Layout 主要用于排版，一般用于按钮单一排列，背包内道具整齐排列等。
最后一个比较重要的功能其实是 Widget，主要用于显示对齐。这里可能涉及到另外一个功能，那就是多分辨率适配，在我们设计完 UI 需要发布到不同平台时，势必会出现平台的实际设备分辨率和我们的设计分辨率不符的情况，这个时候为了适配不得不做一些取舍，比如头像框，是不能做缩放的，但是我们又希望它没有很大程度受设备影响，那么我们则需要为它添加上 Widget 组件，并且始终保证它对齐在我们的设计分辨率的左上方，具体参考：对齐策略 和 对齐。
当我们的界面制作完成之后，可能有人会发现，怎么发布 iPhone 7 和 iPhone X 的显示效果不一样？这个其实也是我们上面提到的设备分辨率的问题。在你以设计分辨率设计，最终以设备分辨率发布的时候，因为不同型号的手机设备分辨率可能不一致，这中间存在像素偏差的问题，因此，还需要做的一道转换工序那就是屏幕适配。
在菜单栏的 项目 -> 项目设置 -> 项目数据 页面中可以看到，还有两个选项是 适配屏幕宽度 / 适配屏幕高度，按照屏幕适配规则再结合 Widget 组件，就可以实现不同设备的轻松适配。具体适配规则可参考 多分辨率适配方案。

UI 组件

UI 组件大部分自身不具有渲染能力，但持有了 2D 渲染组件用于渲染，其本身更多拥有着快速构成用户交互界面的能力，承担着事件响应，排版适配等功能。各 UI 组件具体说明请参考 UI 组件。

UI 实践指南

• 多分辨率适配方案
• 对齐策略
• 文字排版
• 自动布局容器
• 制作动态生成内容的列表
• 制作可任意拉伸的 UI 图像

五、物理系统

5.1 2D物理

5.2 3D物理

5.2.0 概述

3D 物理简介

Cocos Creator 目前支持轻量的碰撞检测系统 builtin 和具有物理模拟的物理引擎 cannon.js，以及功能完善强大的 bullet 的 asm.js/wasm 版本（ammo.js），并为开发者提供了高效统一的组件化工作流程和便捷的使用方法。

物理世界和元素

物理世界中的元素可以分为一个个的 刚体，在 Cocos Creator 中加入物理元素可以通过为游戏对象添加碰撞器（Collider）或者刚体（RigidBody）组件，物理系统将为这些元素进行物理计算，使其表现出真实世界下的行为。
注：此处的“刚体”不是指刚体组件，刚体组件用于控制刚体物理行为相关的属性。
添加物理元素
在世界中添加一个物理元素可以分为以下步骤：

1. 新建一个形状 Cube；
2. 在右侧 属性检查器 面板下方点击 添加组件 按钮；
3. 在 Physics 目录下选择 BoxCollider，并调整参数；
4. 为了使它具有物理行为，接着添加一个 RigidBody 组件。

这样，便有了一个 既有碰撞器又有物理行为 的一个物理元素。
完善物理世界
接着，完善物理世界，可以为世界添加一个地面，仿照 1，2，3 步骤，可以再添加一个 只有碰撞器 的 Plane；
然后，再调整摄像机的角度（选中摄像机，执行 Ctrl + Shift + F 可以对齐到屏幕）；
最后，点击运行按钮，便可以看到物理元素在场景世界上的变化，最后的场景如下图所示：

物理元素的组成

在 Cocos Creator 中，一个物理元素可以由以下几种方式组成：

• 一个刚体组件
• 一个或多个碰撞器组件
• 一个刚体加一个或多个碰撞器组件

  更详细的模块

  Cocos Creator 的物理系统的更多内容将通过以下模块来进行更详细的介绍：