Earthbound Visual Effects

I reEAALly love the background effects from Earthbound that happen during fight scenes and am astounded that people invented these methods for visual effects on hardware that was an SNES. Naturally, I decided to take a stab at recreating some of these effects. The complexity of each algorithm varies, but the visuals produced by each effect can be very eye catching. What's even better is that multiple effects can be applied to the same image at the same time for even more disorienting visuals! Let me explain the overall concept. Images on the SNES would be loaded in a scanline fashion, where you draw the rows of an image from top to bottom (or bottom to top). Most of the following visual effects are applied during this process. Some form of manipulation is applied to the rows that are scanned into the game from the image. I'll explain each effect I recreated in more detail below. If you're curious, all of these images are live. (AKA, everything is currently running.)

Original Image

Our original image that will be manipulated.

Scrolling

Scrolling the texture involves offseting the starting position for loading in rows. In order to scroll from left to right, every row will be drawn offset a certain amount each time.

Palette Cycling

For palete cycling, you change the colors associated with each pixel by rotating through a selection of colors. This way, every frame the image is drawn the colors are remapped to each pixel.

Horizontal Oscillation

Horizontal oscillation is very similar to scrolling, but the offsets in the individual rows will vary throughtout the same image, based on some form of an equation. For consistency and waveness, I'm using a sine or cosine equation in the above display.

Vertical Oscillation

Vertical oscillation is exactly the same as horizontal oscillation except we are now applying the equation onto the columns. Again, I am using a cosine or sine equation in the above display.

Interleaved Oscillation

Interleaved oscillation is using the same method from horizontal oscillation, but every other row affected is pushed in one direction and the rest are pushed in the opposite direction.

Combination

Here is an example three effects being combined at once: scrolling, palette cycling, and horizontal oscillation

Latest Update

Canvas Gallery

11/08/2023


Submit a Drawing!