w风雨无阻w的专栏

而骨骼动画只需要少量的图片资源，并把骨骼的动画数据保存在一个 json 文件里面（后文会提到），它所占用的空间非常小。更少的美术资源： 骨骼动画的资源是一块块小的角色部件（比如：头、手、胳膊、腰等），美术再也不用提供每一帧完整的图片了，节省了资源大小。骨骼动画是把角色的各部分身体部件图片绑定到一根根互相作用连接的“骨骼”上，通过控制这些骨骼的位置、旋转方向和放大缩小而生成的动画。Spine是一款针对游戏的2D骨骼动画编辑工具，它具有良好的UI设计和完整的功能，是一个比较成熟的骨骼动画编辑器。

关键帧-顾名思义，指物体变化或者运动过程中，关键动作所处的那一帧，它对制作更加精细的动画效果起到非常关键的作用，是动画或者视频制作中经常用到的一个功能。选中多个关键帧后，点击上方菜单栏中的间隔排列关键帧按钮，选中的关键帧便会以第一个关键帧为基准，以间隔数输入框中设置的数值为间隔帧数依次排列。帧就是动画中最小单位的单幅画面，相当于电影胶片上的每一格镜头，在动画编辑器的时间轴上，帧表现为一格或一个标记。当然，演示的效果比较快，可调整关键帧的位置，以达到更好的效果。在进行实操之前，我们需要知道什么是关键帧？

按钮即可添加动画属性，动画属性包括了节点自有的属性、组件属性（包含用户自定义脚本组件中的属性）。：前面的数字表示当动画播放速度为 1 的时候，动画的持续时间，根据最后一个关键帧所在位置决定。该区域主要用于显示当前选中节点在各动画属性上具体的关键帧设置情况，也是关键帧编辑的主要区域。节点列表，主要显示组件的节点，如果一个动画组件包含多个节点，则最上层显示为根节点，与。该区域主要用于显示、添加、设置当前选中的节点在当前动画剪辑中的动画属性。目前支持右键点击节点，复制、粘贴节点数据、迁移节点数据、清空节点数据。

Cocos Creator动画编辑器适合制作一些不太复杂的UI动画，如果是复杂的特效和角色动画等，可以使用spine 、DragonBones 或者 3D 模型骨骼动画进行制作。动画剪辑（是一份动画的声明数据（包含动画数据的资源），将动画剪辑挂载到动画组件上，就能够将这份数据应用到动画组件所在的节点上。Animation（动画）组件以动画方式驱动所在节点和子节点上的节点和组件属性，包括用户自定义脚本中的属性。，再将动画组件挂载到根节点上，则这个根节点下的其他子节点都会自动进入到这个动画剪辑中，并显示在。

通过上面演示的代码，我们可以知道，Tween可以同时设置多个属性， 在调用 start 时会将之前生成的 action 队列重新组合生成一个 cc.sequence 队列，依次执行。怎么使用Tween？如果想深入了解Tween的朋友，这里我贴了官方tween.ts和tween-action.ts 源码，建议花点时间完整的看一下，这样用起来会更加得心应手。​ 在使用的时候，可以添加一个或者多个Action到内部缓冲，也可添加多个Action组合的串行Action或者并行Action。

对于复杂的富文本，底层可能有十几个 label 节点，drawcall 数量会比较高，引擎为富文本组件提供了 Label 组件的文本缓存类型设置，来适当减少 drawcall 的增加。目前支持的样式有：颜色（color）、字体大小（size）、字体描边（outline）、加粗（b）、斜体（i）、下划线（u）、换行（br）、图片（img）和点击事件（on）。目前支持的标签类型有：size、color、b、i、u、img 和 on，分别用来定制字体大小、字体颜色、加粗、斜体、下划线、图片和点击事件。

Slider 是一个滑动器组件，通常用于调节 UI 的数值（例如音量调节），它主要的部件是一个滑块按钮，该部件用于用户交互，通过该部件可进行调节 Slider 的数值大小。Button 组件可以响应用户的点击操作，当用户点击 Button 时，Button 自身会有状态变化，在完成点击操作后响应一个自定义的行为。是一种显示网页的组件，该组件让你可以在游戏里面集成一个小的浏览器，目前只支持 Web、iOS 和 Android 平台。的方式来添加，这种方式注册的事件，无法传递 customEventData。

PageView 组件必须有指定的 content 节点才能起作用，content 中的每个子节点为一个单独页面，且每个页面的大小为 PageView 节点的大小，如果节点大小大于内容大小的话，可能会导致出现滚动不完整的现象。配合使用，可以通过相关属性，来进行创建相对应页面的数量的标记，当滑动到某个页面的时，PageViewIndicator 就会高亮它对应的标记。ScrollView 的事件回调有两个参数，第一个参数是 ScrollView 本身，第二个参数是 ScrollView 的事件类型。

时，会在运行时每帧都按照设置的对齐策略进行对齐，组件所在节点的位置（position）和尺寸（width，height）属性可能会被限制，不能通过 API 或动画系统自由修改。如果遇到了 UI 渲染出错，花屏，闪屏等现象，首先要检查的就是场景里所有相机（Camera 和 Canvas）的。接下来，就一一介绍常用的UI组件使用和注意事项，由于UI组件内容较多，篇幅原因，后续将持续进行介绍。能使当前节点自动对齐到父物体的任意位置，或者约束尺寸，可以方便地适配不同的分辨率。

（3)、Mask 遮罩使用注意事项节点添加了 Mask 组件之后，所有在该节点下的子节点，在渲染的时候都会受 Mask 影响。GRAPHICS_STENCIL 类型在这里没有做任何引擎需要的事，只是放开了对 graphics 操控，用户可以使用 mask 组件里的 graphics 属性来绘制自定义图形，但是节点的点击事件还是根据节点的尺寸来计算。SPRITE_STENCIL 类型默认需要一个图片资源，如果没有设置的话，相当于没有遮罩。4、Graphics 组件方法功能说明moveTo。

在日常游戏开发过程中，为了减少游戏启动时，资源首次下载和加载的时间，我们可以只下载和加载需要的资源模块。而CocosCreator 中的 Asset Bundle 就是这样的模块化工具，允许我们按照项目需求，将图片、脚本、场景 等资源划分在多个不同的 Asset Bundle 中。例如：一个大厅中集成了很多小游戏，我们都可以把 大厅以及不同的小游戏分别划分成不同的 Asset Bundle来管理。Asset Bundle 可以放在不同的地方，比如远程服务器上，本地、或者小游戏平台的分包里。

资源管理模块具备加载资源、查找资源、销毁资源、缓存资源、Asset Bundle 等功能，帮助开发者管理其资源的使用。预加载只会下载必要的资源，不会进行反序列化和初始化工作，性能消耗小，适合在游戏过程中使用。由于预加载没有解析资源，所以需要在预加载完成后，再配合加载接口进行资源的解析和初始化。在游戏的开发过程中，需要使用到大量的图片、音频等资源来，从而带来管理上的困难。：加载不需要等到预加载完成后再调用，开发者可以在任何时候进行加载。正常加载接口会直接复用预加载过程中已经下载好的内容，缩短加载时间。

是一次性播放操作，播放后的音效无法暂停或停止播放，也无法监听播放结束的事件回调。是一次性播放操作，播放后的音效无法暂停或停止播放，也无法监听播放结束的事件回调.这里测试命名为：AudioSourceControl.ts。面板， 会生成相应的音频资源（AudioClip）。Cocos Creator 直接将音频文件拖拽到。即可添加 AudioSource 组件到节点上。目前 Web 平台的音频播放需要遵守最新的。AudioSource 组件提供。

系统字体是调用运行平台自带的系统字体来渲染文字，不需要用户在项目中添加任何相关资源。Cocos Creator 常用的字体资源有三种：系统字体、动态字体、位图字体。图片组成，fnt 文件提供了对每一个字符小图的索引。目前 Cocos Creator 支持。使用系统字体， Label 组件。中，即可完成字体资源的导入。格式的字体文件和一张。

将当前预制件实例的数据还原为预制件资源中的数据，其中名字、位置和旋转不会被还原为预制件资源中的数据。为什么要使用Prefab？上增加一条删除的组件的数据，它的数据存储在预制件的实例下，所以不会影响关联的预制件资源的数据。场景中的预制件实例对象，数据源来自预制件资源的反序列化，所以它的数据默认同步了预制件资源。标志，它的数据存储在预制件的实例下，所以不会影响关联的预制件资源的数据。标志，它的数据存储在预制件的实例下，不会影响关联的预制件资源的数据。中的预制件资源，是预制件的序列化文件。

精灵帧资源，用于 2D/UI 制作。Cocos Creator 的 SpriteFrame 管理图像的裁剪和九宫格信息，默认持有一个与其同级的 Texture2D 资源引用，是 UI 渲染基础图形的容器。目录下，除了正常生成图集资源以外，也会同时生成原始 spriteFrame 生成的 texture 以及 image 资源，如果对图集的资源有明确的使用范围。当渲染一张贴图的时候，动态合图系统会自动检测这张贴图是否已经被合并到了图集中，如果没有，并且此贴图又符合动态合图的条件，就会将此贴图合并到图集中。

在 Cocos Creator 3.8 中，游戏场景（Scene）是呈现所有游戏内容的载体，而场景文件本身也作为游戏资源存在，并保存了游戏的大部分信息。），则当场景切换后，由于资源已经被释放，这些引用可能会变成非法的，有可能引起渲染异常等问题。启用了场景的资源自动释放后，如果在脚本中保存了对该场景的资源的特殊引用（等 API 来精确释放不使用的资源，还可以使用场景的自动释放功能。从当前场景切换到下一个场景时，该场景中直接或间接引用到的所有资源，如果项目中的场景很多，随着新场景的切换，内存占用就会不断上升。

Cocos Creator 为组件提供了生命周期的回调函数，只需要定义特定的回调函数，Creator 会在特定的时期自动执行相关脚本，开发者不需要手工调用它们。所有继承自Component的类都称为组件类，其对象称为组件，组件是由引擎创建，组件类必须是 cc 类。节点是承载组件的实体，我们通过将具有各种功能的组件挂载到节点上，来让节点具有各式各样的表现和功能。节点是场景的基础组成单位。阶段，可以保证获取到场景中的其他节点，以及节点关联的资源数据。在同一个节点上的组件执行顺序，可以通过设置组件的。

在user.ts 中使用 utils.ts ，访问 utils.utilsNode \utils.utilsNode bi。脚本中动态修改，能实现各种各样的游戏逻辑，例如响应玩家输入，删除、修改、销毁节点或组件。有时场景里面的组件比较多，需要有一个脚本来统一管理，如上的main.ts 的作用。这样操作后， Body 属性就会被设置成功，我们可以在脚本里访问 Body。还可以通过传入类名来获取，对于自定义的组件，类名就是脚本的文件名，并且。不过想要实现这些游戏逻辑，需要在脚本中访问这些组件或节点。

属性默认情况下都会被序列化，序列化后就会将编辑器中设置好的属性值保存到场景等资源文件中，之后在加载场景时就会自动还原成设置好的属性值。大家都知道，从Cocos Creator3.x 开始，开发语言主要是：TypeScript，那么装饰器也是需要必须理解的。当组件添加到节点上时，如果依赖的组件不存在，引擎会自动将依赖组件添加到同一个节点，防止脚本出错。在TypeScript中，装饰器分为：类装饰器、属性装饰器、方法装饰器、方法参数装饰器。将ccclass 关键词做为注解，添加在类上时，这个类被称为CC类。

当JavaScript脚本导入为插件后， Creator 不会修改插件脚本的内容，但可能会插入一些代码以适配 Creator，Creator 将屏蔽全局变量。例如：网页中使用大量的前端插件， jQuery 等，需要依赖于浏览器的 DOM API，这样不能用于原生平台中。谨慎使用全局变量，当要用全局变量时，应该清楚自己在做什么，不推荐滥用全局变量，即使要用也最好保证全局变量为。但这些全局变量不一定是跨平台的，为了方便，Creator 在导入插件脚本时，提供了。添加全局变量时，不要和系统已有的全局变量重名。

真正意义上做到了按需使用。使用 import 并不会直接执行模块，而是生成一个动态的只读引用，等到真的需要用到时，才会到模块里面去读取。Cocos Creator 使用导入映射，控制 TypeScript/JavaScript 的导入行为，指定对裸说明符的解析。假如有一个模块在项目中被很多其他模块使用，我们希望其他模块以别名的方式引用，而不用相对路径的方式，此时就可以使用别名映射。JavaScript模块规范为开发者提供了不同的选择，以满足不同的项目需求和开发风格，每一种都有其独特的特点和适用场景。

当UUID 发生变化，会使旧的 UUID 对应的资源无法找到， 编辑的界面会出现资源、图片丢失，还可能出现组件属性丢失的情况。UUID 是全局唯一的，产生冲突肯定是有不同的文件的 UUID 相同了，一旦出现这个问题，会导致 Cocos Creator 资源管理器目录结构加载不完整。当第一个人切换到编辑器的时候也会生成 meta 文件，这样两个人的电脑上为同一个文件，但是生成的 meta 文件中的 UUID 都不相同。中的资源导入后生成的，这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式。

我们希望在 VS Code 中修改脚本代码后，不需要返回 Cocos Creator 就能触发脚本编译， 这时就需要添加编译任务。为了便于辅助开发，我们可以给 VS Code 配置工作流，添加编译任务 和 添加Chrome Debug。为了提高搜索效率以及文件列表中隐藏不需要显示的文件， VS Code 需要设置排除目录用于过滤。一般来说，使用外部编辑器修改项目脚本代码后，需要返回 Cocos Creator 才能触发脚本编译。调试过程中，可以在源码文件上直接下断点，进行监控。

Visual Studio Code（以下简称 VS Code）是微软推出的轻量化跨平台 IDE，支持 Windows、Mac、Linux 平台，安装和配置非常简单。打开cocos编辑器 ，依次点击 file ->preferences->general->language->切换为中文。Cocos 编辑器偏好设置面板可以设置脚本编辑器，配置完成后，可以在资源管理器中双击脚本文件打开代码编辑器快速编辑代码。打开cocos编辑器 ，依次点击 文件 ->偏好设置->程序管理器->默认脚本编辑器。