Cocos2D-JS 动作回调取得当前动作精灵

今天碰到一个需求,要在动作结束的回调函数中取到当前动作的精灵,实现在执行动作之后自动 remove 掉这个精灵。查了一下,没有结果。然后看了一下 API ,发现利用 cc.CallFunc 构造函数中的 data 参数可以解决这个问题。
下面是 cc.CallFunc 的构造函数和 init 方法的实现:

ctor:function(selector, selectorTarget, data){
    cc.FiniteTimeAction.prototype.ctor.call(this);

    if(selector !== undefined){
        if(selectorTarget === undefined)
            this.initWithFunction(selector);
        else this.initWithFunction(selector, selectorTarget, data);
    }
},


initWithFunction:function (selector, selectorTarget, data) {
    if (selectorTarget) {
        this._data = data;
        this._callFunc = selector;
        this._selectorTarget = selectorTarget;
    }
    else if (selector)
        this._function = selector;
    return true;
},

参数 selector 和 selectorTarget 不赘述。注意到在 init 方法中,将 ctor 方法传入的 data 赋给了 this 的 _data 。
再看它的 execute 方法 :

execute:function () {
    if (this._callFunc != null)         //CallFunc, N, ND
        this._callFunc.call(this._selectorTarget, this.target, this._data);
    else if(this._function)
        this._function.call(null, this.target);
},

在执行这个回调的时候将 this._data 传入了原方法中,这样我们就可以将当前动作精灵指针传入回调函数,并在回调中取得它。

先构造一个动作队列并运行,代码如下:

    var actionSprite = new cc.Sprite("res/me.png");
    actionSprite.setAnchorPoint(0, 0);
    actionSprite.x = 0;
    actionSprite.y = 0;
    this.addChild(actionSprite, 1);
    
    var moveAction0 = cc.MoveBy(0.5, cc.p(cc.winSize.width/2, 0));
    var moveAction1 = cc.MoveBy(0.5, cc.p(0, cc.winSize.height/2));
    var moveAction2 = cc.MoveBy(0.5, cc.p(-cc.winSize.width/2, 0));
    var moveAction3 = cc.MoveBy(0.5, cc.p(0, -cc.winSize.height/2));
    var actionCallbackFunction = cc.CallFunc(this.actionCallbackFunction, this);
    var actionFinishCallbackFunction = cc.CallFunc(this.actionFinishCallFunction, this);
    var actionArray = [];
    actionArray.push(moveAction0);
    actionArray.push(actionCallbackFunction);
    actionArray.push(moveAction1);
    actionArray.push(actionCallbackFunction);
    actionArray.push(moveAction2);
    actionArray.push(actionCallbackFunction);
    actionArray.push(moveAction3);
    actionArray.push(actionFinishCallbackFunction);
    var actionSequence = cc.Sequence(actionArray);
    actionSprite.runAction(actionSequence);
    
    
},

    actionCallbackFunction : function(){
        cc.log("Action Callback Function");
},

    actionFinishCallFunction : function(){
        cc.log("Action Finish Callback Function");
},

下面对以上代码做一下小修改,来取得执行动作的精灵。
首先我们在构造回调函数时要将精灵的指针作为 data 参数传入:

    var actionCallbackFunction = cc.CallFunc(this.actionCallbackFunction, this, actionSprite);
    var actionFinishCallbackFunction = cc.CallFunc(this.actionFinishCallFunction, this, actionSprite);

其次我们要在定义回调方法的参数表中加入 data ,以便在函数实现中使用它:

actionCallbackFunction : function(data){
    cc.log("Action Callback Function");
    if (data != null && data != "undefine"){
        cc.log("Get Data");
        cc.log(typeof data);
        cc.log(data.x);
        cc.log(data.y);
    }
},

actionFinishCallFunction : function(data){
    cc.log("Action Finish Callback Function");
    if (data != null && data != "undefine"){
        cc.log("Get Data");
        cc.log(typeof data);
        cc.log(data.x);
        cc.log(data.y);
    }
    data.removeFromParent();
},

运行试试看~

控制台这一部分输出为:

JS: Action Callback Function
JS: Get Data
JS: object
JS: 400
JS: 0
JS: Action Callback Function
JS: Get Data
JS: object
JS: 400
JS: 225
JS: Action Callback Function
JS: Get Data
JS: object
JS: 0
JS: 225
JS: Action Finish Callback Function
JS: Get Data
JS: object
JS: 0
JS: 0

看到在每一次动作执行完毕后输出 data 类型为 object 和精灵当前的坐标,最后的 removeFromParent() 也成功了。

接下来试一下来构造一个函数,返回一个动作队列。这样,只要创建动作队列然后在精灵上 runAction 就自动实现了精灵动作并在动作结束之后自动清掉这个精灵。
创建动作队列的代码如下:

createActionSequence : function(actionSpritePointer){
    
    var moveAction0 = cc.MoveBy(0.5, cc.p(cc.winSize.width/2, 0));
    var moveAction1 = cc.MoveBy(0.5, cc.p(0, cc.winSize.height/2));
    var moveAction2 = cc.MoveBy(0.5, cc.p(-cc.winSize.width/2, 0));
    var moveAction3 = cc.MoveBy(0.5, cc.p(0, -cc.winSize.height/2));
    var actionCallbackFunction = cc.CallFunc(this.actionCallbackFunction, this, actionSpritePointer);
    var actionFinishCallbackFunction = cc.CallFunc(this.actionFinishCallFunction, this, actionSpritePointer);
    
    var actionArray = [];
    actionArray.push(moveAction0);
    actionArray.push(actionCallbackFunction);
    actionArray.push(moveAction1);
    actionArray.push(actionCallbackFunction);
    actionArray.push(moveAction2);
    actionArray.push(actionCallbackFunction);
    actionArray.push(moveAction3);
    actionArray.push(actionFinishCallbackFunction);
    
    var actionSequence = cc.Sequence(actionArray);
    
    return actionSequence;
    
}

参数 actionSpritePointer 要在创建时传入要执行这个动作队列的精灵,这样,就能把这个精灵的指针传入回调函数中。
创建动作队列并执行的代码如下:

    var actionSprite0 = new cc.Sprite("res/me.png");
    var actionSprite1 = new cc.Sprite("res/me.png");
    
    actionSprite0.setAnchorPoint(0, 0);
    actionSprite1.setAnchorPoint(1, 0);
    
    actionSprite0.x = 0;
    actionSprite0.y = 0;
    
    actionSprite1.x = cc.winSize.width/2;
    actionSprite1.y = 0;
    
    this.addChild(actionSprite0);
    this.addChild(actionSprite1);
    
    var actionSequence0 = this.createActionSequence(actionSprite0);
    var actionSequence1 = this.createActionSequence(actionSprite1);
    
    cc.log(typeof actionSequence0);
    
    actionSprite0.runAction(actionSequence0);
    actionSprite1.runAction(actionSequence1);

谢谢观赏,如果有错误,欢迎指正~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,265评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,078评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,852评论 0 347
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,408评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,445评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,772评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,921评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,688评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,130评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,467评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,617评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,276评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,882评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,740评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,967评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,315评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,486评论 2 348

推荐阅读更多精彩内容

  • 弄懂js异步 讲异步之前,我们必须掌握一个基础知识-event-loop。 我们知道JavaScript的一大特点...
    DCbryant阅读 2,706评论 0 5
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,330评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,167评论 0 1
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,216评论 0 4
  • 曾经多少次迷惘 曾经多少次惆怅 如今已成过往 我不再倔强,倔强 是否是命运的安排 是否是自我的无奈 还是我在徘徊 ...
    蛰伏的爱lby阅读 262评论 0 0