The appearance of the bullets has been a part of Steambirds since the very first concept art the unparalleled Meowza made for the game. We’ve refined them a little, but they’re very much in the same spirit. I want to share how they’re rendered, cause it’s cool!
All bullets are single greyscale images.
Here’s the circular bullet in all its greyness. You can kinda see some halo around the edge. To colorize it, we use a technique called gradient mapping. It’s a palette-like technique used in various games for texturing inexpensively.
It works with a second texture containing gradients, which are a bit like palettes. The lightness of the bullet sprite picks a color from a one-dimensional row of colors. Full white is on the left, full black is on the right. We’ve crafted our greyscale sprites so they make the most of this, and I know that if I make a row that’s white on the left and red on the right, it will look pretty much just like a red halo.
Note in this example how we can adjust the transparency in the gradient as well as in the sprite. This gives us more options to play with the solidity of the bullets. And we can do more. By changing the left side to have a bit of color, we can make the bullet have a bit of a hole in the center.
We had to make the “solid part” of the bullet have a bit of a gradient in it so that this would work, which you can see in the grayscale image if you look closely. It’s not pure white until the very center, to ensure we have the entire range available to play with.
If we have banding in the right area, we get an interesting halo effect.
Because the gradient mapping does two-stage bilinear filtering on the GPU, we end up getting away with lower-resolution sprites than other techniques. We pass those asset size savings on to you! Here’s a zoom of a 128×128 sprite; it’s hard to see the pixels at all. Smooth like the surface of the sun. It’s similar in effect to marching squares or some of the other techniques for upscaling sprites.
Uh, but we’re probably not going to have screen-filling bullets in the actual game. Probably. No promises. We just rest comfortably knowing that there’s plenty of untapped resolution in there.
So that’s pretty cool! We created a bunch of gradients and put them all together in one image, they’re each a one-pixel-high row Here is how it all ends up looking, at actual scale:
Look at all those pixels we’re saving! Best deal, guaranteed.
You might notice that all of the gradients are red. That’s on purpose; if you want to make an indie game, you have to take as much advantage of combinatorics as you can. We don’t have the budget to create 80 separate gradients, instead we have 8 gradient patterns, and we have the shader shift the hue to anything we want.
So by varying gradient, color, and of course shape, we can generate quite a large variety of bullets very inexpensively. We use two channels of the sprite color to pick the gradient and the hue. Result!
All this variety helps us accomplish our gameplay goals: quickly teaching the player how to survive in an area. Enemy bullets rarely share colors with player bullets, and enemy bullets also have center-color, so you can quickly see whether a bullet is a threat to you or harmless. In addition, the shape and size of a bullet can give clues about its damage level and about the region of the world that the unit originated from.
In a somewhat unusual choice, we use additive blending for our bullets. That means that when the game draws each bullet, it adds the color components to the color of the background and other bullets behind it, so they only get closer to white. Most shmup type games use alpha blending for their bullets; it is quite standard; I can’t think of a game that doesn’t do it. Steambirds has a gameplay style that focuses more on groups of bullets, causing the player to dodge timed patterns and figure out routes through a shifting maze, so we want the bullets to kinda blend together into a dangerous wall of energy. It’s hot in there!
[Update: Furi, an unreleased game, appears to use additive blending, for similar reasons!]
Here’s how it looks with alpha blending.
It’s certainly very bold! The order of rendering matters much more, and you can see the distinction between the bullets very clearly, but that’s all mostly distracting instead of a help. There are more contrasts and lines to draw the eye. Also, it looks cartoony instead of the hyper-realistic laser-shooting hoverplane cat vs bird game we’re making. Let’s have some standards! Confession: I was actually a huge proponent of alpha blending, until I saw it in action for a few days. Now I’m a convert.
While we’re never really done with anything, we’re really happy with how the bullets look, they look damn fine.
