推荐：将NSDT场景编辑器加入你 的3D工具链 3D工具集：NSDT简石数字孪生 制作帧动画 我们刚刚了解了属性帧的操作，现在来看看具体怎么创建一个帧动画。 为节点新增 Sprite 组件 首先我们需要让节点能正常显示纹理，所以需要为节点增加Sprite组件。 选中节点后在属性检查器中通过 添加组件 按钮，选择 UI -> Render -> Sprite。 在属性列表中添加 Sprite.spriteFrame 节点可以正常显示纹理后，还需要为纹理创建一个属性轨道。 在动画编辑器属性列表旁点击 +，然后选择 Sprite -> spriteFrame 添加帧 从资源管理器中，将纹理拖拽到属性帧区域，放在 Sprite.spriteFrame 轨道上。 再将下一帧需要显示的纹理拖到指定位置，然后点击播放就可以预览刚刚创建的动画了。 如果同时拖拽多个纹理到属性轨道上，轨道上将按钮纹理选中的顺序，将其按照顺序，以工具栏上显示间隔数来排列生成关键帧。 排列修改关键帧间隔 帧动画的间隔帧数通常是固定的，有时添加了多个张纹理后，想要调整间隔数，就可以先在工具栏上

推荐：将NSDT场景编辑器加入你 的3D工具链 3D工具集：NSDT简石数字孪生 编辑动画序列 在节点上挂载了动画剪辑后，点击进入动画编辑模式就可以进入动画编辑模式了，之后便可以在动画剪辑中创建一些动画帧数据。 首先需要了解一下动画属性，动画属性包括了节点自有的 position、rotation 等属性，也包含了组件 Component 中自定义的属性。 组件包含的属性前会加上组件的名字，比如 Sprite.spriteFrame。 属性轨道上对应的蓝色棱形就是关键帧。 Animation（动画） 组件可以以动画方式驱动所在节点和子节点上的节点和组件属性，包括用户自定义脚本中的属性。根据这个特性，可以灵活实现各种动画需求。具体的动画实现依不同的动画需求，步骤不同，案例可以参考官方的 example-3d 。这里主要介绍一些常见的编辑操作方法，便于快速的编辑实现效果 修改 clip 常见属性 sample： 定义当前动画数据每秒的帧率，默认为 60，这个参数会影响时间轴上每两个整数秒刻度之间的帧数量（也就是两秒之内有多少格）。 speed： 当前动画的播放速度，默认

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 创建Animation组件和动画剪辑 创建 Animation 组件 在每个节点上，我们都可以添加不同的组件。如果我们想在这个节点上创建动画，也必须为它新建一个 Animation 组件。 创建的方法有两种： * 选中相应的节点，在属性检查器中点击下方的添加组件，在 Components 中选择 Animation。 * 打开动画编辑器，然后在层级管理器中选中需要添加动画的节点，在动画编辑器中点击添加 Animation 组件按钮。 具体 Animation 组件的参数使用可以参见Animation组件参考 创建与挂载动画剪辑 现在节点上已经有了 Animation 组件了，但是还没有相应的动画剪辑数据，动画剪辑也有两种创建方式： * 在资源管理器中点击左上方的+，或者右键空白区域，选择 Animation Clip，这时候会在管理器中创建一个名为 'New AnimationClip' 的剪辑文件。 单单创建还是不够的，我们再次在层级管理器中点选刚刚的节点，在属性检查器中找到

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 关于Animation 在制作动画之前首先需要先为节点添加动画组件，并为组件挂载 clip 文件后才能编辑。在此之前，有必要先了解一下 clip 动画剪辑和 Animation 组件的相关概念。 Animation 组件 之前我们了解到 Cocos Creator 3D 是组件式的结构,那么 Animation 也不例外，它也是节点上的一个组件，只有为节点添加动画组件后，才能赋予节点参与到动画的的能力。因而点击相关节点后，如果节点没有动画组件，动画编辑器的界面上将会显示 添加 Animation 组件 按钮，点击即可添加。 Clip 动画剪辑 动画剪辑就是一份动画的声明数据，我们将它挂载到 Animation 组件上，就能够将这份动画数据应用到节点上，一个动画组件可以挂载多份动画剪辑。在没有 clip 的节点上是不能够编辑动画的，点击相关节点后，如果节点只有 Animation

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生. 预览流程简介与常见错误处理 流程简介 由于目前编辑器仅支持浏览器预览，这里仅介绍浏览器预览的流程。 浏览器预览本质上是编辑器开启了一个 express 服务器，在点击预览时打开用户的默认浏览器去访问预览 URL。预览模板里写了一些加载引擎和初始化场景的简单逻辑，而关于用户资源加载主要还是依赖于 setting.js 的生成，因为 setting.js 里面记载了当前项目的资源、脚本以及项目设置信息。预览的 setting.js 是调用构建插件的接口生成的，因而如果 setting.js 没有正常生成可以打开构建调试工具查看。 常见错误处理 在遇到预览无法正常显示时，请先打开开发者工具的 NetWork 查看此时是否有资源或者脚本加载失败。 setting.js 加载失败 在寻找这个问题的原因之前，请先确保在预览前编辑器内没有报错信息。 setting.js 加载失败说明 setting.js 没能正常生成，这时候可以打开 开发者 ——> 构建调试工具

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 偏好设置 偏好设置 面板中提供了编辑器的个性化设置，要打开 偏好设置 面板，请从主菜单的 Cocos Creator 3D -> 偏好设置 菜单进入。 设置可以分成下列几部分： 通用设置 通用设置主要是针对编辑器相关的一些基础数据进行配置。 * 编辑器语言：可以选择中文或英文，修改语言设置后要重新启动 Cocos Creator 才能生效。 * 选择本机 IP 地址：用户可以在本机有多个 IP 地址的情况下，手动选择其中之一作为预览时的默认地址和二维码地址。这里会列出所有本机的 IP，编辑器默认自动挑选一个 IP。 数值调节钮步长：在属性检查器里，所有数值属性输入框的旁边都有一组上下箭头，可以用于步进输入的数值： 当鼠标悬浮在数值属性的名称附近时，光标会变成 这样的形状，然后左右拖动鼠标，也可以按照一定的步进幅度连续增加或减小数值。 以上两种修改数值的方式，默认的步长都是 0.1，

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 资源管理器 资源管理器 面板是我们用来访问和管理项目资源的重要工具。 在开始制作游戏时，导入资源 通常是必须的步骤。您可以在新建项目时使用模板项目，新建步骤完成后会自动打开项目，默认布局中包含了 资源管理器 面板，里面有两个资源库，简称 DB，assets 和 internal, internal 属于默认的内置资源，内置资源可以复制出来，但不能直接修改。 面板操作预览 面板介绍 资源管理器 面板上主要有 头部菜单区， 树形列表区： * 头部菜单区 的功能有：新建资源按钮 ，排序方式按钮 ，搜索过滤 ，搜索框，全部折叠或展开按钮 ，刷新列表按钮 * 树形列表区 主要体现资源之间的关系，根节点如 assets 类似操作系统里的文件管理器，编辑器中称之为一个 DB * assets 是项目资源，新项目下默认为空； * internal

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 场景编辑器 场景编辑器 是内容创作的核心工作区域，您将使用它选择和摆放场景图像、角色、特效、UI 等各类游戏元素。在这个工作区域里，您可以选中并通过 变换工具 修改节点的位置、旋转、缩放、尺寸等属性，并可以获得所见即所得的场景效果预览。 视图介绍 导航 3D视图和2D视图的导航方式有所不同，通过工具栏中的3D/2D按钮可以切换3D和2D视图，3D视图用于3D场景编辑，2D视图主要用于UI，Sprite等2D元素的编辑。 3D视图 在3D视图下，您可以通过以下操作来移动和定位 场景编辑器 的视图： * 鼠标左键+Alt：摄像机围绕视图中心点旋转。 * 鼠标中键：平移视图。 * 鼠标滚轮：摄像机前后移动。 * 鼠标右键+WASD：摄像机漫游。 * F 快捷键：摄像机聚焦到当前选中节点。 2D视图 在2D视图下，您可以通过以下操作来移动和定位 场景编辑器

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 WebSocket 客户端 原生环境支持 Web 标准的 WebSocket 接口。 差异 在 v3.5 版本之前，Android 和 Windows 上的 WebSocket API 使用 libwebsockets 实现。需要开发者通过第三个参数指定 CA 文件路径： this.wsInstance = new WebSocket('wss://echo.websocket.org', [], caURL); 详情请参考 示例代码。可访问 下载 CA 证书 下载对应的证书。 在 v3.5 版本之后, Android 上不再强制要求提供证书。

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 使用 WebSocket 服务器 开发者可以在游戏进程中启动一个 WebSocket 服务器，提供 RPC 接口。通过完善和调用这些 RPC 接口，开发者能够对游戏进程内部状态进行监控，增加对游戏进程状态的管理能力。 如何启用 WebSocket 服务器 默认是剔除的。若要启用，需要在编辑器顶部菜单栏中 项目设置 -> 功能裁剪 中勾选WebSocket Server 配置。 如何调用 WebSocket 服务器接口 可参考下方实例代码： // 在原生平台的 Release 模式下或者在 Web /微信小游戏等平台中，WebSocketServer 可能没有定义 if (typeof WebSocketServer === "undefined") { console.error("WebSocketServer is not

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 存储和读取用户数据 我们在游戏中通常需要存储用户数据，如音乐开关、显示语言等，如果是单机游戏还需要存储玩家存档。Cocos Creator 中我们使用 localStorage 接口来进行用户数据存储和读取的操作。 localStorage 接口是按照 Web Storage API 来实现的，在 Web 平台运行时会直接调用 Web Storage API，在原生平台上会调用 sqlite 的方法来存储数据。一般用户不需要关心内部的实现。 配合本篇文档可以参考 数据存储范例（GitHub | Gitee）。 存储数据 sys.localStorage.setItem(key, value) 上面的方法需要两个参数，用来索引的字符串键值 key，和要保存的字符串数据 value。 假如我们要保存玩家持有的金钱数，假设键值为 gold： sys.localStorage.

推荐：将NSDT场景编辑器加入你的3D工具链 3D工具集：NSDT简石数字孪生 网页预览定制工作流程 自定义预览模板 预览支持自定义模板方便用户自定义需要的预览效果，自定义的预览模板可以放置在项目目录的 preview-template 文件夹中。或者点击编辑器主菜单中的 项目 -> 生成预览模板 就可以在项目目录下创建一个最新的预览模板。编辑器中的预览也是使用模板来注入最新的项目数据，预览时将会查找该目录下的 index 文件，如果存在就是要该文件作为预览的模板。 preview-template 文件夹的结构类似： project-folder |--assets |--build |--preview-template // 必须的入口文件 |--index.ejs // 其他文件可根据想要实现的预览效果进行添加 开始自定义网页预览，需要注意的是，预览模板中存在一些预览菜单项以及预览调试工具等内容，所以在增删一些模板语法的内容时要稍加注意，如果随意修改可能会导致预览模板不可用。建议使用 ejs 注入的内容都保留，然后在此基础