Tweening Functions in CreateJS

Question

I'm working on a createjs game where an image is held inside of a container. I want to tween the image to a location on the screen and switch the image to another image. After a number of seconds pass, I want to remove the new image from the canvas/screen.

Currently, I'm passing an (evt) into the function, but the other games/examples all don't bother with this part?

It works in the first .call function, but the part where I commented out after the .wait and the second .call does not work. Suddenly, TheThingBeingTweened is undefined?

Any tip in the right direction should be helpful.

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

You also can expand your object by overwriting or adding a property

For example:

// 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
            //...

        });

It is very useful when you have one events controller for many repetitive situations.

Answer 2

While the exact reason why theThingBeingTweened is undefined is unclear, you can bypass this limitation easily by declaring theThingBeingTweened outside of the scope of your call chain, and then just don't re-initialize it with the undefined value in the second call.

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 3

The call method does not result in a dispatched event. There is no event parameter, so there is no event.target.

Instead, you can pass parameters to the call method (2nd argument).

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

Note that if it was an event, then the target would be the tween instance, not thing tween's target. This is the case when you use addEventListener or on for the supported events of Tweens (which is just "change"). http://www.createjs.com/docs/tweenjs/classes/Tween.html#event_change