Cocos2d-JS中使用CocosStudio资源——帧动画(2)
一、使用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: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");
}
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;
}
},
changeButtonBright:function(){
//将各个按钮设为禁用状态。禁用触摸响应。
attackButton.setBright(false);
deadAttackButton.setBright(false);
deadButton.setBright(false);
attackButton.setTouchEnabled(false);
deadAttackButton.setTouchEnabled(false);
deadButton.setTouchEnabled(false);
},
二、运行效果
三、补充说明
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);
}
});
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |