{"author_link":"\/users\/tomorrowtoday","author_name":"TomorrowToday","author_uid":"tomorrowtoday","comments":[],"epoch":1633570070,"event":"LD49","format":"md","ldjam_node_id":272836,"likes":6,"metadata":{"p_key":"161083","p_author":"TomorrowToday","p_authorkey":"1264155","p_urlkey":"384073","p_title":"Making Floaty Orbiting Islands","p_cat":"LDJam ","p_event":"LD49","p_time":"1633570070","p_likes":"6","p_comments":"0","p_status":"WAYBACK","us_key":"1264155","us_name":"TomorrowToday","us_username":"tomorrowtoday","event_start":"1633046400","event_key":"119","event_name":"Ludum Dare 49"},"node":{"_collation":{"body_sanitizer":"TextUtils::SanitizeHTML via existing importer","event":"LD49","removed_author":false},"_superparent":258323,"_trust":1,"author":264155,"body":"[Edge of Entropy](ldj.am\/$264166)'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!\n\n![Close-up of an Elemental Island and it's Power Orbs floating](\/\/\/raw\/bd7\/04\/z\/479d3.gif)\n\n## Making Stuff Orbit!\nFirst I created an elliptical path for the orbit:\n```javascript\n\/\/ Scene Code:\n\nconst OrbitStarts = {\n    fire: 0 \/\/far right\n    earth: 0.25 \/\/bottom\n    air: 0.5 \/\/far left\n    water: 0.75 \/\/top\n}\nlet orbitPath = new  Phaser.Curves.Path(ORBIT_START.x, ORBIT_START.y); \/\/Note: not the center of orbit!\norbitPath.ellipseTo(ORBIT_WIDTH \/ 2, ORBIT_HEIGHT \/ 2, 0, 360, true, ORBIT_ANGLE);\n\nconst fireIsland = new Island(scene, 'FIRE', orbitPath, OrbitStarts.fire);\nconst earthIsland = new Island(scene, 'EARTH', orbitPath, OrbitStarts.earth);\n\/\/etc...\n```\nNext 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:\n```javascript\n\/\/ Island Code:\n\nconst orbOffsets = [\n    { x:  0, y: -20 },\n    \/\/... etc\n]\nconst startPoint = orbitPath.getPoint(0);\nlet orbs = []\nconst island = scene.add.follower(\n    orbitPath,\n    startPoint.x,\n    startPoint.y,\n    'islandSpriteKey'\n);\n\/\/ make an orb for each offset\norbOffsets.forEach((offset)=> {\n    orbs.push(scene.add.follower(\n        orbitPath,\n        startPoint.x + offset.x,\n        startPoint.y + offset.y,\n        'orbSpriteKey'\n    ));\n});\n```\n\nNothing has actually started orbiting yet, so let's make everything move!\n```javascript\n\/\/ Island Code:\n\nisland.startFollow({\n    duration:  ORBIT_PERIOD,\n    yoyo:  false,\n    repeat: -1,\n    rotateToPath:  false,\n    positionOnPath:  true, \/\/ still bobs when true and makes life easier\n    startAt:  orbitStart, \/\/ between 0 and 1\n});\n\nthis.orbs.forEach((orb) => {\n    orb.startFollow({\n        duration:  ORBIT_PERIOD,\n        yoyo:  false,\n        repeat: -1,\n        rotateToPath:  false,\n        positionOnPath:  false, \/\/ Critical! Must be false for offsets to work\n        startAt:  orbitStart, \/\/ between 0 and 1\n    });\n});\n```\nEverything orbits now. Awesome! You can also pause the orbiting with `pauseFollow` and resume it with `resumeFollow`. Excellent!\n\n## Now Add Floating! \nNow to add the floating effect simply add a tween to each floaty object's `pathOffset.y`: \n```javascript\n\/\/ Island Code:\n\n\/\/ floaty island!\nisland.pathOffset = new Phaser.Math.Vector2(0, 0); \/\/ not always initialized? :\/\nscene.tweens.add({\n    targets: island.pathOffset,\n    y: Phaser.Math.RND.pick(['-=3', '+=3']), \/\/ bigger\/smaller for more\/less bobbing\n    yoyo: true,\n    duration: Phaser.Math.RND.between(1000, 2000), \/\/ no synced bobbing\n    repeat: -1,\n    ease: 'Sine.easeInOut',\n});\n\/\/ floaty orbs!\norbs.forEach((orb)=>{\n    orb.pathOffset = new Phaser.Math.Vector2(0, 0); \/\/ not always initialized? :\/\n    scene.tweens.add({\n        targets: orb.pathOffset,\n        y: Phaser.Math.RND.pick(['-=2', '+=2', '-=3', '+=3']),\n        yoyo: true,\n        duration: Phaser.Math.RND.between(1500, 2500),\n        repeat: -1,\n        ease: 'Sine.easeInOut',\n    });\n});\n```\nIf you're interested in seeing our cobbled-together jam code, [check out our Github](https:\/\/github.com\/hatchlings\/ludum-dare-49\/tree\/main\/src) and [Play Edge of Entropy](ldj.am\/$264166) to see the Elemental Islands in all their glory. Thanks for reading and let me know in the comments what you think. Cheers!!","comments":1,"comments-timestamp":"2021-10-07T02:52:36Z","created":"2021-10-05T19:05:34Z","files":[],"files-timestamp":0,"id":272836,"love":6,"love-timestamp":"2021-10-07T20:53:52Z","meta":[],"modified":"2021-10-07T20:53:52Z","name":"Making Floaty Orbiting Islands","node-timestamp":"2021-10-07T01:28:12Z","parent":264166,"parents":[1,5,9,258323,264166],"path":"\/events\/ludum-dare\/49\/edge-of-entropy\/making-floaty-orbiting-islands-scream","published":"2021-10-07T01:27:50Z","scope":"public","slug":"making-floaty-orbiting-islands-scream","subsubtype":"","subtype":"","type":"post","version":844195},"node_metadata":{"n_key":"272836","n_urlkey":"384073","n_parent":"264166","n_path":"\/events\/ludum-dare\/49\/edge-of-entropy\/making-floaty-orbiting-islands-scream","n_slug":"making-floaty-orbiting-islands-s","n_type":"post","n_subtype":"","n_subsubtype":"","n_author":"264155","n_created":"1633460734","n_modified":"1633640032","n_version":"844195","n_status":"WAYBACK"},"source_url":"https:\/\/ldjam.com\/events\/ludum-dare\/49\/edge-of-entropy\/making-floaty-orbiting-islands-scream","text":"[Edge of Entropy](ldj.am\/$264166)'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!\n\n![Close-up of an Elemental Island and it's Power Orbs floating](\/\/\/raw\/bd7\/04\/z\/479d3.gif)\n\n## Making Stuff Orbit!\nFirst I created an elliptical path for the orbit:\n```javascript\n\/\/ Scene Code:\n\nconst OrbitStarts = {\n    fire: 0 \/\/far right\n    earth: 0.25 \/\/bottom\n    air: 0.5 \/\/far left\n    water: 0.75 \/\/top\n}\nlet orbitPath = new  Phaser.Curves.Path(ORBIT_START.x, ORBIT_START.y); \/\/Note: not the center of orbit!\norbitPath.ellipseTo(ORBIT_WIDTH \/ 2, ORBIT_HEIGHT \/ 2, 0, 360, true, ORBIT_ANGLE);\n\nconst fireIsland = new Island(scene, 'FIRE', orbitPath, OrbitStarts.fire);\nconst earthIsland = new Island(scene, 'EARTH', orbitPath, OrbitStarts.earth);\n\/\/etc...\n```\nNext 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:\n```javascript\n\/\/ Island Code:\n\nconst orbOffsets = [\n    { x:  0, y: -20 },\n    \/\/... etc\n]\nconst startPoint = orbitPath.getPoint(0);\nlet orbs = []\nconst island = scene.add.follower(\n    orbitPath,\n    startPoint.x,\n    startPoint.y,\n    'islandSpriteKey'\n);\n\/\/ make an orb for each offset\norbOffsets.forEach((offset)=> {\n    orbs.push(scene.add.follower(\n        orbitPath,\n        startPoint.x + offset.x,\n        startPoint.y + offset.y,\n        'orbSpriteKey'\n    ));\n});\n```\n\nNothing has actually started orbiting yet, so let's make everything move!\n```javascript\n\/\/ Island Code:\n\nisland.startFollow({\n    duration:  ORBIT_PERIOD,\n    yoyo:  false,\n    repeat: -1,\n    rotateToPath:  false,\n    positionOnPath:  true, \/\/ still bobs when true and makes life easier\n    startAt:  orbitStart, \/\/ between 0 and 1\n});\n\nthis.orbs.forEach((orb) => {\n    orb.startFollow({\n        duration:  ORBIT_PERIOD,\n        yoyo:  false,\n        repeat: -1,\n        rotateToPath:  false,\n        positionOnPath:  false, \/\/ Critical! Must be false for offsets to work\n        startAt:  orbitStart, \/\/ between 0 and 1\n    });\n});\n```\nEverything orbits now. Awesome! You can also pause the orbiting with `pauseFollow` and resume it with `resumeFollow`. Excellent!\n\n## Now Add Floating! \nNow to add the floating effect simply add a tween to each floaty object's `pathOffset.y`: \n```javascript\n\/\/ Island Code:\n\n\/\/ floaty island!\nisland.pathOffset = new Phaser.Math.Vector2(0, 0); \/\/ not always initialized? :\/\nscene.tweens.add({\n    targets: island.pathOffset,\n    y: Phaser.Math.RND.pick(['-=3', '+=3']), \/\/ bigger\/smaller for more\/less bobbing\n    yoyo: true,\n    duration: Phaser.Math.RND.between(1000, 2000), \/\/ no synced bobbing\n    repeat: -1,\n    ease: 'Sine.easeInOut',\n});\n\/\/ floaty orbs!\norbs.forEach((orb)=>{\n    orb.pathOffset = new Phaser.Math.Vector2(0, 0); \/\/ not always initialized? :\/\n    scene.tweens.add({\n        targets: orb.pathOffset,\n        y: Phaser.Math.RND.pick(['-=2', '+=2', '-=3', '+=3']),\n        yoyo: true,\n        duration: Phaser.Math.RND.between(1500, 2500),\n        repeat: -1,\n        ease: 'Sine.easeInOut',\n    });\n});\n```\nIf you're interested in seeing our cobbled-together jam code, [check out our Github](https:\/\/github.com\/hatchlings\/ludum-dare-49\/tree\/main\/src) and [Play Edge of Entropy](ldj.am\/$264166) to see the Elemental Islands in all their glory. Thanks for reading and let me know in the comments what you think. Cheers!!","title":"Making Floaty Orbiting Islands","wayback_source":[]}