Phaser Coding Tips 4 Revisited: Cloud Platforms

Following on from my revisit of Phaser Coding Tips 3, I thought I would quickly work through Coding Tips 4 (original Phaser 2 tutorial available here) which is about making Mr Dude ride cloud platforms that move along predetermined motion paths using chained tweens. Contrary to my own expectations I ended up spending hours trying to get chained tweens to work. I did also learn a few new tricks by working through the original Phaser 2 example code by the great Richard Davey. My learnings are documented in my blog here - there might be something useful for those exploring chained tween motion paths. My Phaser 3 conversion of the original tutorial example is available below.

Question for Senpai programmers;
To recreate the chained tween motion paths of the original Phaser 2 example, I ended up creating a convoluted method to read the relative values for the x and y coordinates, whereas I had expected the following to work:

`````` var tweenX = this.tweens.timeline({
targets: cloud1,
tweens: [
{x: "+=200", ease: "Linear", duration: 2000},
{x: "-=200", ease: "Linear", duration: 2000},
{x: "-=200", ease: "Linear", duration: 2000},
{x: "+=200", ease: "Linear", duration: 2000},
],
loop: -1
});
var tweenY = this.tweens.timeline({
targets: cloud1,
tweens: [
{y: "-=200", ease: "Sine.easeIn", duration: 2000},
{y: "-=200", ease: "Sine.easeOut", duration: 2000},
{y: "+=200", ease: "Sine.easeIn", duration: 2000},
{y: "+=200", ease: "Sine.easeOut", duration: 2000}
],
loop: -1
});
``````

But after the first loop, the cloud goes haywire…maybe I’m missing something simple…advice would be appreciated - the “non-working” code is here:

I think that’s a timeline bug.

Thanks for confirming Samme!