让蔡徐坤来教你实现游戏中的帧动画(下)

拖了将近一个月,终于把帧动画这部分写完了,新关注的或者已经忘记的小伙伴可以看一下之前写的部分:让蔡徐坤来教你实现游戏中的帧动画(上)让蔡徐坤来教你实现游戏中的帧动画(中)​今天这个还是在上一篇的基础上进行修改的,主要讲解的如何在帧动画中添加事件,CocosCreator提供了两种添加事件的方式:可视化编辑帧事件和动态注册帧事件,下面将对这两种方式分别介绍。没看过官方文档的小伙伴建议先熟悉一下官方文...

让蔡徐坤来教你实现游戏中的帧动画(下)


拖了将近一个月,终于把帧动画这部分写完了,新关注的或者已经忘记的小伙伴可以看一下之前写的部分:

让蔡徐坤来教你实现游戏中的帧动画(上)

让蔡徐坤来教你实现游戏中的帧动画(中)

今天这个还是在上一篇的基础上进行修改的,主要讲解的如何在帧动画中添加事件,Cocos Creator 提供了两种添加事件的方式:可视化编辑帧事件和动态注册帧事件,下面将对这两种方式分别介绍。

没看过官方文档的小伙伴建议先熟悉一下官方文档哦!

https://docs.cocos.com/creator/manual/zh/animation/scripting-animation.html

一、可视化编辑帧事件

1.由于是在上篇文章的基础上进行修改,所以不再对工程目录进行介绍,先导入这次要用到的音乐资源 jinitaimei.mp3,然后创建一个文字说明和两个按钮:

2.然后再编辑一个 jump 的帧动画,我是只修改了 position 和 scale 属性,这个随意,自己发挥就好,并将动画拖到 player 节点上(本来是想把跳舞的也做出来的,但想到学会技术才是重点,于是只是简单的修改了 position 和 scale 属性,我不会告诉你们我是太懒的~):

3.绑定动画后,编写脚本如下,并将改脚本挂在到 player 节点上(注,如果挂在到非挂载对应动画节点上将不能获取到回调函数):

 1 // animationEvent.js 2  3 cc.Class({ 4  extends: cc.Component, 5  6  properties: { 7   player: cc.Node, 8   playBt: cc.Node, 9   stopBt: cc.Node,10   music: {11 default: null,12 type: cc.AudioClip13   }14  },15 16  onLoad() {17this.playBt.on('touchstart', this.cbPlay, this);18this.stopBt.on('touchstart', this.cbStop, this);19 20this.anim = this.player.getComponent(cc.Animation);21  },22  23  // playBt 回调函数24  cbPlay(event) {25this.anim.play('jump');26this.node.parent.getChildByName('label_01').active = false;27  },28 29  // stopBt 回调函数30  cbStop(event) {31this.anim.stop();32this.player.position = cc.v2(0, 0);33this.player.setScale(1);34   cc.audioEngine.stopMusic();35this.node.parent.getChildByName('label_01').active = true;36  },37 38  // jump 动画 play 回调函数39  onJumpPlay(type, state) {40cc.audioEngine.playMusic(this.music, false);41  },42 43  // jump 动画 finished 回调函数44  onJumpFinished(type, state) {45   cc.audioEngine.stopMusic();46this.anim.play('play');47  },48  49  // play 动画 finished 回调函数50  onPlayFinished(event) {51this.node.parent.getChildByName('label_01').active = true;52  }53 });

4.最后在帧动画中添加帧事件并绑定对应回调函数就可以了,将时间线拖到对应关键帧位置,点添加关键帧按钮,之后编辑关键帧绑定对应回调函数即可(别忘了将对应节点也绑定到属性面板上啊!):

5.之后可以欣赏才艺满满 CXK 的唱、跳、rap 和篮球了:

二、动态注册帧事件

1.动态注册事件的话只需要编辑脚本即可,就不需要在编辑器上绑定回调函数了(我发现官方文档中对单个 cc.AnimationState 注册回调的方法并不正确,添加后不起作用,只有对组件注册事件时才正确,因此自己判断了一下,如果小伙伴知道怎么处理欢迎评论、私聊我哦!),编写脚本如下:

 1 // animationEvent.js 2  3 cc.Class({ 4  extends: cc.Component, 5  6  properties: { 7   player: cc.Node, 8   playBt: cc.Node, 9   stopBt: cc.Node,10   music: {11 default: null,12 type: cc.AudioClip13   }14  },15 16  onLoad() {17this.playBt.on('touchstart', this.cbPlay, this);18this.stopBt.on('touchstart', this.cbStop, this);19 20this.anim = this.player.getComponent(cc.Animation);21 22this.anim.on('play', this.onAniPlay, this); // 注册 play 监听事件23this.anim.on('finished', this.onAniFinished, this); // 注册 finished 监听事件24  },25 26  // playBt 回调函数27  cbPlay(event) {28this.anim.play('jump');29this.node.parent.getChildByName('label_01').active = false;30 31  },32 33  // stopBt 回调函数34  cbStop(event) {35this.anim.stop();36this.player.position = cc.v2(0, 0);37this.player.setScale(1);38   cc.audioEngine.stopMusic();39this.node.parent.getChildByName('label_01').active = true
源文地址:https://www.guoxiongfei.cn/cntech/26826.html