一、使用Cocosstudio资源在本篇博客中，我们将通过一个在Cocos2d-Js中使用从Cocosstudio导出的帧动画资源的例子，来简要介绍以下内容：利用ActionTimeline进行动画切割，如何使用导出的帧动画资源。关于帧动画，由于内容繁杂。我们将分为两篇进行介绍。在上一篇中，我们已经做好了前期的资源准备和CocosCodeIDE中的简单处理，本篇将主要介绍资源的使用问题。
做好了前期的准备工作，终于到我们的重头戏（FrameAnimationScene.Js）了，下面，我们将要来学习如何获取Cocosstudio中导出的资源等。
第一步：加载FrameAnimationScene界面的JsON资源分析，并获取FrameAnimationScene对象。将FrameAnimationScene对象加入到layer中。具体代码如下：
//加载frameAnimation界面的JsON资源分析，并获取frameAnimationScene对象。 frameAnimationScene = ccs.load(res.frame_animation_Json).node; //将frameAnimationScene对象加入到layer中。 this.addChild(frameAnimationScene);
第二步：从FrameAnimationScene中查找相应的控件对象，包括button控件和Shark动画节点所依附的那个节点，查找方法相似。具体代码如下：
//从frameAnimationScene中获取动画节点依附的节点对象 //通过该对象可以实现对动画节点的一些移动等 *** 作，如：MoveBy,Moveto等。 sharkNode = frameAnimationScene.getChildByname("ProjectNode_1"); //获取三个button attackbutton = ccui.helper.seekWidgetByname(frameAnimationScene,"attackbutton"); deadAttackbutton = ccui.helper.seekWidgetByname(frameAnimationScene,"deadattackbutton"); deadbutton = ccui.helper.seekWidgetByname(frameAnimationScene,"deadbutton");
第三步：添加事件监听，方法类似，具体代码如下：
//三个button注册事件处理函数 attackbutton.addtouchEventListener(this.buttontouchEvent); deadAttackbutton.addtouchEventListener(this.buttontouchEvent); deadbutton = deadbutton.addtouchEventListener(this.buttontouchEvent);
第四步：运行动画前的准备工作，包括获取ActionTimeline对象等，具体代码如下：
//从动画节点中获取ActionTimeline。 shark = ccs.load(res.shark_Json).action; frameAnimationScene.runAction(shark);
第五步：设置帧事件监听。注意，此处有大坑！
//设置帧事件监听，每一帧一次监听。 //正常情况下应该使用如下语句: //shark.setFrameEventCallFunc(this.frameAnimationEvent); //但是，有BUG！！！不能用。 //换个角度解决问题，每一帧动画都会触发update事件。然后在update中写事件处理内容。 this.scheduleUpdate();
第六步：定义相应监听事件的具体处理信息，具体代码如下：
update：伪帧事件监听处理函数。
update:function(){ //换个角度解决问题，现在在这里处理每一帧的事件。 //判断动画是否在播放，如果在播放，则使所有按钮处于“禁用状态” //从而来模仿“技能冷却”的使用。 if(!shark.isPlaying()){ //如果动画不在播放状态，则将处于禁用的技能激活。 if(!attackbutton.isBright()){ attackbutton.setBright(true); attackbutton.settouchEnabled(true); } if(!deadAttackbutton.isBright()){ deadAttackbutton.setBright(true); deadAttackbutton.settouchEnabled(true); } if(!deadbutton.isBright()){ deadbutton.setBright(true); deadbutton.settouchEnabled(true); } } },
PS：如果没有BUG的话，帧事件处理应该写在这里：
frameAnimationEvent:function(frame){ //正常情况下，应该在这里处理每一帧的事件。 cc.log("Frame Animation Event"); }
button控件触发的事件处理，在这个事件处理里面，我们会展示游戏设计中常用的帧动画处理的相关方法具体代码如下：
buttontouchEvent:function(sender,type){ //三个按钮的事件处理函数 switch (type) { case ccui.Widget.touch_ENDED: switch (sender.getname()) { //可以通过两种方式设置动画的播放。 //推荐第二种！！！！ case "attackbutton": //第一种 //通过设置开始帧，结束帧，是否循环播放等进行播放动画 shark.gotoFrameAndplay(0,30,false); //将按钮设为禁用状态。 self.changebuttonBright(); break; case "deadattackbutton": //第二种 //通过player函数播放指定名称的动画 shark.play("DAttack",false); self.changebuttonBright(); break; case "deadbutton": shark.play("Dead",false); self.changebuttonBright(); //死的时候，先往前走几步，倒下死亡，再滑回来。 sharkNode.runAction(cc.Sequence(cc.MoveBy(0.5,cc.p(-100,0)),cc.MoveBy(2,cc.p(100,0)))); break; default: break; } break; default: break; } },
PS：changebuttonBright函数的具体代码：
changebuttonBright:function(){ //将各个按钮设为禁用状态。禁用触摸响应。 attackbutton.setBright(false); deadAttackbutton.setBright(false); deadbutton.setBright(false); attackbutton.settouchEnabled(false); deadAttackbutton.settouchEnabled(false); deadbutton.settouchEnabled(false); },
二、运行效果代码简介：
上面的代码都有注释，看了应该很明白。这里就简单介绍一下：
1.整体思路：
通过点击三个技能按钮，分别为普通攻击，大招攻击，死亡。每个技能释放过程中，所有技能都会进入冷却状态，只有等技能释放完毕后，才能释放下一个技能。释放死亡技能时（额，这个不能算作技能。），人物会向前走几步，再倒地死亡，然后再滑回来（只是为了让人物保持原来位置，所以加个滑回来的动作。）。2.技能冷却设计：
我想这个应该是游戏设计中经常会用到的功能。首先，我们在每次释放技能的时候，调用changebuttonBright方法，将所有技能按钮禁用（类似于进入冷却）。由于帧事件回调函数shark.setFrameEventCallFunc(this.frameAnimationEvent);不能用，所以，我们采用update方法，每一帧都更新一次，检查一下，现在是否在释放技能，如果不在释放技能，就激活处于冷却状态的技能。通过上面的过程就可以顺利地完成技能的冷却和激活 *** 作，当然了你可以进一步在update函数处理中，对更细节的地方进行处理。 *** 作和思路应该都相似。
PS:貌似isDone()方法也不能用，求官方早日解决！！！！当然了，如果是我使用姿势不对，还欢迎各位朋友指点一二。
3.边放动画边移动：
我想这也是大多数游戏设计中所必须的功能，你想如果你的人物在不停地奔跑，却在屏幕中只停留于原地，这得是多么悲哀的事情！！！！
本文提供了一种解决方案，那就是：获取动画节点所依附的节点，通过 *** 作此节点可以实现边移动（MoveBy）边播放动画。在这个例子中，我们是在人物死亡时，让他向前走几步再死，然后滑回去。
到这里，对于FrameAnimationScene界面的分析和使用就介绍完毕了。你可以运行一下。我的部分运行效果如下：
大招效果图
三、补充说明死亡效果图
为了方便大家学习研究，下面提供本教程项目文件的百度网盘下载链接：
链接：http://pan.baidu.com/s/1ntqWgyP 密码：gw3nFrameAnimationScene.Js的完整源码如下：
var FrameAnimationLayer = cc.Layer.extend({ shark:null,sharkNode:null,attackbutton:null,deadAttackbutton:null,deadbutton:null,self:null,ctor:function(){ this._super(); //设置this的全局引用，方便获取。 self = this; //第一步: //加载frameAnimation界面的JsON资源分析，并获取frameAnimationScene对象。 frameAnimationScene = ccs.load(res.frame_animation_Json).node; //将frameAnimationScene对象加入到layer中。 this.addChild(frameAnimationScene); //第二步: //从frameAnimationScene中获取动画节点依附的节点对象 //通过该对象可以实现对动画节点的一些移动等 *** 作，如：MoveBy,Moveto等。 sharkNode = frameAnimationScene.getChildByname("ProjectNode_1"); //获取三个button，并注册事件处理函数 attackbutton = ccui.helper.seekWidgetByname(frameAnimationScene,"attackbutton"); attackbutton.addtouchEventListener(this.buttontouchEvent); deadAttackbutton = ccui.helper.seekWidgetByname(frameAnimationScene,"deadattackbutton"); deadAttackbutton.addtouchEventListener(this.buttontouchEvent); deadbutton = ccui.helper.seekWidgetByname(frameAnimationScene,"deadbutton"); deadbutton.addtouchEventListener(this.buttontouchEvent); //第三步:运行动画前的准备工作 //从动画节点中获取ActionTimeline。 shark = ccs.load(res.shark_Json).action; frameAnimationScene.runAction(shark); //第四步:设置帧事件监听，每一帧一次监听。 //正常情况下应该使用如下语句: //shark.setFrameEventCallFunc(this.frameAnimationEvent); //换个角度解决问题，每一帧动画都会触发update事件。然后在update中写事件处理内容。 this.scheduleUpdate(); return true; },buttontouchEvent:function(sender,false); //将按钮设为禁用状态。 self.changebuttonBright(); break; case "deadattackbutton": //第二种 //通过player函数播放指定名称的动画 shark.play("DAttack",false); self.changebuttonBright(); break; case "deadbutton": shark.play("Dead",false); self.changebuttonBright(); //死的时候，先往前走几步，倒下死亡，再滑回来。 sharkNode.runAction(cc.Sequence(cc.MoveBy(0.5,changebuttonBright:function(){ //将各个按钮设为禁用状态。禁用触摸响应。 attackbutton.setBright(false); deadAttackbutton.setBright(false); deadbutton.setBright(false); attackbutton.settouchEnabled(false); deadAttackbutton.settouchEnabled(false); deadbutton.settouchEnabled(false); },update:function(){ //换个角度解决问题，现在在这里处理每一帧的事件。 //判断动画是否在播放，如果在播放，则使所有按钮处于“禁用状态” //从而来模仿“技能冷却”的使用。 if(!shark.isPlaying()){ //如果动画不在播放状态，则将处于禁用的技能激活。 if(!attackbutton.isBright()){ attackbutton.setBright(true); attackbutton.settouchEnabled(true); } if(!deadAttackbutton.isBright()){ deadAttackbutton.setBright(true); deadAttackbutton.settouchEnabled(true); } if(!deadbutton.isBright()){ deadbutton.setBright(true); deadbutton.settouchEnabled(true); } } },frameAnimationEvent:function(frame){ //正常情况下，应该在这里处理每一帧的事件。 cc.log("Frame Animation Event"); }});var FrameAnimationScene = cc.Scene.extend({ onEnter:function () { this._super(); var layer = new FrameAnimationLayer(); this.addChild(layer); }});总结
以上是内存溢出为你收集整理的Cocos2d-JS中使用CocosStudio资源——帧动画（2）全部内容，希望文章能够帮你解决Cocos2d-JS中使用CocosStudio资源——帧动画（2）所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）