[WIP] Recreating EarthBound’s Battle Backgrounds with WebGL + Phaser 3 - Tutorial Series

Showcase
1

Hey everyone! :waving_hand:

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.

:white_check_mark: 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:

:movie_camera: Watch the series here: https://youtube.com/playlist?list=PLmcXe0-sfoSgbU24wCN6hdtibMmz68KVe&si=tUk4JBe4622DPoV2

Would love to hear your thoughts or see other Phaser shader experiments you’ve created!

2 Likes
2

New videos in the series are now available! Learn more about background scrolling here:

3

New videos in the series are now available! Learn more about interleaved oscillation here: