Cocos入门知识总结(四)

最新推荐文章于 2024-06-02 14:13:34 发布

留白的云

最新推荐文章于 2024-06-02 14:13:34 发布

阅读量1.3k

点赞数 1

分类专栏： cocos 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/huyawenz/article/details/125915758

版权

cocos 专栏收录该内容

4 篇文章 13 订阅

订阅专栏

一个银川出差跑回来，3个月过去了。我把之前学的cocos都还忘的一干二净了。但是为了小游戏。必须捡起来。废话不多说了。赶紧整点干货。

5.3.2 Button 点击事件

Button 可以额外添加 Click 事件，用于响应玩家的点击操作。有以下两种方法。

1.1 通过属性检查器添加回调

序号	属性	功能说明
1	Target	带有脚本组件的节点。
2	Component	脚本组件名称。
3	Handler	指定一个回调函数，当用户点击 Button 时会触发此函数。
4	CustomEventData	用户指定任意的字符串作为事件回调的最后一个参数传入。

新建脚本为 game.js 粘贴入下面的代码。

cc.Class({
    extends: cc.Component,

    properties: {
    },

    start () {
    },

    btnClick(event,customEventData) {
        let node = event.target;
        cc.log("通过属性检查器设置点击事件：",customEventData);
    }

});

1.2 通过脚本添加回调

通过脚本添加回调：

通过 button.node.on('click', ...) 的方式来添加，这是一种非常简便的方式，但是该方式有一定的局限性，在事件回调里面无法获得当前点击按钮的屏幕坐标点。

 // 在一个组件的 onLoad 方法里面添加事件处理回调，在 callback 函数中进行事件处理:
 cc.Class({
     extends: cc.Component,

     properties: {
         button: cc.Button
     },

     onLoad: function () {
         this.button.node.on('click', this.callback, this);
     },

     callback: function (button) {
         console.log("click，我是开始游戏的cc.button点击事件");
         // 另外，注意这种方式注册的事件，也无法传递 customEventData
     }
 });

六、动画系统

Cocos Creator 的动画系统，除了标准的位移、旋转、缩放动画和序列帧动画以外，这套动画系统还支持任意组件属性和用户自定义属性的驱动，再加上可任意编辑的时间曲线和创新的移动轨迹编辑功能，能够让内容生产人员不写一行代码就制作出细腻的各种动态效果。

Cocos Creator 自带的动画编辑器适用于制作一些不太复杂的、需要与逻辑进行联动的动画，例如 UI 动画。如果要制作复杂的特效、角色动画、嵌套动画，可以考虑改用 Spine 或者 DragonBones 进行制作。

6.1 关于 Animation

在早期的游戏开发中，游戏工程师和设计师们使用简单的技巧开发动画，早期动画的动感由连续快速显示一连串静止的图片产生，这些静止的图片被称为帧，这种动画被称为帧动画。随着设备硬件技术的改进和开发工具的不断完善，更多的高级动画技巧和骨骼动画得到了使用，CocosCreator包含简单的动画编辑系统，可以通过编辑器制作简单的动画。

6.1.1 Animation 组件

之前了解了 Cocos Creator 是组件式的结构。那么 Animation 也不例外，它也是节点上的一个组件。

6.1.2 Clip 动画剪辑

动画剪辑就是一份动画的声明数据,是一种资源类型，我们将它挂载到 Animation 组件上，就能够将这份动画数据应用到节点上

6.1.3 节点数据的索引方式

数据中索引节点的方式是以挂载 Animation 组件的节点为根节点的相对路径。所以在同个父节点下的同名节点，只能够产生一份动画数据，并且只能应用到第一个同名节点上。

6.1.4 clip 文件的参数

sample：定义当前动画数据每秒的帧率，默认为 60，这个参数会影响时间轴上每两个整数秒刻度之间的帧数量（也就是两秒之内有多少格）。

speed：当前动画的播放速度，默认为 1

duration：当动画播放速度为 1 的时候，动画的持续时间

real time：动画从开始播放到结束，真正持续的时间

wrap mode：循环模式

6.1.5 动画编辑模式

动画在普通模式下是不允许编辑的，只有在动画编辑模式下，才能够编辑动画文件。但是在编辑模式下，无法对节点进行增加 / 删除 / 改名操作。

打开编辑模式：

选中一个包含 Animation 组件，并且包含有一个以上 clip 文件的节点。然后在动画编辑器左上角点击唯一的按钮。

退出编辑模式：

点击动画编辑器上点击左上角的编辑按钮，或者在场景编辑器左上角的关闭按钮。

2.1.6 熟悉动画编辑器

动画编辑器一共可以划分为 6 个主要部分。

常用按钮区域，这里负责显示一些常用功能按钮，从左到右依次为：开关编辑状态、返回第一帧、上一帧、播放/暂停、下一帧、新建动画剪辑、插入动画事件
时间轴与事件，这里主要是显示时间轴，添加的自定义事件也会在这里显示。
层级管理（节点树），当前动画剪辑可以影响到的节点数据。
节点内关键帧的预览区域，这里主要是显示各个节点上的所有帧的预览时间轴。
属性列表，显示当前选中的节点在选中的动画剪辑中已经包含了的属性列表。
关键帧，每个属性相对应的帧都会显示在这里

时间轴的刻度单位表示方式

时间轴上刻度的表示法是 01-05。该数值由两部分组成，冒号前面的是表示当前秒数，冒号后面的表示在当前这一秒里的第几帧。

01-05 表示该刻度在时间轴上位于从动画开始经过了 1 秒又 5 帧的时间。

因为帧率（sample）可以随时调整，因此同一个刻度表示的时间点也会随着帧率变化而有所不同。

当帧率为 30 时，01-05 表示动画开始后 1 + 5/30 = 1.1667 秒。
当帧率为 10 时，01-05 表示动画开始后 1 + 5/10 = 1.5 秒。

虽然当前刻度表示的时间点会随着帧率变化，但一旦在一个位置添加了关键帧，该关键帧所在的总帧数是不会改变的，假如我们在帧率 30 时向 01-05 刻度上添加了关键帧，该关键帧位于动画开始后总第 35 帧。之后把帧率修改为 10，该关键帧仍然处在动画开始后第 35 帧，而此时关键帧所在位置的刻度读数为 03-05。换算成时间以后正好是之前的 3 倍。

6.2 基本操作

6.2.1 更改时间轴缩放比例

在操作中如果觉得动画编辑器显示的范围太小，需要按比例缩小，让更多的关键帧显示到编辑器内怎么办？

在图中2、4、6区域内滚动鼠标滚轮，可以放大，或者缩小时间轴的显示比例。

6.2.3 移动显示区域

如果想看动画编辑器右侧超出编辑器被隐藏的关键帧或是左侧被隐藏的关键帧，这时候就需要移动显示区域：

在图中2、4、6区域内按下鼠标中键/右键拖拽。

6.2.4 更改当前选中的时间轴节点

在时间轴（图 2 区域）区域内点击任意位置或者拖拽，都可以更改当前的时间节点。
在图 4 区域内拖拽标示的红线即可。

6.2.5 播放/暂停动画

在图 1 区域内点击播放按钮，按钮会自动变更为暂停，再次点击则是暂停。
播放状态下，保存场景等操作会终止播放。

6.2.6 修改 clip 属性

在插件底部，修改对应的属性，在输入框失去焦点的时候就会更新到实际的 clip 数据中。

6.3 快捷键

left：向前移动一帧，如果已经在第 0 帧，则忽略当前操作
right：向后移动一帧
delete：删除当前所选中的关键帧
ctrl / cmd + left：跳转到第 0 帧
ctrl / cmd + right：跳转到有效的最后一帧

6.4 创建与挂载动画剪辑

现在我们的节点上已经有了 Animation 组件了，但是还没有相应的动画剪辑数据，动画剪辑也有两种创建方式：

在资源管理器中点击左上方的+，或者右键空白区域，选择 Animation Clip，这时候会在管理器中创建一个名为 'New AnimationClip' 的剪辑文件。单单创建还是不够的，我们再次在层级管理器中点选刚刚的节点，在属性检查器中找到 Animation，这时候的 Clips 显示的是 0，我们将它改成 1。然后将刚刚在资源管理器中创建的 'New AnimationClip' ，拖入刚刚出现的 animation-clip选择框 内。
如果 Animation 组件中还没有添加动画剪辑文件，则可以在动画编辑器中直接点击 新建 AnimationClip 按钮，根据弹出的窗口创建一个新的动画剪辑文件。需要注意的是，如果选择覆盖已有的剪辑文件，被覆盖的文件内容会被清空。

6.5 剪辑内的数据

一个动画剪辑内可能包含了多个节点，每个节点上挂在多个动画属性，每个属性内的数据才是实际的关键帧。

6.5.1 节点数据

动画剪辑通过节点的名字定义数据的位置，本身忽略了根节点，其余的子节点通过与根节点的相对路径索引找到对应的数据。有时候我们会在制作完成动画后，将节点重命名，这样会造成动画数据所以出现问题，如下图：

这时候我们要手动指定数据对应的节点，可以将鼠标移入节点，点击节点右侧出现的更多按钮，并选择 “移动数据”。要注意的是，根节点名字是被忽略的，所以根节点名字是固定的，并不能修改，并且一直显示在页面左侧。如上图，New Node/test 节点没有数据，我想将 /New Node/efx_flare 上的数据移到这里：