推荐：将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

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Layout 组件参考 Layout 是一种容器组件，容器能够开启自动布局功能，自动按照规范排列所有子物体，方便用户制作列表、翻页等功能。 点击 属性检查器 下面的 添加组件 按钮，然后选择 UI -> Layout 即可添加 Layout 组件到节点上。 布局的组件接口请参考 Layout API。 具体使用方法可参考范例 Layout（GitHub | Gitee）。 Layout 属性 属性功能说明Type布局类型，支持 NONE、HORIZONTAL、VERTICAL 和 GRID。ResizeMode缩放模式，支持 NONE、CHILDREN 和 CONTAINER。PaddingLeft排版时，子物体相对于容器左边框的距离。PaddingRight排版时，子物体相对于容器右边框的距离。

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Button（按钮）组件参考 Button 组件可以响应用户的点击操作，当用户点击 Button 时，Button 自身会有状态变化。另外，Button 还可以让用户在完成点击操作后响应一个自定义的行为。 点击 属性检查器 下面的 添加组件 按钮，然后从 添加 UI 组件 中选择 Button，即可添加 Button 组件到节点上。 按钮的脚本接口请参考 Button API。 Button 属性 属性功能说明TargetNode 类型，当 Button 发生 Transition 的时候，会相应地修改 Target 节点的 SpriteFrame，颜色或者 Scale。Interactable布尔类型，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Widget 组件参考 Widget (对齐挂件) 是一个很常用的 UI 布局组件。它能使当前节点自动对齐到父物体的任意位置，或者约束尺寸，让你的游戏可以方便地适配不同的分辨率。对齐方案详细说明请参考 对齐方案 点击 属性检查器 下面的 添加组件 按钮，然后选择 UI/Widget 即可添加 Widget 组件到节点上。 对齐挂件的脚本接口请参考 Widget API。 关于使用可以参考范例 Widget（GitHub | Gitee）。 选项 选项说明备注Top对齐上边界选中后，将在旁边显示一个输入框，用于设定当前节点的上边界和父物体的上边界之间的距离。Bottom对齐下边界选中后，将在旁边显示一个输入框，用于设定当前节点的下边界和父物体的下边界之间的距离。Left对齐左边界选中后，将在旁边显示一个输入框，用于设定当前节点的左边界和父物体的左边界之间的距离。Right对齐右边界选中后，将在旁边显示一个输入框，用于设定当前节点的右边界和父物体的右边界之间的距离。HorizontalCen

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Canvas（画布）组件参考 RenderRoot2D 组件所在的节点是 2D 渲染组件数据收集的入口，而 Canvas（画布） 组件继承自 RenderRoot2D 组件，所以 Canvas 组件也是数据收集入口。场景中 Canvas 节点可以有多个，所有 2D 渲染元素都必须作为 RenderRoot2D 的子节点才能被渲染。 Canvas 节点除了继承自 RenderRoot2D 的数据入口能力，其本身还作为屏幕适配的重要组件，在游戏制作上面对多分辨率适配也起到关键作用，具体请参考 多分辨率适配方案。Canvas 的设计分辨率和适配方案统一通过 项目设置 配置。 Canvas 本身和相机并无关系，其更主要的作用是上文叙述的屏幕适配，所以 Canvas 的渲染只取决于和其节点 layer 对应的 camera。所以可以通过控制

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

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 MotionStreak（拖尾）组件参考 MotionStreak（拖尾）是运动轨迹，用于在游戏对象的运动轨迹上实现拖尾渐隐效果。 点击 属性检查器 下方的 添加组件 按钮，然后从 Effects 中选择 MotionStreak，即可添加 MotionStreak 组件到节点上。 具体的使用方式可以参考 MotionStreak (GitHub | Gitee) 范例。 拖尾的脚本接口请参考 MotionStreak API。 MotionStreak 属性 属性功能说明CustomMaterial自定义材质，使用方法请参考 自定义材质。Preview是否启用预览。若勾选该项，则可在 场景编辑器 中预览拖尾效果FadeTime拖尾的渐隐时间，以秒为单位。MinSeg最小的片段长度（渐隐片段的大小）。拖尾条带相连顶点间的最小距离。Stroke拖尾的宽度。Texture拖尾的贴图。FastMode是否启用快速模式。当启用快速模式，新的顶点会被更快地添加，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 TiledMap 组件参考 TiledMap（地图）用于在游戏中显示 TMX 格式的地图。 点击 属性检查器 下方的 添加组件 -> Components -> TiledMap 按钮，即可添加 TiledMap 组件到节点上。 TiledMap 的脚本接口请参考 TiledMap API。 TiledMap 属性 属性功能说明Tmx Asset指定 .tmx 格式的地图资源（请将 .tmx 和 .tsx 放置于同一文件夹）EnableCulling启用裁剪，如果需要旋转地图或者把地图置于 3D 相机中，则需要关闭裁剪。如果地图块不是非常多，例如小于 5000 块，那么关闭裁剪能减少 CPU 的运算负担，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 DragonBones ArmatureDisplay 组件参考 ArmatureDisplay 组件可以对 DragonBones（龙骨）资源进行渲染和播放。 在 层级管理器 中选中需要添加 ArmatureDisplay 组件的节点，然后点击 属性检查器 下方的 添加组件 -> DragonBones -> ArmatureDisplay 按钮，即可添加 ArmatureDisplay 组件到节点上。 * ArmatureDisplay 组件的使用方法可参考 DragonBones（GitHub | Gitee）范例。 * DragonBones 相关的脚本接口请参考 DragonBones API。 DragonBones 属性 属性功能说明CustomMaterial自定义材质，可用于实现溶解、外发光等渲染效果。详情请参考 自定义材质。Color设置骨骼动画颜色DragonAsset骨骼信息数据，包含了骨骼信息（绑定骨骼动作、slots、

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Spine Skeleton 组件参考 Spine Skeleton 组件支持 Spine 官方工具导出的数据格式，并对 Spine（骨骼动画）资源进行渲染和播放。 在 层级管理器 中选中需要添加 ArmatureDisplay 组件的节点，然后点击 属性检查器 下方的 添加组件 -> Spine -> Skeleton 按钮，即可添加 Skeleton 组件到节点上。 * Spine Skeleton 组件的使用方法可参考 Spine（GitHub | Gitee）范例。 * Spine Skeleton 相关的脚本接口请参考 Skeleton API。 Spine 属性 属性功能说明CustomMaterial自定义材质，可用于实现溶解、外发光等渲染效果。

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 RichText 组件参考 RichText 组件用来显示一段带有不同样式效果的文字，你可以通过一些简单的 BBCode 标签来设置文字的样式。目前支持的样式有：颜色（color）、字体大小（size）、字体描边（outline）、加粗（b）、斜体（i）、下划线（u）、换行（br）、图片（img）和点击事件（on），并且不同的 BBCode 标签是可以支持相互嵌套的。 更多关于 BBCode 标签的内容，请参考本文档的 BBCode 标签格式说明 小节。 点击 属性检查器 下面的 添加组件 按钮，然后选择 UI/Render/RichText 即可添加

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Mask（遮罩）组件参考 Mask 用于规定子节点可渲染的范围，默认带有 Mask 组件的节点会使用该节点的约束框（也就是 属性检查器 中 Node 组件的 ContentSize 规定的范围）创建一个矩形渲染遮罩，该节点的所有子节点都会依据这个遮罩进行裁剪，遮罩范围外的将不会渲染。 点击 属性检查器 下面的 添加组件 按钮，然后从 UI 中选择 Mask，即可添加 Mask 组件到节点上。注意该组件不能添加到有其他渲染组件（如 Sprite、Label 等）的节点上。 遮罩的组件接口请参考 Mask API。 关于使用可以参考范例 Mask（GitHub | Gitee）。 添加 Mask 组件后，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 Sprite 组件参考 Sprite（精灵）是 2D/3D 游戏最常见的显示图像的方式，在节点上添加 Sprite 组件，就可以在场景中显示项目资源中的图片。 点击 属性检查器 下面的 添加组件 按钮，然后选择 2D/Sprite 即可添加 Sprite 组件到节点上。 图像的组件接口请参考 Sprite API。 关于使用可以参考范例 Sprite（GitHub | Gitee）。 Sprite 属性 属性功能说明Type渲染模式，包括普通（Simple）、九宫格（Sliced）、平铺（Tiled）和填充（Filled）四种模式，详情请参考下文 渲染模式 部分的内容CustomMaterial自定义材质，使用方法参考

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 调试渲染器（Debug-Renderer） 调试渲染器是引擎提供的一种批量渲染屏幕文字的功能接口，主要用于调试，输出任意的文字调试信息到屏幕上。目前仅支持原生平台。 其效果图如下所示： 使用方式 1. 确保在项目设置面板中，调试渲染器处于勾选状态 1. 由于每帧渲染完这些文字后会清空顶点缓存，所以需要在 update 等函数中，每帧添加调试文本，示例 TS 代码如下： import { native, Vec2 } from 'cc'; import { NATIVE } from 'cc/env'; if (NATIVE) { native.DebugRenderer.getInstance().addText("Stanley", new Vec2(100, 100)); } C++ 接口描述 void addText(const

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 几何渲染器（Geometry-Renderer） 几何渲染器是引擎提供的一种批量渲染各种几何体的功能接口，主要用于调试（比如显示物体的包围盒）及 Cocos Creator 的 gizmo 批量显示。 几何渲染器的效果展示如图： 几何渲染器的功能特性如图： 其中： * solid：是否支持实心模式，如果不支持则显示线框模式 * depth test：是否支持深度测试，如果支持则被遮挡部分半透明显示，未被遮挡部分不透明显示，如果不支持则全部不透明显示 * lighting：是否支持简单光照，如果不支持就使用无光模式 * transform：是否支持变换，如果支持，开发者可传入一个变换矩阵，变换矩阵会作用到几何体的顶点上，方便显示任意坐标空间的几何体 接口描述 几何渲染器位于 geometry-render.ts 和原生 GeometryRenderer.h 内，开发者可根据需求查看。其支持的几何体描述如下： 支持的几何体类型 类型接口虚线addDashedLine线段add

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 全局雾 全局雾用于在游戏中模拟室外环境中的雾效果。在游戏中除了用于雾效表现外，还可以用于隐藏摄像机远剪切平面外的模型来提高渲染的性能。 全局雾的类型目前包括 线性雾、指数雾、指数平方雾、层雾 四种，详情请参考下文 全局雾类型 部分的内容。 开启全局雾 在 层级管理器 中选中场景根节点，然后在 属性检查器 的 Fog 组件中勾选 Enabled 属性即可开启全局雾。 精确雾效计算（Accurate） 在 v3.4 之前，Creator 默认使用的是基于 顶点 的雾效计算，这在 顶点数较少而体积较大 的物体上会出现异常的雾效过渡效果。因此为了解决该问题，Creator 从 v3.4 开始增加了 Accurate 选项，用于开启基于