码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-05-11 09:05:27      阅读:889      评论:0      收藏:0      [点我收藏+]

标签:cocos2djs   cocostudio   帧动画   cocos2d   

在本篇博客中,我们将通过一个在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界面的分析和使用就介绍完毕了。你可以运行一下。我的部分运行效果如下:
大招效果图

技术分享

死亡效果图

技术分享

三、补充说明

为了方便大家学习研究,下面提供本教程项目文件的百度网盘下载链接:

LoginScene.js的完整源码如下:

var LoginLayer = cc.Layer.extend({
    loginScene:null,
    loginButton:null,
    nameTextField:null,
    passwordTextField:null,
    saveCheckBox:null,
    name:null,
    password:null,
    ctor:function () {
        //////////////////////////////
        // 1. super init first
        this._super();

        /////////////////////////////
        // 2. add a menu item with "X" image, which is clicked to quit the program
        //    you may modify it.

        //加载login界面的JSON资源分析,并获取loginscene对象。
        loginScene = ccs.load(res.login_json).node;
        //将loginscene对象加入到layer中。
        this.addChild(loginScene);
        //从loginScene中获取控件并注册监听事件。
        this.dealWidgets();
        return true;
    },

    //从loginScene中获取控件并注册监听事件。
    dealWidgets:function(){
        //LoginButton控件
        loginButton = ccui.helper.seekWidgetByName(loginScene, "login");
        loginButton.addTouchEventListener(this.buttonTouchEvent);
        //nameTextField输入框控件
        nameTextField = ccui.helper.seekWidgetByName(loginScene, "name");
        nameTextField.addCCSEventListener(this.textFieldEvent);
        //passwordTextField输入框
        passwordTextField = ccui.helper.seekWidgetByName(loginScene, "password");
        passwordTextField.addCCSEventListener(this.textFieldEvent);
        //checkBox控件
        saveCheckBox = ccui.helper.seekWidgetByName(loginScene, "save");
        saveCheckBox.addCCSEventListener(this.selectedStateEvent);
    },

    //CheckBox控件触发的事件处理
    selectedStateEvent: function (sender, type) {
        switch (type) {
        case ccui.CheckBox.EVENT_SELECTED:
            cc.log("Event Selected");
            break;
        case ccui.CheckBox.EVENT_UNSELECTED:
            cc.log("Event Unselected");
            break;
        default:
            break;
        }
    },

    //TextField控件触发的事件处理
    textFieldEvent:function(sender,type){
        //根据触发事件的类型进行分情况处理,从控制台输出cc.log();
        switch (type) {
        case ccui.TextField.EVENT_ATTACH_WITH_IME:
            cc.log("TextField Event Attach With Ime");
            break;
        case ccui.TextField.EVENT_DETACH_WITH_IME:
            cc.log("TextField Event Detach With Ime");
            break;
        case ccui.TextField.EVENT_INSERT_TEXT:
            cc.log("TextField Event Insert Text");
            break;
        case ccui.TextField.EVENT_DELETE_BACKWARD:
            cc.log("TextField Event Delete Backward");  
            break;
        default:
            break;
        }
    },

    //Button控件触发的事件处理
    buttonTouchEvent:function(sender,type){
        //根据触发事件的类型进行分情况处理,从控制台输出cc.log();
        switch (type) {
        case ccui.Widget.TOUCH_BEGAN:
            cc.log("loginButton Touch Began");
            //获取用户在name和password输入框的输入。使用getString()方法获得内容。
            cc.log("username : " + nameTextField.getString());
            cc.log("password : " + passwordTextField.getString());
            //获取用户是否勾选CheckBox,使用isSelected()方法获取,返回boolean。
            cc.log("saveState : " + saveCheckBox.isSelected());
            break;
        case ccui.Widget.TOUCH_MOVED:
            cc.log("loginButton Touch Moved");
            break;
        case ccui.Widget.TOUCH_ENDED:
            cc.log("loginButton Touch Ended");
            break;
        case ccui.Widget.TOUCH_CANCELED:
            cc.log("loginButton Touch Canceled");
            break;
        default:
            break;
        }
    }
});

var LoginScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new LoginLayer();
        this.addChild(layer);
    }
});

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

标签:cocos2djs   cocostudio   帧动画   cocos2d   

原文地址:http://blog.csdn.net/qiumengchen12/article/details/45623963

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!