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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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