Hey folks, Dave here. In this update, I’m going to give you the lowdown on the battle backgrounds. A lot of people are curious about them, so the team and I figured we’d clue you all in. It’s a little mathy, so if you aren’t the type who finds formulas interesting, you might want to skip to the end. (But you could at least give the rest of the post a glance over!)

Theory

If you aren’t familiar, the Mother series features backgrounds that dip and flow not unlike a shaken lava lamp. They’re easy enough to imagine, but how would you go about creating one? First we need to identify what we’re trying to accomplish.

In its simplest form, the backgrounds are just points getting shuffled around in a specific way. So we need to define how they get shuffled around. To describe that, I use the following formula:

Where dx is the distance in the x direction to move the point, y is the y-coordinate of the point, and a, f, s, and t, are amplitude, frequency, scale, and time respectively. Amplitude, frequency, and scale are usually constant, while time increases as time goes on, as it is wont to do.

Implementation

Taking it up a level, we want to apply this formula to each point on the screen. Each pixel that is. For each row of pixels, we get a different distance to move the point. Using this method, we can create the waving effects we’re after. The formula can also be used to move points in the y-direction to achieve a compression effect. Add in a multiplier and some modulo math, and you get an interlace effect.

To create this effect in practice, you’ll need to write some code. In my implementation, I use fragment shaders. A fragment shader is code that runs on the GPU and is very useful for moving pixels around. (A fragment is sort of like a pixel before it gets to your screen.) The formula above ends up looking like this as code, in this case GLSL:

float distx = amp * sin(freq * y + scale * time);

Looks pretty similar, doesn’t it? Using the formula, I calculate the offset for each pixel in an image. I copy a pixel from the image, and place it in a buffer, but offset from its original position. Doing this for each pixel, a distorted final image is created.

becomes…

To take it a step further, I use double buffering to draw any number of background layers on top of each other. Using blending modes (add, subtract, screen, multiply, etc.) to combine the layers, you can create some interesting and pretty effects. I don’t want to bore you all with the details, so I’ll show you instead:

A Tool for the Art Team

I built a tool for the art team to create battle backgrounds without really needing to understand how they work. They just need to choose some options, click some buttons, and then spend the rest of the day moving sliders around until the background is just right. Of course, this tool isn’t what actually renders the battle backgrounds for the game, it just spits out a file I can use with the engine to create the backgrounds in-game. The file contains the parameters for the background, like the amplitude, frequency, and scale. The tool itself wouldn’t be of much use to the general public.

Also, before I end the post, a fun fact: the ocean effect and the snow you saw in the attract mode video were actually repurposed battle backgrounds. Battle backgrounds can take on pacifistic roles too, you know.