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

謝謝觀賞,如果有錯誤,歡迎指正~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 弄懂js異步 講異步之前,我們必須掌握一個基礎知識-event-loop。 我們知道JavaScript的一大特點...
    DCbryant閱讀 2,752評論 0 5
  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,379評論 0 2
  • 1.JQuery 基礎 改變web開發人員創造搞交互性界面的方式。設計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,202評論 0 1
  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,270評論 0 4
  • 曾經多少次迷惘 曾經多少次惆悵 如今已成過往 我不再倔強,倔強 是否是命運的安排 是否是自我的無奈 還是我在徘徊 ...
    蟄伏的愛lby閱讀 354評論 0 0