Example on how to control tweens using Ticker in CreateJS

Question

I'm working with CreateJS and wondered if anyone here has examples of controlling tweens using the Ticker object. I'm trying to get a sprite to follow a path defined by waypoints but i don't want to control each tween (in between waypoints) by time. I want to have smooth movement between each waypoint controlled by the Ticker object. I tried this code which doesn't seem to work at all.

var index = 0;

function move(){
    index++;
    if (index < path.length) {
        createjs.Tween.get(person)
        .to({x:gridSize * path[index][0] - pathOffset,y:gridSize * path[index][1] - pathOffset})
        .call(move);
    }
}
move();

createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", function(event){
    createjs.Tween.tick(1);
    stage.update();
});

This code seems to only jump between waypoints and not tween at all. Any ideas what i may be doing wrong or any code/tutorials which might help?

Answer 1

You need to add a duration(in milliseconds) to your tween, otherwise it would default to 0, this will cause the "jump", e.g.: 500 for half a second

instead of: .to({x:..., y:...})
use:        .to({x:..., y:...},500)

And a second thing: You don't NEED to call createjs.Tween.tick(1); this is usually called automatically by the Tween-class.

Here is some help and some small examples: http://www.createjs.com/Docs/TweenJS/classes/Tween.html

Advanced Examples: https://github.com/CreateJS/TweenJS/tree/master/examples