加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Cocos2d-JS中使用CocosStudio资源——帧动画(2)

发布时间:2020-12-14 21:18:18 所属栏目:百科 来源:网络整理
导读:在本篇博客中,我们将通过一个 在Cocos2d-JS中使用从CocosStudio导出的帧动画资源 的例子,来简要介绍以下内容:利用ActionTimeLine进行动画切割,如何使用导出的帧动画资源。关于帧动画,由于内容繁杂。我们将分为两篇进行介绍。在上一篇中,我们已经做好了

在本篇博客中,我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的帧动画资源的例子,来简要介绍以下内容:利用ActionTimeLine进行动画切割,如何使用导出的帧动画资源。关于帧动画,由于内容繁杂。我们将分为两篇进行介绍。在上一篇中,我们已经做好了前期的资源准备和CocosCodeIDE中的简单处理,本篇将主要介绍资源的使用问题。

一、使用CocosStudio资源

做好了前期的准备工作,终于到我们的重头戏(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 密码:gw3n

FrameAnimationScene.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);
    }
});

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读