Tween along custom paths

[markp]

I'm pretty new to Phaser.  Started on 1.6 and just moved to 2.0 and think it is a great framework.  I used CAAT animation toolkit in the past and liked the ability to set paths for sprites to follow. 

 

The feature allowed me to setup a bezier curve with specific parameters so that by changing the parameters I could get a sprite to follow a different curve.

 

Using Phaser v2.0 I thought I might be able to do the same using:

tween.to(pos, 5000, Phaser.Easing.Exponential.InOut, false).interpolation(Phaser.Math.bezierInterpolation).start()

The movement from the code above looks linear rather than curved.  So my question is how do I get a sprite to move along a bezier path that I can also configure the parameters of the bezier curve?

 

[Dev Monster]

Thats a good question. I also need this same functionality but from the other posts I've read, it doesnt seem to be available yet.

[wayfinder]

A bezier spline is actually a function of TWO one-dimensional bezier interpolations, one for X and one for Y, both iterated over a "time", or in your case, over the deltaX for the one dimension and the deltaY for the other. To get a smooth curve, you must apply bezierInterpolation to your coordinates, a third bezier function can then be used to go over the resulting curve smoothly. 

 

As far as I can tell from the code, Phaser.math.bezierInterpolation(v, k) takes an array of numeric values for v (the docs say "Number", but the code handles multi-dimensional input), and a numeric value for k (which is basically the amount of easing). 

 

But I tried to implement it and it threw me a TypeError in Phaser.Math.bernstein (where this.factorial is called, and that doesn't seem to be defined anywhere in Phaser).

 

So I can tell you about the theory, but I can't offer a working example.

 

Here's my test code for anyone who wants to take a crack at it:

testBezier : function() {			this.p1 = [ 0, 0 ];  								// point 1		this.p2 = [ 100 , 100 ];							// point 2				this.rangeX = this.p2[ 0 ] - this.p1[ 0 ];							this.rangeY = this.p2[ 1 ] - this.p1[ 1 ];									this.k = 0.5;									// easing				this.steps = 100;		this.stepSizeX = this.rangeX / this.steps;		this.stepSizeY = this.rangeY / this.steps;		this.bezierOutput = new Array;				for (i = 1; i < this.steps; i++) {					this.v = [ this.p1[ 0 ] + i * this.stepSizeX, this.p2[ 0 ] + i * this.stepSizeY];					this.bezierX = this.math.bezierInterpolation(this.v, this.k);			this.bezierY = this.math.bezierInterpolation(this.v, this.k);				this.bezierOutput[i] = [ this.bezierX, this.bezierY ];				}				console.log(this.bezierOutput);			}

Rich, is this something that's just not there yet? 

[DeliriousRhino]

This worked for me

 

var moveSprite = this.game.add.sprite(startX, startY, 'spritekey');

var tween = game.add.tween(moveSprite).to({

x: [startX, firstBezierPointX, secondBezierPointX, endX],

y: [startY, firstBezierPointy, secondBezierPointY, endY],

}, 1000,Phaser.Easing.Quadratic.Out, true).interpolation(function(v, k){

    return Phaser.Math.bezierInterpolation(v, k);

});

[JimmyJimmy]

Thank you DeliriousRhino, that worked Great!

[ForgeableSum]

var moveSprite = this.game.add.sprite(startX, startY, 'spritekey');var tween = game.add.tween(moveSprite).to({x: [startX, firstBezierPointX, secondBezierPointX, endX],y: [startY, firstBezierPointy, secondBezierPointY, endY],}, 1000,Phaser.Easing.Quadratic.Out, true).interpolation(function(v, k){    return Phaser.Math.bezierInterpolation(v, k);});

 

Can someone help me understand this code?

 

What is firstBezierPointX, secondBezierPointX, etc? How are those defined? 

 

EDIT: nevermind, I've figured it out. firstBezierPointX and firstBezierPointY are "control points" on the curve. You set the control points based on what you want the bezier curve to look like. For example if you set just one x/y control point, it would be a quadratic curve.