Thrown arc tween

A Discord user asked for this and wayfinder had a good idea. Key points:

  • You can tween properties separately. My example tweens x and y linearly (making a diagonal line path) and z as a yoyo Quad.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 the z 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 the key 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.