A Discord user asked for this and wayfinder had a good idea. Key points:
- You can tween properties separately. My example tweens
x
andy
linearly (making a diagonal line path) andz
as a yoyoQuad.easeOut
. - Yoyo tweens go 1 duration forward plus 1 duration backward, so this duration is halved.
- All game objects have a
z
property 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
y
coordinate based on thez
value. 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 thekey
for which property you’re getting.
Horizontal or vertical arc
This is the simpler case. You give a linear tween on one axis and a yoyo Quad.easeOut
on the other axis.