# \[WIP\] Recreating EarthBound’s Battle Backgrounds with WebGL + Phaser 3 - Tutorial Series **URL:** \ **Category:** Showcase\ **Created:** [October 7, 2025, 4:24pm UTC](https://phaser.discourse.group/t/wip-recreating-earthbound-s-battle-backgrounds-with-webgl-phaser-3-tutorial-series/15498 "2025-10-07T16:24:19Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\ **Post date:** [October 7, 2025, 4:24pm UTC](https://phaser.discourse.group/t/wip-recreating-earthbound-s-battle-backgrounds-with-webgl-phaser-3-tutorial-series/15498/1 "2025-10-07T16:24:20Z")
Hey everyone! 👋 I’ve been working on a tutorial series inspired by the _EarthBound_ battle backgrounds — those hypnotic, looping visuals that were surprisingly advanced for the SNES era. In this series, we pull back the curtain and **rebuild each effect from scratch** using **WebGL shaders and Phaser 3**. Each effect is covered in two parts: 1. **Shader Breakdown:** A plain WebGL explanation for how the math and fragment logic work. 2. **Phaser Implementation:** How to bring the effect into your Phaser projects using custom pipelines. ### ✅ Effects covered - Palette Cycling - Background Scrolling - Horizontal Oscillation - Vertical Oscillation - Interleaved Horizontal Oscillation - Transparency Finally, I’ll be sharing how to **combine multiple effects** into a single composite shader pass — perfect for dynamic, animated battle scenes or retro-style transitions. Here’s a quick preview from the demo scene I’ve been building: [![](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/0c377382271c037a10560d55c31a60b3ccf62452.jpeg "EarthBound Battle FX in Phaser 3 — Shader Combo Preview") ](https://www.youtube.com/watch?v=hnB0UP24cKc) 🎥 **Watch the series here:** [https://youtube.com/playlist?list=PLmcXe0-sfoSgbU24wCN6hdtibMmz68KVe&si=tUk4JBe4622DPoV2](https://youtube.com/playlist?list=PLmcXe0-sfoSgbU24wCN6hdtibMmz68KVe&si=tUk4JBe4622DPoV2) Would love to hear your thoughts or see other Phaser shader experiments you’ve created! ---
**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\ **Post date:** [November 11, 2025, 11:52am UTC](https://phaser.discourse.group/t/wip-recreating-earthbound-s-battle-backgrounds-with-webgl-phaser-3-tutorial-series/15498/2 "2025-11-11T11:52:48Z")
New videos in the series are now available! Learn more about background scrolling here: [![](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/e/ec37997624bba84eddc7703d242d5ef63fbe3c41.jpeg "Background Scrolling Explained: Recreate EarthBound’s Backgrounds in WebGL") ](https://www.youtube.com/watch?v=wiMN_lio9BA) [![](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/5573df9656c0ceaabde4c64750ba90434eacac70.jpeg "Phaser 3 Shader Tutorial — EarthBound’s Scrolling Background Effect") ](https://www.youtube.com/watch?v=4a99UlaQA9k) ---
**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\ **Post date:** [November 11, 2025, 11:57am UTC](https://phaser.discourse.group/t/wip-recreating-earthbound-s-battle-backgrounds-with-webgl-phaser-3-tutorial-series/15498/3 "2025-11-11T11:57:02Z")
New videos in the series are now available! Learn more about interleaved oscillation here: [![](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/4/408e09b4439bc6e87f90852f669d17127d09e7de.jpeg "Interleaved Oscillation Explained: Recreate EarthBound’s Battle Backgrounds in WebGL") ](https://www.youtube.com/watch?v=_fMcO3TnLc8) [![](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/5d568cd769b2c7806a96e9937f37b890885e710f.jpeg "Phaser 3 Shader Tutorial — Recreating EarthBound’s Interleaved Oscillation Effect") ](https://www.youtube.com/watch?v=aeYzTuMAKBA) ---
**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\ **Post date:** [December 2, 2025, 5:21pm UTC](https://phaser.discourse.group/t/wip-recreating-earthbound-s-battle-backgrounds-with-webgl-phaser-3-tutorial-series/15498/4 "2025-12-02T17:21:05Z")
The final set of videos are available now! Sharing the links here if you want to learn more: [![](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/515c680354d6cafbdf9a5e017f87e04ed1796ed1.jpeg "The Hidden Trick Behind EarthBound’s Trippy Backgrounds (Transparency Shader Explained)") ](https://www.youtube.com/watch?v=BatPDcUHab8) [![](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/8/8eae32db2ef0cad92272d78b8ee4cb50329578e0.jpeg "Phaser 3 Shader Tutorial — EarthBound-Style Transparency Effect in WebGL") ](https://www.youtube.com/watch?v=38596z0sj90) [![](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/5/5c47b0bb10185ab9b3f97632bd65f6f4eb0e611c.jpeg "Combining EarthBound Battle Shader Effects in Phaser 3 — Final Background Tutorial") ](https://www.youtube.com/watch?v=QzpPnEePtKw) ---
**Author:** ![johnSSG](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/johnssg/32/8138_2.png) [@johnSSG](https://phaser.discourse.group/u/johnSSG)\ **Post date:** [December 6, 2025, 4:08am UTC](https://phaser.discourse.group/t/wip-recreating-earthbound-s-battle-backgrounds-with-webgl-phaser-3-tutorial-series/15498/5 "2025-12-06T04:08:36Z")
The effects look really good, great job! ---
**Author:** ![scottwestover](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/scottwestover/32/7442_2.png) [@scottwestover](https://phaser.discourse.group/u/scottwestover)\ **Post date:** [December 8, 2025, 4:54am UTC](https://phaser.discourse.group/t/wip-recreating-earthbound-s-battle-backgrounds-with-webgl-phaser-3-tutorial-series/15498/6 "2025-12-08T04:54:45Z")
Thanks!