Thrown arc tween

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 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

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.