Taking a break from playing
Earthbound to write about how the background graphics are created. If you've done anything game related with art
(palette shifting) or programming
(raster effects), then you probably know a bit of how this works already. A lot of the info I'll be sharing is in
layman's terms, because I'm not a programmer myself and am regurgitating this information from someone who is.
Earthbound battle backgrounds are drawn using either one or two layers. In the following example, I'll be talking about
Starman's background, which uses two layers.
BG3 layer is used as the base, with a tilemap consisting of a pattern of circles that changes colour every 60-frames. The wavy motion is done using a simple sine pattern raster effect, pretty standard stuff here so I won't go into it further. The more interesting scanline effect is potentially done by using
HDMA to sample the tilemap image in two different spots, giving the illusion that there are two autonomous images, separated by each line.
BG4 layer is displayed overtop
BG3, with a nifty square and triangle tilemap. Unlike the previous layer, this one does not change it's palette and only uses a simple raster effect, so again, pretty standard stuff.
The resulting effect of mixing these two layers is the beautiful and groovy backgrounds that have become a staple in the
Mother series.
As well, while writing this post, I found out a site was created for
displaying all the different background layers in javascript. It's worth looking into if this stuff interests you.