# Curved line tween

## Recommended Posts

You can create your own easing functions and use them in tween. Easing function is taking one paramater - progress from 0 to 1 and returns one number, usually in 0 -1 range (but you can do fun things when returning other values)

Standard Phaser easing linear function looks like this:

``````function ( k ) {
return k;
}``````

For returning point on curve you will need more than one input parameter. Some time I wrote blog post (http://sbcgamesdev.blogspot.cz/2015/05/phaser-tutorial-dronshooter-simple-game_9.html) for making simple game, where I am using wiggle function to do nice and smooth random movement for enemies. Function looks like this:

``````function wiggle(aProgress: number, aPeriod1: number, aPeriod2: number): number {
var current1: number = aProgress * Math.PI * 2 * aPeriod1;
var current2: number = aProgress * Math.PI * 2 * aPeriod2;

return Math.sin(current1) * Math.cos(current2);
}``````

And in tween it is used like this (only wiggle along x axis):

``````        // random movement range
var range: number = this.game.rnd.between(60, 120);
// random duration of complete move
var duration: number = this.game.rnd.between(30000, 50000);
// random parameters for wiggle easing function
var xPeriod1: number = this.game.rnd.between(2, 13);
var xPeriod2: number = this.game.rnd.between(2, 13);

// set tweens for horizontal and vertical movement
xTween.to({ x: this.position.x + range }, duration, function (aProgress: number) {
return wiggle(aProgress, xPeriod1, xPeriod2);
}, true, 0, -1);``````

In fact, wiggle function does all the calculations inside simple one-parameter/one-return value wrapper in tween.

For bezier (catmull-rom) curves you will have to pass 4 parameters for segment points positions and one for actual progress along curve segment. You will have to call tween for x and y separately (see that blog post).

Solution I described solves move along 1 segment of curved line. But I believe, you can extend it to move along longer one - you will have to add some logic to feed your calculation function with new paramaters.