图像和渲染
基本图像渲染：Sprite 、 Label 、 Mask 组件
外部资源渲染：ParticleSystem、TiledMap、Spine、DragonBones、VideoPlayer、WebView组件
摄像机
创建场景时，Creator 会默认创建一个名为 Main Camera的摄像机，作为这个场景的主摄像机。
backgroundColor 当指定了摄像机需要清除颜色的时候，摄像机会使用设定的背景色来清除场景。
depth摄像机深度，用于决定摄像机的渲染顺序。值越大，则摄像机越晚被渲染。
cullingMask cullingMask 将决定这个摄像机用来渲染场景的哪些部分。在 属性检查器 中的摄像机组件中的 cullingMask 会列出当前可以选择的 mask 选项，你可以通过勾选这些选项来组合生成 cullingMask。
使用项目-项目设置-分组管理 来添加和修改分组。
clearFlags指定渲染摄像机时需要做的清除操作。
rect 决定摄像机绘制在屏幕上的哪个区域，便于实现类似小地图那样的 Viewport，值为 0～1。
zoomRatio指定摄像机的缩放比例，值越大显示的图像越大。
alignWithScreen当 alignWithScreen 为 true 的时候，摄像机会自动将视窗大小调整为整个屏幕的大小。
orthoSize摄像机在正交投影模式下的视窗大小。
targetTexture如果设置了 targetTexture，那么摄像机渲染的内容不会输出到屏幕上，而是会渲染到 targetTexture 上。如果你需要做一些屏幕的后期特效，可以先将屏幕渲染到 targetTexture，然后再对 targetTexture 做整体处理，最后再通过一个 sprite 将这个 targetTexture 显示出来。
坐标转换
// 将一个屏幕坐标系下的点转换到世界坐标系下
camera.getScreenToWorldPoint(point, out);
// 将一个世界坐标系下的点转换到屏幕坐标系下
camera.getWorldToScreenPoint(point, out);
// 获取屏幕坐标系到世界坐标系的矩阵，只适用于 2D 摄像机并且 alignWithScreen 为 true 的情况
camera.getScreenToWorldMatrix2D(out);
// 获取世界坐标系到屏幕坐标系的矩阵，只适用于 2D 摄像机并且 alignWithScreen 为 true 的情况
camera.getWorldToScreenMatrix2D(out);
截图功能 | 参考
Material 材质资源
材质资源可以用来控制渲染组件在场景中的视觉效果。简单来说材质就是用来指定物体表面的特性，如颜色、光亮程度、自发光度以及不透明度等。
创建 Effect
Sprite 组件参考
Sprite（精灵）是 2D 游戏中最常见的显示图像的方式
渲染方式：
普通模式（Simple）：根据原始图片资源渲染 Sprite，一般在这个模式下我们不会手动修改节点的尺寸，来保证场景中显示的图像和美术人员生产的图片比例一致。九宫格模式（Sliced）：图像将被分割成九宫格，并按照一定规则进行缩放以适应可随意设置的尺寸(size)。通常用于 UI 元素，或将可以无限放大而不影响图像质量的图片制作成九宫格图来节省游戏资源空间。详细信息请阅读 使用 Sprite 编辑器制作九宫格图像 一节。平铺模式（Tiled）：图像将会根据 Sprite 的尺寸重复平铺显示。如果 SpriteFrame 包含 九宫格配置，平铺时将保持周围宽度不变，而其余部分重复。填充模式（Filled）：根据原点和填充模式的设置，按照一定的方向和比例绘制原始图片的一部分。经常用于进度条的动态展示。网格模式（Mesh）：必须使用 TexturePacker 4.x 以上版本并且设置 ploygon 算法打包出的 plist 文件才能够使用该模式。
Label组件参考
Label 组件用来显示一段文字，文字可以是系统字体、TrueType 字体、BMFont 字体或艺术数字。另外，Label 还具有排版功能。
LabelOutline 描边
LabelShadow 投影
Mask 遮罩
MotionStreak 拖尾
Particle System 粒子系统
Tilemap 组件
Spine
DragonBones
VideoPlayer
WebView 组件参考：WebView 是一种显示网页的组件，该组件让你可以在游戏里面集成一个小的浏览器。
Graphics 组件提供了一系列绘画接口，这些接口参考了 canvas 的绘画接口来进行实现。
UI系统
多分辨率适配方案
Canvas（画布） 组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。
Widget（对齐挂件） 放置在渲染元素上，能够根据需要将元素对齐父节点的不同参考位置。
Label（文字） 组件内置了提供各种动态文字排版模式的功能，当文字的约束框由于 Widget 对齐要求发生变化时，文字会根据需要呈现完美的排版效果。
Sliced Sprite（九宫格精灵图）则提供了可任意指定尺寸的图像，同样可以满足各式各样的对齐要求，在任何屏幕分辨率上都显示高精度的图像。
设计分辨率 / 屏幕分辨率
设计分辨率 是内容生产者在制作场景时使用的分辨率蓝本
屏幕分辨率 是游戏在设备上运行时的实际屏幕显示分辨率。
通常设计分辨率会采用市场目标群体中使用率最高的设备的屏幕分辨率，比如目前安卓设备中 800 x 480 和 1280 x 720 两种屏幕分辨率，或 iOS 设备中 1136 x 640 和 960 x 640 两种屏幕分辨率。这样当美术或策划使用设计分辨率设置好场景后，就可以自动适配最主要的目标人群设备。
Canvas带有适配宽度（Fit Width）还有适配高度（Fit Height）的模式，配合Widget（对齐挂件）进行调整，也存在ExactFit的适配模式，进行图像的拉伸变形。
对齐策略
要实现完美的多分辨率适配效果，UI 元素按照设计分辨率中规定的位置呈现是不够的，当屏幕宽度和高度发生变化时，UI 元素要能够智能感知屏幕边界的位置，才能保证出现在屏幕可见范围内，并且分布在合适的位置。我们通过 Widget（对齐挂件） 来实现这种效果。
- 需要贴边对齐的按钮和小元素：设置为
Canvas的子节点，添加Widget组件，开启Left和Buttom对齐 - 嵌套对齐元素：因为Widget是根据父节点进行对齐
- 根据对齐需要自动缩放节点尺寸：需要同时勾选
Left和Right对齐开关，就能够修改size - 制作和屏幕大小保持一致的节点：那就进行全部的勾选
- 设置百分比对齐距离：直接输入百分比：可以按照需要混合像素单位和百分比单位的使用。比如在需要对齐屏幕中心线的 Left 方向输入 50%，在需要对齐屏幕边缘的 Right 方向输入 20px，最后计算子节点位置和尺寸时，所有的边距都会先根据父节点的尺寸换算成像素距离，然后再进行摆放。
Align Mode中的 设置为ON_WINDOW_RESIZE或者 ONCE，在进行一次对齐之后就会把Widget组件的enabled属性设置为false
制作可任意拉伸的UI图像
通过进行Sprite的编辑，切分九宫格，并且将Sprite的Type属性设置为Sliced
文字排版
Label 组件的排版也是基于节点尺寸（Size），也就是约束框（Bounding Box）所规定的范围。
Label 中以下的属性决定了文字在约束框中显示的位置：
Horizontal Align（水平对齐）：文字在约束框中水平方向的对齐准线，可以从 Left、Right、Center 三种位置中选择。
Vertical Align（垂直对齐）：文字在约束框中垂直方向的对齐准线，可以从 Top、Bottom、Center 三种位置中选择。
Font Size（文字尺寸）决定了文字的显示大小，单位是 Point（也称作“磅”）
Line Height（行高）决定了文字在多行显示时每行文字占据的空间高度，单位同样是 Point。
调整这两个参数的大小关系决定了文字现实的疏密与重叠
排版模式（Overflow）
Overflow（排版模式） 属性，决定了文字内容增加时，如何在约束框的范围内排布。共有NONE、CLAMP、SHRINK、RESIZE_HEIGHT 四种模式，而只有在后面三种模式下才能通过编辑器左上角的 矩形变换工具 或者修改 属性检查器 中的 Size 大小或者添加 Widget 组件 来调整约束框的大小。
截断（Clamp） 截断模式下，文字首先按照对齐模式和尺寸的要求进行渲染，而超出约束框的部分会被隐藏（截断）。
自动缩小（Shrink）自动缩小模式下，如果文字按照原定尺寸渲染会超出约束框时，会自动缩小文字尺寸以显示全部文字。
自动适应高度（Resize Height）自动适应高度模式会保证文字的约束框贴合文字的高度，不管文字有多少行。这个模式非常适合显示内容量不固定的大段文字，配合 ScrollView 组件 可以在任意 UI 区域中显示无限量的文字内容。
自动换行（Enable Wrap Text）
Label 组件中的 Enable Wrap Text（自动换行）属性，可以切换文字的自动换行开关。在自动换行开启的状态下，不需要在输入文字时手动输入回车或换行符，文字也会根据约束框的宽度自动换行。
注意：自动换行属性只有在文字排版模式的截断（Clamp） 和 自动缩小（Shrink） 这两种模式下才有。自动适应高度（Resize Height）模式下，自动换行属性是强制开启的。
中文自动换行的行为和英文不同，英文是以单词为单位进行换行的，必须有空格才能作为换行调整的最小单位。中文是以字为单位进行换行，每个字都可以单独调整换行。
文字节点的锚点
文字节点的锚点和文字在约束框中的对齐模式是需要区分的两个概念。在需要靠文字内容将约束框撑大的排版模式中（如Resize Height），要正确设置锚点位置，才能让约束框向我们期望的方向调整。
如果希望文字约束框向下扩展，需要将锚点（Anchor）的 y 属性设为 1。
在 Label 组件所在节点上添加一个 Widget（对齐挂件） 组件，就可以让文字节点相对于父节点进行各式各样的排版。可以使用百分比来进行进行页面的分隔，并且显示出多列布局的文字。
自动布局容器 Layout
Layout（自动布局）组件可以挂载在任何节点上，将节点变成一个有自动布局功能的容器。所谓自动布局容器，就是能够自动将子节点按照一定规律排列，并可以根据节点内容的约束框总和调整自身尺寸的容器型节点。
布局模式（Layout Type）
- 水平布局
Layout Type设为Horizontal时，所有子节点都会自动横向排列，并根据子节点的宽度（Width）总和设置 Layout 节点的宽度。上图中 Layout 包括的两个 Label 节点就自动被横向排列。
水平布局模式下，Layout 组件不会干涉节点在 y 轴上的位置或高度属性，子节点甚至可以放置在 Layout 节点的约束框高度范围之外。如果需要子节点在 y 轴向上对齐，可以在子节点上添加 Widget 组件，并开启 Top 或 Bottom 的对齐模式。 - 垂直布局
Layout Type设为Vertical时，所有子节点都会自动纵向排列，并根据子节点的高度（Height）总和设置 Layout 节点的高度。
垂直布局模式下，Layout 组件也不会修改节点在 x 轴的位置或宽度属性，子节点需要添加 Widget 并开启 Left 或 Right 对齐模式才能规整的排列。
制作动态生成内容的列表的官方例子
UI组件
Canvas（画布） 组件能够随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。场景中的 Canvas 同时只能有一个，建议所有 UI 和可渲染元素都设置为 Canvas 的子节点。
Widget (对齐挂件) 是一个很常用的 UI 布局组件。它能使当前节点自动对齐到父物体的任意位置，或者约束尺寸，让你的游戏可以方便地适配不同的分辨率。
Button 组件可以响应用户的点击操作，当用户点击 Button 时，Button 自身会有状态变化。另外，Button 还以让用户在完成点击操作后响应一个自定义的行为。
Button组件可以通过编辑器添加回调，也可以通过脚本添加
首先需要构造一个 cc.Component.EventHandler 对象，然后设置好对应的 target、component、handler 和 customEventData 参数，然后再通过button.clickEvents.push()方法把这个EventHandler对象推进去。
// here is your component file, file name = MyComponent.js
cc.Class({
extends: cc.Component,
properties: {},
onLoad: function () {
var clickEventHandler = new cc.Component.EventHandler();
clickEventHandler.target = this.node; // 这个 node 节点是你的事件处理代码组件所属的节点
clickEventHandler.component = "MyComponent";// 这个是代码文件名
clickEventHandler.handler = "callback";
clickEventHandler.customEventData = "foobar";
var button = this.node.getComponent(cc.Button);
button.clickEvents.push(clickEventHandler);
},
callback: function (event, customEventData) {
// 这里 event 是一个 Event 对象，你可以通过 event.target 取到事件的发送节点
var node = event.target;
var button = node.getComponent(cc.Button);
// 这里的 customEventData 参数就等于你之前设置的 "foobar"
}
});
另外一种更简单的方式，但局限性在于在事件回调里面无法 获得当前点击按钮的屏幕坐标点，并且也无法传递按钮的屏幕坐标点。
this.button.node.on('click', this.callback, this);
Layout 是一种容器组件，容器能够开启自动布局功能，自动按照规范排列所有子物体，方便用户制作列表、翻页等功能。
SafeArea 会将所在节点的布局适配到 iPhone X 等异形屏手机的安全区域内，可适配 Android 和 iOS 设备，通常用于 UI 交互区域的顶层节点。
EditBox 是一种文本输入组件，该组件让你可以轻松获取用户输入的文本。
Editing Did Began该事件在用户点击输入框获取焦点的时候被触发。
Text Changed该事件在用户每一次输入文字变化的时候被触发。
Editing Did Ended在单行模式下面，一般是在用户按下回车或者点击屏幕输入框以外的地方调用该函数。 如果是多行输入，一般是在用户点击屏幕输入框以外的地方调用该函数。
Editing Return在用户按下回车键或者在移动端上点击软键盘的完成按钮时，该事件会被触发。
如果是单行输入框，按回车键还会使输入框失去焦点。
同样可以通过cc.Component.EventHandler 或者是editbox.node.on('editing-did-began', ...)的方式
RichText 组件用来显示一段带有不同样式效果的文字，你可以通过一些简单的 BBCode 标签来设置文字的样式。标签与标签是支持嵌套的，且嵌套规则跟 HTML 是一样的。
富文本组件全部由 JS 层实现，采用底层的 Label 节点拼装而成，并且在上层做排版逻辑。这意味着，你新建一个复杂的富文本，底层可能有十几个 label 节点，而这些 label 节点都是采用系统字体渲染的。所以一般情况下，你不应该在游戏的主循环里面频繁地修改富文本的文本内容，这可能会导致性能比较低。另外，如果能不使用富文本组件，就尽量使用普通的文本组件，并且 BMFont 的效率是最高的。
ScrollView 是一种带滚动功能的容器，它提供一种方式可以在有限的显示区域内浏览更多的内容。通常 ScrollView 会与 Mask 组件配合使用，同时也可以添加 ScrollBar 组件来显示浏览内容的位置。
ScrollBar 允许用户通过拖动滑块来滚动一张图片，它与 Slider 组件有点类似，但是 ScrollBar 主要是用于滚动，而 Slider 则用来设置数值。ScrollBar 一般不会单独使用，它需要与 ScrollView 配合使用，另外 ScrollBar 需要指定一个 Sprite 组件，即属性面板里面的 Handle。通常我们还会给 ScrollBar 指定一张背景图片，用来指示整个 ScrollBar 的长度或者宽度。
ProgressBar（进度条）经常被用于在游戏中显示某个操作的进度，在节点上添加 ProgressBar 组件，然后给该组件关联一个 Bar Sprite 就可以在场景中控制 Bar Sprite 来显示进度了。
Toggle 是一个 CheckBox，当它和 ToggleGroup 一起使用的时候，可以变成 RadioButton。toggle.node.on('toggle', ...)
ToggleContainer 不是一个可见的 UI 组件，它可以用来修改一组 Toggle 组件的行为。当一组 Toggle 属于同一个 ToggleContainer 的时候，任何时候只能有一个 Toggle 处于选中状态。ToggleContainer 一般不会单独使用，它需要与 Toggle 配合使用来实现 RadioButton 的单选效果。
Slider 是一个滑动器组件。slider.node.on('slide', ...)
PageView 是一种页面视图容器 pageView.node.on('page-turning', ...) 添加回调
PageviewIndicator 用于显示 PageView 当前的页面数量和标记当前所在的页面。
BlockInputEvents 组件将拦截所属节点 bounding box 内的所有输入事件（鼠标和触摸），防止输入穿透到下层节点，一般用于上层 UI 的背景。