Edge of Entropy's setting being Space, we knew early that we wanted the Elemental Islands to orbit a central point and appear to float by bobbing slightly. I'm pretty new to Phaser and game development so this was a bit of a challenge! We've had a few comments/questions on them so I figured I'd share how we did it (with a little cleaning up). If you know a different approach, I'd love to hear about it in the comments! And who knows maybe this'll save you a couple hours and headache in the future!

Making Stuff Orbit!

First I created an elliptical path for the orbit: ```javascript // Scene Code:

const OrbitStarts = { fire: 0 //far right earth: 0.25 //bottom air: 0.5 //far left water: 0.75 //top } let orbitPath = new Phaser.Curves.Path(ORBITSTART.x, ORBITSTART.y); //Note: not the center of orbit! orbitPath.ellipseTo(ORBITWIDTH / 2, ORBITHEIGHT / 2, 0, 360, true, ORBIT_ANGLE);

const fireIsland = new Island(scene, 'FIRE', orbitPath, OrbitStarts.fire); const earthIsland = new Island(scene, 'EARTH', orbitPath, OrbitStarts.earth); //etc... Next I made each Island and it's Power Orbs a `PathFollower`--a fancy Sprites that auto-tweens along a path--using `scene.add.follower` instead of `scene.add.sprite`. The Power Orbs are also offset from the Island so I added their offsets into the island's starting location: javascript // Island Code:

const orbOffsets = [ { x: 0, y: -20 }, //... etc ] const startPoint = orbitPath.getPoint(0); let orbs = [] const island = scene.add.follower( orbitPath, startPoint.x, startPoint.y, 'islandSpriteKey' ); // make an orb for each offset orbOffsets.forEach((offset)=> { orbs.push(scene.add.follower( orbitPath, startPoint.x + offset.x, startPoint.y + offset.y, 'orbSpriteKey' )); }); ```

Nothing has actually started orbiting yet, so let's make everything move! ```javascript // Island Code:

island.startFollow({ duration: ORBIT_PERIOD, yoyo: false, repeat: -1, rotateToPath: false, positionOnPath: true, // still bobs when true and makes life easier startAt: orbitStart, // between 0 and 1 });

this.orbs.forEach((orb) => { orb.startFollow({ duration: ORBIT_PERIOD, yoyo: false, repeat: -1, rotateToPath: false, positionOnPath: false, // Critical! Must be false for offsets to work startAt: orbitStart, // between 0 and 1 }); }); `` Everything orbits now. Awesome! You can also pause the orbiting withpauseFollowand resume it withresumeFollow`. Excellent!

Now Add Floating!

Now to add the floating effect simply add a tween to each floaty object's pathOffset.y: ```javascript // Island Code:

// floaty island! island.pathOffset = new Phaser.Math.Vector2(0, 0); // not always initialized? :/ scene.tweens.add({ targets: island.pathOffset, y: Phaser.Math.RND.pick(['-=3', '+=3']), // bigger/smaller for more/less bobbing yoyo: true, duration: Phaser.Math.RND.between(1000, 2000), // no synced bobbing repeat: -1, ease: 'Sine.easeInOut', }); // floaty orbs! orbs.forEach((orb)=>{ orb.pathOffset = new Phaser.Math.Vector2(0, 0); // not always initialized? :/ scene.tweens.add({ targets: orb.pathOffset, y: Phaser.Math.RND.pick(['-=2', '+=2', '-=3', '+=3']), yoyo: true, duration: Phaser.Math.RND.between(1500, 2500), repeat: -1, ease: 'Sine.easeInOut', }); }); ``` If you're interested in seeing our cobbled-together jam code, check out our Github and Play Edge of Entropy to see the Elemental Islands in all their glory. Thanks for reading and let me know in the comments what you think. Cheers!!