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);

谢谢观赏，如果有错误，欢迎指正～