0

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?

Gary Willoughby
  • 50,926
  • 41
  • 133
  • 199

1 Answers1

2

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

olsn
  • 16,644
  • 6
  • 59
  • 65
  • Thanks but I want to control the ticks manually because the waypoints are not equal distances apart therefor if I used a timer the sprite would be faster across waypoints that are further away from each other. – Gary Willoughby Mar 12 '13 at 00:20
  • If your waypoints are not equally apart you should calculate the distance to the next waypoint and set the duration based on the distance. In any case you HAVE to set a duration if you don't want your person to "jump" - how should the TweenEngine know how much to advance if no duration is set? If you still want to control it yourself you can use `.get(person,{useTicks:true}).to(...)` then the duration is to be defined in ticks, not seconds. But imho the easiest way is to get the distance and multiply it by some speedfactor. – olsn Mar 12 '13 at 08:36
  • Thanks, my problem was exactly that, i needed to specify the duration of the tween. I recalculate this based on the distance of the waypoints and everything works great! ta. :) – Gary Willoughby Mar 12 '13 at 21:11