CreateJSのトゥイーン機能

Question

私はcreatejsゲームで画像をコンテナ内に保持しています。私は画面上の場所に画像をトゥイーンし、別の画像に切り替える必要があります。数秒後に、キャンバス/スクリーンから新しい画像を削除したいと思います。

現在、私は関数に（evt）を渡していますが、他のゲーム/例はすべてこの部分を気にしません。

これは最初の.call関数で動作しますが、.waitと2番目の.callの後にコメントアウトした部分は機能しません。突然、TheThingBeingTweenedはundefinedですか？

正しい方向のチップが役立ちます。

createjs.Tween 
     .get(inkContainer, {onChange: onInkContainerTweenChange}) 
     .to({ 
       y: playerContainer.y + (Math.random() * 200 - 100), 
       x: playerContainer.x + (Math.random() * 200) 
      }, 8000) 
     .call(function (evt) { 
    var theThingBeingTweened = evt.target; 

    //self.stage.removeChild(theThingBeingTweened); 

    var theContainer = theThingBeingTweened.parent; 
    theContainer.removeChild(theThingBeingTweened); 

    splatContainer = new createjs.Container(); 
    splat = new 
    createjs.Bitmap(queue.getResult("splat")); 
    splatContainer.addChild(splat); 
    splatContainer.x = theThingBeingTweened.x; 
    splatContainer.y = theThingBeingTweened.y; 
    theContainer.addChild(splatContainer); 
}); 

//.wait(3000) 
//.call(function (evt) { 
// var theThingBeingTweened = evt.target; 
// self.stage.removeChild(theThingBeingTweened); 
//}); 

Answer 1

theThingBeingTweenedがundefinedある正確な理由は不明ですが、あなたは、コールチェーンの範囲のtheThingBeingTweened外を宣言することで簡単にこの制限を回避することができ、その後、ちょうどundefined値でそれを再初期化しません2番目の呼び出しで。

var theThingBeingTweened; 

createjs.Tween 
     .get(inkContainer, {onChange: onInkContainerTweenChange}) 
     .to({ 
       y: playerContainer.y + (Math.random() * 200 - 100), 
       x: playerContainer.x + (Math.random() * 200) 
      }, 8000) 
     .call(function (evt) { 
    theThingBeingTweened = evt.target; 

    //self.stage.removeChild(theThingBeingTweened); 

    var theContainer = theThingBeingTweened.parent; 
    theContainer.removeChild(theThingBeingTweened); 

    splatContainer = new createjs.Container(); 
    splat = new 
    createjs.Bitmap(queue.getResult("splat")); 
    splatContainer.addChild(splat); 
    splatContainer.x = theThingBeingTweened.x; 
    splatContainer.y = theThingBeingTweened.y; 
    theContainer.addChild(splatContainer); 
}).wait(3000).call(function (evt) { 
    self.stage.removeChild(theThingBeingTweened); 
}); 

Answer 2

call方法が送出されたイベントでない結果はありません。 eventパラメータがないため、event.targetはありません。

代わりに、呼び出しメソッド（第2引数）にパラメータを渡すことができます。

createjs.Tween 
    .get(inkContainer, {onChange: onInkContainerTweenChange}) 
    .to({ 
      y: playerContainer.y + (Math.random() * 200 - 100), 
      x: playerContainer.x + (Math.random() * 200) 
     }, 8000) 
    .call(function (thing) { 
     // The thing being tweened is the first argument 
    }, [inkContainer, otherArg], optionalScope); 

それがイベントだった場合、そのターゲットはトゥイーンインスタンス、ないものトゥイーンのターゲットになることに注意してください。これは、サポートされているTweensイベント（単に「変更」）にaddEventListenerまたはonを使用した場合です。 http://www.createjs.com/docs/tweenjs/classes/Tween.html#event_change

Answer 3

また、例えばプロパティ

を上書きするか、追加することによって、あなたのオブジェクトを展開することができます

// It coud be instance or singleton it can knows everything to handle your issue 
var imageHandler = new ImageHandlerClass(); 

Object.defineProperty(inkContainer, "imageHandler", { value:imageHandler , configurable: true, writable: true, enumerable: true }); 

createjs.Tween 
     .get(inkContainer) 
     .to({ 
       y: playerContainer.y + (Math.random() * 200 - 100), 
       x: playerContainer.x + (Math.random() * 200) 
      }, 8000) 
     .call(function (evt) { 
      var linkToImageHandler = evt.target.imageHandler; 
      // Do something with image using imageHandler defined erlier 
      //... 

     }); 

あなたは多くの繰り返しの状況に対して1つのイベントコントローラを持っているときには非常に便利です。