《组件》专题

本篇文档将介绍 UI 系统中常用的非核心控件，使用核心渲染组件和对齐策略，这些控件将构成我们游戏中 UI 的大部分交互部分。您将会了解以下 UI 控件的用法： ScrollView（滚动视图）、ScrollBar（滚动条）和 Mask（遮罩） Button（按钮） ProgressBar（进度条） EditBox（输入框） 以下介绍的 UI 控件都可以通过 层级管理器 左上角创建节点菜单中的 创建

Graphics 组件提供了一系列绘画接口，这些接口参考了 canvas 的绘画接口来进行实现。 在 层级管理器 中选中一个节点，然后点击 属性检查器 下方的 添加组件 按钮，从 渲染组件 中选择 Graphics，即可添加 Graphics 组件到节点上。 绘图属性 属性 功能说明 lineCap 设置或返回线条的结束端点样式 lineJoin 设置或返回两条线相交时，所创建的拐角类型 line

WebView 是一种显示网页的组件，该组件让你可以在游戏里面集成一个小的浏览器。由于不同平台对于 WebView 组件的授权、API、控制方式都不同，还没有形成统一的标准，所以目前只支持 Web、iOS 和 Android 平台。 点击 属性检查器 下方的 添加组件 按钮，然后从 UI 组件 中选择 WebView，即可添加 WebView 组件到节点上。 WebView 的脚本接口请参考 We

VideoPlayer 是一种视频播放组件，可通过该组件播放本地和远程视频。 播放本地视频： 播放远程视频： 点击 属性检查器 下面的 添加组件 按钮，然后从 UI 组件 中选择 VideoPlayer，即可添加 VideoPlayer 组件到节点上。 VideoPlayer 的脚本接口请参考 VideoPlayer API。 VideoPlayer 属性 属性 功能说明 Resource Typ

DragonBones 组件可以对骨骼动画（DragonBones）资源进行渲染和播放。 在 层级管理器 中选中需要添加 DragonBones 组件的节点，然后点击 属性检查器 下方的 添加组件 -> 渲染组件 -> DragonBones 按钮，即可添加 DragonBones 组件到节点上。 DragonBones 组件在脚本中的操作请参考 example-cases 中的 DragonBo

Spine 组件支持 Spine 导出的数据格式，并对骨骼动画（Spine）资源进行渲染和播放。 选中节点，点击 属性检查器 下方的 添加组件 -> 渲染组件 -> Spine Skeleton 按钮，即可添加 Spine 组件到节点上。 Spine 的脚本接口请参考 Skeleton API。 Spine 属性 属性 功能说明 Skeleton Data 骨骼信息数据，拖拽 Spine 导出后的

TiledTile 组件可以单独对某一个地图块进行操作。 创建方式 1、通过编辑器创建 在创建 TiledMap 组件 过程中 自动生成 的 Layer 节点下创建一个空节点。然后选中该空节点，点击 属性检查器 下方的 添加组件 -> 渲染组件 -> TiledTile，即可添加 TiledTile 组件到节点上。再通过设置 TiledTile 组件上的属性来操作地图块。 相关 TiledTile

TiledMap（地图）用于在游戏中显示 TMX 格式的地图。 点击 属性检查器 下方的 添加组件 按钮，然后从 渲染组件 中选择 TiledMap，即可添加 TiledMap 组件到节点上。 TiledMap 的脚本接口请参考 TiledMap API。 TiledMap 属性 属性 功能说明 Tmx Asset 指定 .tmx 格式的地图资源 详细说明 添加 TiledMap 组件之后，从 资

概述 该组件是用来读取 粒子资源 数据，并且对其进行一系列例如播放、暂停、销毁等操作。 创建方式 ParticleSystem 组件可通过编辑器和脚本两种方式创建，如下所示 1、通过编辑器创建 点击 属性检查器 下方的 添加组件 按钮，然后从 渲染组件 中选择 ParticleSystem，即可添加 ParticleSystem 组件到节点上。 2、通过脚本创建 // 创建一个节点 var

MotionStreak（拖尾）是运动轨迹，用于在游戏对象的运动轨迹上实现拖尾渐隐效果。 点击 属性检查器 下方的 添加组件 按钮，然后从 其他组件 中选择 MotionStreak，即可添加 MotionStreak 组件到节点上。 拖尾的脚本接口请参考 MotionStreak API。 MotionStreak 属性 属性 功能说明 fadeTime 拖尾的渐隐时间，以秒为单位。 minSe

Mask 用于规定子节点可渲染的范围，带有 Mask 组件的节点会使用该节点的约束框（也就是 属性检查器 中 Node 组件的 Size 规定的范围）创建一个渲染遮罩，该节点的所有子节点都会依据这个遮罩进行裁剪，遮罩范围外的将不会渲染。 点击 属性检查器 下面的 添加组件 按钮，然后从 渲染组件 中选择 Mask，即可添加 Mask 组件到节点上。注意该组件不能添加到有其他渲染组件（如 Sprit

LabelShadow 组件可以为 Label 组件添加阴影效果，但只能用于系统字体或者 TTF 字体。且当 Label 组件的 Cache Mode 属性设置为 CHAR 时不生效。 点击 属性检查器 下面的 添加组件 按钮，然后从 渲染组件 中选择 LabelShadow，即可添加 LabelShadow 组件到节点上。 描边脚本接口请参考 LabelShadow API。 LabelShad

LabelOutline 组件将为所在节点上的 Label 组件添加描边效果，只能用于系统字体或者 TTF 字体。 点击 属性检查器 下面的 添加组件 按钮，然后从 渲染组件 中选择 LabelOutline，即可添加 LabelOutline 组件到节点上。 LabelOutline 组件的脚本接口请参考 LabelOutline API。 LabelOutline 属性 属性 功能说明 Col

Label 组件用来显示一段文字，文字可以是系统字体、TrueType 字体、BMFont 字体或艺术数字。另外，Label 还具有排版功能。 点击 属性检查器 下面的 添加组件 按钮，然后从 渲染组件 中选择 Label，即可添加 Label 组件到节点上。 Label 属性 属性 功能说明 String 文本内容字符串。 Horizontal Align 文本的水平对齐方式。可选值有 LEFT

Sprite（精灵）是 2D 游戏中最常见的显示图像的方式，在节点上添加 Sprite 组件，就可以在场景中显示项目资源中的图片。 点击 属性检查器 下面的 添加组件 按钮，然后从 渲染组件 中选择 Sprite，即可添加 Sprite 组件到节点上。 脚本接口请参考 Sprite API。 Sprite 属性 属性 功能说明 Atlas Sprite 显示图片资源所属的 Atlas 图集资源。（