推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 动画剪辑 动画剪辑（Animation Clip）是一份动画的声明数据，即包含动画数据的资源，是动画系统的核心之一。将动画剪辑挂载到 动画组件 上，就能够将这份动画数据应用到动画组件所在的节点上。 目前 Creator 支持从外部导入动画，或者直接在 Creator 内部创建一个全新的动画剪辑。 Creator 内部创建的动画 通过 动画编辑器 可以直接创建全新的动画剪辑，并进行编辑和预览，详情请参考 使用动画编辑器。 也可以通过脚本创建，详情请参考 程序化编辑动画剪辑。 外部导入的骨骼动画 外部导入的动画大概包括以下几种： 1. 第三方美术工具生产的骨骼动画 模型导入后附带的骨骼动画 带动画的模型导入后，会同时导入模型中包含的动画。这个动画和内部新建资源的使用方式是一样的，骨骼动画的裁剪可以参考 模型资源的动画模块介绍。 Creator 从 v3.4 开始引入了全新的 Marionette 动画系统，实现了由状态机控制的骨骼动画流程，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 动画系统 Cocos Creator 内置了通用的动画系统用以实现基于关键帧的动画。除了支持标准的位移、旋转、缩放动画和帧动画之外，还支持任意组件属性和用户自定义属性的驱动，再加上可任意编辑的时间曲线和创新的移动轨迹编辑功能，能够让内容生产人员不写一行代码就制作出细腻的各种动态效果。 注意：Cocos Creator 自带的动画编辑器适用于制作一些不太复杂的、需要与逻辑进行联动的动画，例如 UI 动画。如果要制作复杂的特效、角色动画、嵌套动画等，可以考虑改用 Spine、DragonBones 或者 3D 模型骨骼动画编辑器进行制作。 内容 * 动画剪辑（Animation Clip）：包含了动画数据的资源，可复用。动画剪辑可以通过 动画编辑器 产出，或者通过某些已经包含了骨骼动画的外部资源导入。 * 动画组件参考：动画组件可以以动画方式驱动所在节点和子节点上的节点/组件属性，包括用户自定义脚本中的属性。 * 使用动画编辑器：了解动画编辑器的使用，通过动画编辑器创建/修改/生成动画剪辑

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 制作可任意拉伸的 UI 图像 UI 系统核心的设计原则是能够自动适应各种不同的设备屏幕尺寸，因此我们在制作 UI 时需要正确设置每个控件元素的尺寸（size），并且让每个控件元素的尺寸能够根据设备屏幕的尺寸进行自动的拉伸适配。为了实现这一点，就需要使用九宫格格式的图像来渲染这些元素。这样即使使用很小的原始图片也能生成覆盖整个屏幕的背景图像，一方面节约游戏包体空间，另一方面能够灵活适配不同的排版需要。 上图右边为原始贴图大小的显示，左边是选择 Sliced 模式并放大 size 属性后的显示效果。 编辑图像资源的九宫格切分 要使用可以无限放大的九宫格图像效果，我们需要先对图像资源进行九宫格切分。首先打开 Sprite 编辑器，在 资源管理器 中选中图像资源，然后点击 属性检查器 最下面的 编辑 按钮。如果您的窗口高度不够，可能需要向下滚动 属性检查器 才能看到下面的按钮。 打开 Sprite 编辑器 以后，可以看到图像周围有一圈绿色的线条，表示当前九宫格分割线的位置。将鼠标移动到分割线上，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 制作动态生成内容的列表 UI 界面只有静态页面内容是不够的，我们会遇到很多需要由一组数据动态生成多个元素组成的 UI 面板，比如选人界面、物品栏、选择关卡等等。 准备数据 以物品栏为例，我们要动态生成一个物品，大概需要这样的一组数据： * 物品 id * 图标 id，我们可以在另一张资源表中建立图标 id 到对应 spriteFrame 的索引 * 物品名称 * 出售价格 * ... 下面我们将会结合脚本介绍如何定义和使用数据，如果您对 Cocos Creator 的脚本系统还不熟悉，可以先从 脚本开发指南 一章开始学习。 自定义数据类 对于大多数游戏来说，这些数据通常都来自于服务器或本地的数据库，现在我们为了展示流程，暂时把数据存在列表组件里就可以了。您可以新建一个脚本 ItemList.ts，并添加如下的属性： @ccclass('Item') export class Item

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 文字排版 文字组件（Label） 是核心渲染组件之一，您需要了解如何设置文字的排版，才能在 UI 系统进行多分辨率适配和对齐设置时显示完美的效果。 文字在约束框中对齐 和其他渲染组件一样，Label 组件的排版也是基于 UITransform 组件所拥有的尺寸信息（contentSize），也就是约束框（Bounding Box）所规定的范围。 上图所示就是 Label 渲染的文字在蓝色约束框内显示的效果。Label 中以下的属性决定了文字在约束框中显示的位置： * Horizontal Align（水平对齐）：文字在约束框中水平方向的对齐准线，可以从 Left、Right、Center 三种位置中选择。 Vertical Align（垂直对齐）：文字在约束框中垂直方向的对齐准线，可以从 Top、Bottom、Center 三种位置中选择。 上图中水平方向对齐位置设置为 Right，垂直方向的对齐位置设为了 Bottom，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 对齐策略 要实现完美的多分辨率适配效果，UI 元素按照设计分辨率中规定的位置呈现是不够的，当屏幕宽度和高度发生变化时，UI 元素要能够智能感知屏幕边界的位置，才能保证出现在屏幕可见范围内，并且分布在合适的位置。我们通过 Widget（对齐挂件） 来实现这种效果。 下面我们根据要对齐元素的类别来划分不同的对齐工作流： 需要贴边对齐的按钮和小元素 对于暂停菜单、游戏金币这一类面积较小的元素，通常只需要贴着屏幕边对齐就可以了。这时只要几个简单的步骤： 1. 在 层级管理器 中创建 2D 对象时会默认自动创建一个 Canvas 节点作为其父节点，这些元素节点都需要放在 Canvas 节点下 2. 在元素节点上添加 Widget 组件 3. 以对齐左下角为例，开启 Left 和 Bottom 的对齐。 然后设置好节点和屏幕边缘的距离，下图中左边距设为 40px，下边距设为 30px。

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 多分辨率适配方案 Cocos Creator 3.0 在整体设计上沿用了 Cocos Creator 2.x 一套资源适配多种分辨率屏幕的方案。简单概括来说，我们通过以下几个部分完成多分辨率适配解决方案： * Canvas（画布） 组件随时获得设备屏幕的实际分辨率并对场景中所有渲染元素进行适当的缩放。 * Widget（对齐挂件） 组件添加给 UI 节点，能够根据需要将元素对齐目标节点（默认是父节点）的不同参考位置。 * Label（文字） 组件内置了提供各种动态文字排版模式的功能，当文字的约束框由于 Widget 对齐要求发生变化时，文字会根据需要呈现完美的排版效果。 * Sliced Sprite（九宫格精灵图） 则提供了可任意指定尺寸的图像，同样可以满足各式各样的对齐要求，在任何屏幕分辨率上都显示高精度的图像。 接下来我们首先了解设计分辨率、屏幕分辨率的概念，才能理解 Canvas（画布） 组件的缩放作用。 设计分辨率和屏幕分辨率 设计分辨率 是内容生产者在制作场景时使用的分

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 VideoPlayer 组件参考 VideoPlayer 是一种视频播放组件，可通过该组件播放本地和远程视频。 播放本地视频： 播放远程视频： 点击 属性检查器 下面的 添加组件 按钮，然后从 UI 组件 中选择 VideoPlayer，即可添加 VideoPlayer 组件到节点上。 VideoPlayer 的脚本接口请参考 VideoPlayer API。 VideoPlayer 属性 属性功能说明Resource Type视频来源的类型，目前支持本地（LOCAL）视频和远程（REMOTE）视频 URLRemote URL当 Resource Type 为 REMOTE 时显示的字段，填入远程视频的 URLClip当 Resource Type 为 LOCAL

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 WebView 组件参考 WebView 是一种显示网页的组件，该组件让你可以在游戏里面集成一个小的浏览器。由于不同平台对于 WebView 组件的授权、API、控制方式都不同，还没有形成统一的标准，所以目前只支持 Web、iOS 和 Android 平台。 点击 属性检查器 下方的 添加组件 按钮，然后从 UI 组件 中选择 WebView，即可添加 WebView 组件到节点上。 WebView 的脚本接口请参考 WebView API。 WebView 属性 属性功能说明Url指定一个 URL 地址，这个地址以 http 或者 https 开头，请填写一个有效的 URL

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 UIOpacity（透明度设置）组件参考 该组件会为节点记录一个透明度修改标识用来影响到后续的渲染节点。一般用于非渲染节点，如果作用在渲染节点上会形成透明度叠加现象。渲染节点可以通过设置 color 的 alpha 通道来设置透明度。 注意：该组件仅对根节点上有 Canvas 或 RenderRoot2D 组件的节点生效。 使用方法如下： 也可以通过代码设置透明度： const opacityComp = this.getComponent(UIOpacity); opacityComp.opacity = 157; 遮罩的组件接口请参考 UIOpacity API。 关于使用可以参考范例 UIOpacity（GitHub | Gitee）。 UIOpacity 属性 属性功能说明Opacity透明度 由3D建模学习工作室 翻译整理，转载请注明出处！ 上一篇：Cocos Creator：UICoordinateTracker 组件参考 (mvrlink.

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 PageViewIndicator 组件参考 PageViewIndicator 用于显示 PageView 当前的页面数量和标记当前所在的页面。 点击 属性检查器 下面的 添加组件 按钮，然后选择 UI -> PageViewIndicator 即可添加 PageViewIndicator 组件到节点上。 PageViewIndicator 的脚本接口请参考 PageViewIndicator API。 关于使用可以参考范例 PageView（GitHub | Gitee）。 PageViewIndicator 属性 属性功能说明spriteFrame每个页面标记显示的图片direction页面标记摆放方向，分别为 水平方向 和 垂直方向cellSize每个页面标记的大小spacing每个页面标记之间的边距 详细说明 PageViewIndicator 一般不会单独使用，它需要与 PageView 配合使用，可以通过相关属性，来进行创建相对应页面的数量的标记，当你滑动到某个页面的

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 PageView 组件参考 PageView 是一种页面视图容器. 点击 属性检查器 下面的 添加组件 按钮，然后选择 UI/PageView 即可添加 PageView 组件到节点上。 页面视图的脚本接口请参考 PageView API。 关于使用可以参考范例 PageView（GitHub | Gitee）。 PageView 属性 属性功能说明SizeMode页面视图中每个页面大小类型，目前有 Unified 和 Free 类型。Content它是一个节点引用，用来创建 PageView 的可滚动内容Direction页面视图滚动方向ScrollThreshold滚动临界值，默认单位百分比，当拖拽超出该数值时，松开会自动滚动下一页，小于时则还原AutoPageTurningThreshold快速滑动翻页临界值，当用户快速滑动时，会根据滑动开始和结束的距离与时间计算出一个速度值，该值与此临界值相比较，如果大于临界值，则进行自动翻页Inertia否开启滚动惯性Brake开启惯性后，在用

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Slider 组件参考 Slider 是一个滑动器组件。 点击 属性检查器 下面的 添加组件 按钮，选择 UI -> Slider 即可添加 Slider 组件到节点上。也可以直接在 层级管理器 中点击右上角的 + 按钮，然后选择 UI 组件 -> Slider 创建一个 Slider 节点。 滑动器的脚本接口请参考 Slider API。 关于使用可以参考范例 Slider（GitHub | Gitee）。 Slider 属性 属性功能说明handle滑块按钮部件，可以通过该按钮进行滑动调节 Slider 数值大小direction滑动器的方向，分为横向和竖向progress当前进度值，该数值的区间是 0-1 之间slideEvents滑动器组件事件回调函数 Slider

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Toggle 组件参考 Toggle 是一个 CheckBox，当它和 ToggleContainer 一起使用的时候，可以变成 RadioButton。 点击 属性检查器 下面的 添加组件 按钮，然后选择 UI/Toggle 即可添加 Toggle 组件到节点上。 Toggle 的组件接口请参考 Toggle API。 关于使用可以参考范例 Toggle（GitHub | Gitee）。 Toggle 属性 属性功能说明isChecked布尔类型，如果这个设置为 true，则 check mark 组件会处于 enabled 状态，否则处于 disabled 状态。checkMarkSprite 类型，Toggle

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 LabelOutline 组件参考 LabelOutline 组件会为所在节点的 Label 添加描边效果，不支持 BMFont 字体。 点击 属性检查器 下方的 添加组件 按钮，然后从 UI 中选择 LabelOutline，即可添加 LabelOutline 组件到节点上。 LabelOutline 属性 属性功能说明Color字体发光边缘颜色Width字体发光边缘宽度 由3D建模学习工作室 翻译整理，转载请注明出处！ 上一篇：Cocos Creator：ProgressBar 组件参考 (mvrlink.com) 下一篇：Cocos Creator：LabelShadow 组件参考 (mvrlink.com)

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 ProgressBar 组件参考 ProgressBar（进度条）经常被用于在游戏中显示某个操作的进度，在节点上添加 ProgressBar 组件，然后给该组件关联一个 Bar Sprite 就可以在场景中控制 Bar Sprite 来显示进度了。 点击 属性检查器 下面的 添加组件 按钮，然后选择 UI/ProgressBar 即可添加 ProgressBar 组件到节点上。 进度条的脚本接口请参考 ProgressBar API。 关于使用可以参考范例 Progress（GitHub | Gitee）。 ProgressBar 属性 属性功能说明Bar Sprite进度条渲染所需要的 Sprite 组件，可以通过拖拽一个带有 Sprite 组件的节点到该属性上来建立关联。Mode支持 HORIZONTAL（水平）、VERTICAL（

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 ScrollBar 组件参考 ScrollBar 允许用户通过拖动滑块来滚动一张图片，它与 Slider 组件有点类似，但是它主要是用于滚动而 Slider 则用来设置数值。 点击 属性检查器 下面的 添加组件 按钮，然后选择 UI/ScrollBar 即可添加 ScrollBar 组件到节点上。 滚动条的脚本接口请参考 ScrollBar API。 ScrollBar 属性 属性功能说明HandleScrollBar 前景图片，它的长度/宽度会根据 ScrollView 的 content 的大小和实际显示区域的大小来计算。Direction滚动方向，目前包含水平和垂直两个方向。Enable Auto Hide是否开启自动隐藏，如果开启了，那么在 ScrollBar 显示后的 Auto Hide Time

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 ScrollView 组件参考 ScrollView 是一种带滚动功能的容器，它提供一种方式可以在有限的显示区域内浏览更多的内容。通常 ScrollView 会与 Mask 组件配合使用，同时也可以添加 ScrollBar 组件来显示浏览内容的位置。 点击 属性检查器 下面的 添加组件 按钮，然后选择 UI/ScrollView 即可添加 ScrollView 组件到节点上。 滚动视图的脚本接口请参考 ScrollView API。 关于使用可以参考范例 ScrollView（GitHub | Gitee）。 ScrollView 属性 属性功能说明content它是一个节点引用，用来创建 ScrollView 的可滚动内容，通常这可能是一个包含一张巨大图片的节点。Horizontal布尔值，是否允许横向滚动。Vertical布尔值，是否允许纵向滚动。Inertia滚动的时候是否有加速度。Brake浮点数，滚动之后的减速系数。取值范围是

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 EditBox 组件参考 EditBox 是一种文本输入组件，该组件让你可以轻松获取用户输入的文本。 点击 属性检查器 下面的 添加组件 按钮，然后从 UI/EditBox 即可添加 EditBox 组件到节点上。 EditBox 的脚本接口请参考 EditBox API。 关于使用可以参考范例 EditBox（GitHub | Gitee）。 EditBox 属性 属性功能说明BackgroundImage输入框背景节点上挂载的 Sprite 组件对象FontColor输入框文本的颜色FontSize输入框文本的字体大小InputFlag指定输入标识：可以指定输入方式为密码或者单词首字母大写（仅支持 Android 平台）InputMode指定输入模式：ANY 表示多行输入，其它都是单行输入，移动平台上还可以指定键盘样式。LineHeight输入框文本的行高MaxLength输入框最大允许输入的字符个数Placeholder输入框占位符的文本内容PlaceholderFontColor