https://codepen.io/samme/pen/BaGXPae
A Discord user asked for this and wayfinder had a good idea. Key points:
- You can tween properties separately. My example tweens
xandylinearly (making a diagonal line path) andzas a yoyoQuad.easeOut. - Yoyo tweens go 1 duration forward plus 1 duration backward, so this duration is halved.
- All game objects have a
zproperty but Phaser doesn’t use it, so I used it for the arc distance. You could also use a second counter tween instead. - The arc effect is done by adjusting the
ycoordinate based on thezvalue. This works because Phaser interpolates each tweened value at each step; the adjustments never accumulate. - The
onUpdate()callback is called once per property, so you need to check thekeyfor which property you’re getting.
Horizontal or vertical arc
https://codepen.io/samme/pen/abPoZLV
This is the simpler case. You give a linear tween on one axis and a yoyo Quad.easeOut on the other axis.