Jump to content

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
        var xTween = this.game.add.tween(this.body)
        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.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...