Phaser Coding Tips 4 Revisited: Cloud Platforms

Examples
1

image

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:

2

I think that’s a timeline bug.

3

Thanks for confirming Samme!