How to tween object on curved path?

Phaser 3
1

In my game I want to make the car turn and tween around the curved quarter circular path as shown below, I cannot able to figure out how to achieve the this.
carTurningTween

1 Like
2

You change the coordinates object, and you rotate the image, what’s the problem?

3

Do you mean by this way -

this.tweens.add({
	targets : car, 
	ease : 'Quad.easeOut' ,
	props : {
		x : { value : '+='+96},
		y: { value : '-='+96},
		angle:90,
	}, 
	yoyo : false, 
	repeat : 0,
	duration : 500,
	callbackScope : this
}, this) ;

Doing this by applying above tween moves the car on the desired position and rotates correctly, but the car follows straight line path(red line in image below) , I want the method to move the car following curved circular path(green line in image below).
carTweening1

1 Like
4

See paths/followers/rotate to path.

5

Thanks samme for the reply, tried the example but using this spline curve method I have not able to get the smooth quarter circular curve which I wanted.
So I used this ellipse path method and it worked perfectly.

let curve = new Phaser.Curves.Ellipse(196,292,96,96,180, 270);

let car = this.add.follower(curve, 196,292, 'car');
			
car.startFollow({
	duration: 500,
	yoyo: false,
	repeat: 0,
	rotateToPath: true,
	verticalAdjust: true, 
	rotationOffset:90
});