Sprite overlays

Stifu
Zabu
Published in
3 min readFeb 2, 2019

Hey guys! Hello? Is anyone still reading this?… Well, let’s pretend so.

Are we still working on Zabuyaki? You bet. Is it taking forever? We can’t deny it. We’re learning along the way, making every possible mistake before ending up figuring out saner way to do things.

Lately, we’ve been working on a nice little feature we call “overlay”, or layered sprites. Here’s the full story. As you may know, we store all of our character graphics in sprite sheets. They’re images which contain all the frames of a given character. They look like this:

Character sprite sheet

Except they get much bigger than that, as character need many more frames (for attacking, jumping, getting hurt, falling down, etc). Sometimes, our character frames might include (somewhat) fancy effects, like that blue energy thing on Rick’s dragon punch:

Rick’s dragon punch frames

Storing frames in the sprite sheet this way has an obvious downside: the character frame is repeated 3 times, while only the blue energy changes on each frame. This is wasteful, but not something that really bothered us, because machines today have plenty of disk space and memory. That’s why we’ve been happy keeping things that way until now.

However, it has a second downside. If these effects (like the blue energy around Rick’s fist) are merged with the character frames in the sprite sheet, then we naturally can’t ever dissociate them, or treat them differently from the rest of the character. More on that later. So, we decided to keep the character frames separated from the rest. This is how Rick’s dragon punch frames look in his sprite sheet now:

Rick’s dragon punch frames, updated

Redundant frames have been removed, and the blue effect is now an “overlay” to be layered on top of the character frame. Setting up such animations is a bit more complex than simply repeating character frames, but it’s more efficient and flexible.

How is it more flexible, you ask, my imaginary friend? Because we want to introduce visual effects that should concern the character but not things like that blue energy. For example, if you’ve got flames surrounding a special attack, you don’t want the fire to cast a shadow. If the flames are not merged with the character frames, then you’re free to make only the character cast a shadow. The same goes for other things, like the ghost trails that follow our character special attacks. When energy or fire effects are included in the ghost trails, it doesn’t look too good.

One of Chai’s special attacks, featuring ghost trails

As you can see above, we could exclude the fire from the ghost trails, thanks to our overlay system. Granted, this is subtle stuff, but it makes a difference in action, as it makes things less confusing and easier on the eyes.

There is one last significant benefit to overlays: we can add many, and use them for all kinds of things, like adding support for weapons.

Satoff holding a bat

We’ve already dropped our old (preliminary) weapon support to replace it with overlay-based weapons in the future. This will let us share more (tried-and-tested) code, and make weapons easier to set up.

That’s it for now!

--

--