Skip to content
Gabbi (Rickisthe1) edited this page Dec 25, 2024 · 6 revisions

Swirls

Animated GIF of the Boss swirl

"Swirls" are the spinning shapes you see when a battle starts. They're also used for a few other effects.

Swirls work in a special way that's different from most of the graphics we deal with when using Coilsnake. Instead of "tiles" and "palettes", they're displayed using HDMA, which is a special functionality the SNES has that allows it to perform the fancy effects the console is known for. HDMA is also how the battle backgrounds in EarthBound work, and combined with Mode 7 it's how other games accomplished a 3D effect.

Swirls use a feature of HDMA called "Windowing", which basically allows the SNES to crop the screen by drawing lines. The length and position of these lines can be changes every single scanline, allowing for the fancy shapes that the swirls make. However, they have a major limitation: The SNES can only draw 2 lines per row, and each line must be 2 pixels or wider. I'll explain these more in a bit.

The Swirls Folders

There are six animations here, and despite being named "swirls", only 2 are used for battle swirls. The other four are used for in-battle effects, such as giygas' incomprehensible attack, or the common "fired a beam!" attack. Each one follows the exact same procedure:

  • A series of images consisting of 2 colors: black and white
  • An entry in swirls.yml that tells the game how many frames the swirl has, and how fast to play it.

Swirls.yml

This file is pretty simple, lets take a look at the first entry:

1:
  frames: 23
  speed: 2

If you take a look in swirl 1's folder, you'll see there are indeed 23 images in there. Coilsnake is actually remarkably flexible with how many frames you can have! So far I haven't found a maximum limit to the number of frames, you can keep on adding new images, and as long as you update the frames: parameter to match, they'll all work just fine. If you accidentally set the frames: number lower than how many you actually have, you'll find the animation will get cut short.

As for speed, this is simply how many game frames each swirl frame lasts. Remember the SNES runs at 60 fps unless you're PAL region but nobody cares. A speed: of 2 means each swirl frame will last for 2 game frames, which makes the swirl play at 30 fps. A speed of 3 makes the swirl 20 fps, and so on.

The Limitations

The limit of 2 Windowing lines per scanline I mentioned above means you can't make shapes to complex. Lets take a look at an animation I once tried to make as an example:

custom star swirl that does not work

It looks pretty cool, right? I was proud of it, until I tried compiling it and Coilsnake gave me a strange error:

Encountered error while reading frame #0 of swirl #1
Caused by: InvalidArgumentError: Line at (128,111) must be at least 2 pixels wide

Limitation #1: A line needs to be at least 2 pixels wide

Lets zoom onto this offending frame #0

bad swirl 1 - too thin

See that first pixel? That can't happen. A line drawn by HDMA windowing needs to be 2 pixels or more wide.

Well, that should be easy enough to fix, right? My star swirl is actually full of single pixel lines, but they're easily fixed by going through and adding another pixel to each one. No one will notice the extra thickness..

Except Coilsnake has another error now:

Encountered error while reading frame #14 of swirl #1
Caused by: InvalidArgumentError: There are more than two lines on the same row at y=92

Limitation #2: There cannot be more than 2 lines in the same row

Lets zoom onto this one now.

bad swirl 2 - too many lines

That red line wasn't there normally, I added it to show where these "more than two lines" exist. This is the big limitation on swirls, and no amount of programming can change it— this is a limitation with the SNES console itself. If you go through and look through the swirls in Vanilla EarthBound, all of their shapes are made with only 1 or 2 lines per row. Depending on the swirl you want to design, it's probably totally possible to make it work the same. But unfortunately for me, this star animation is impossible— there are too many points to simplify it.

Advanced Techniques

TODO write this section: talk about inverting, transparency, and colors

Clone this wiki locally