Sprites on a Budget

Let’s say you don’t have a ton of time or aren’t an artist or aren’t able/willing/want to hire an artist and you’re working as a small group or a sole developer on a game, but you need a lot of graphics/sprites, what can you do? Well in my case, not having a lot of time not being a formal artist and being a sole developer, I’ve found the answer is in permutation.

In my case, I am capable of drawing sprites on my own, however I want a large variety of sprites but I’m unable (for the sake of development time) to draw them all myself. So I’ve turned to the use of graphics techniques, shaders, transforms and the like, the end result is the nearly limitless potential of permutation. Through the use of a variety of graphics techniques, I’m able to take a handful of sprites and re-use them in ways that results in hundreds or thousands of potential variants, they might be using the same sprites and basically look similar but they are different and that makes it look like a lot more is going on, than what I actually drew, which saves me a ton of time and allows me to easily re-use existing art assets.

None of these techniques are applicable only to two-dimensional sprite based games/engines, but also apply to three-dimensional games as well, keep that in mind!

Color Swapping
Swapping out one color for another in a sprite probably dates back to the earliest of games. I’ll go with Space Invaders because – awesome. There were really only a handful of different alien spaceship sprites, but they would change color as the player progressed to later levels of play. This gave the impression of a lot more enemy variants than there really were. Sure the shapes weren’t all that varied and even the colors weren’t all that varied but with a few simple sprites the developers created a lot more assets to work with simply by changing the color of the sprite, that’s just smart and it makes perfect sense to this day and will well into the future as it cuts down on development time and cost.

Space Invaders Variants Example

In Eden I make strong use of color swapping, it is probably easy to overlook at first glance but I’ve intentionally built in support for primary and secondary colors in all sprites in the game and then defined which colors are appropriate for those values and let the computer randomize the results. In this way I can very easily get say a human or goblin sprite to render in a myriad of different skin tones (appropriate to the type of creature) so that they aren’t all the same static looking sprite. I’ve done this for critters as well as plant life and in some other areas as well. As I find the need and usefulness for the effect I’ll continue to use it. The end result is a much richer and believable world in which every object doesn’t necessarily look exactly like every other object; there are subtle difference where appropriate. Through simple color swapping I’m able to create a single sprite and turn it into at least a dozen or more sprites simply by swapping a couple color values, that’s a big payoff for a little up front investment of time.

Human/Goblin Variants (ignore the names lol)

This is pretty basic, almost 101 basic simply because transforms are a foundational part of any graphics programming. I’m simply talking about translation, scaling and rotation. While they are great for positioning objects in a game world, they are also useful in their own right to change the look and style of an existing asset. Plenty of games make use of this by scaling objects so they are larger or smaller than their ‘default’ or rotating them so they look a little different, the point is again to get away from the same static look of each instance of a given graphical entity. In Eden I use this subtly by scaling objects smaller or larger when they are use in the UI screens to put more emphasis on the object when looking up help or doing something as simple as a slight random rotation on a critter that is dead so it’s a little more obvious to the player since in no other situations are critters rotated within the game. Lastly I do a bit of translation and scaling with weapons so that I can place a given weapon asset near the character holding the weapon to create even more variants of the same human/goblin/etc sprite. Some of them might be carrying spears while others are carrying swords, but they all have these subtle differences because of it. These are small but important cues to the player that something is different and it goes further in taking an existing asset and make multiple variants of that asset so it looks like more is there than is really the case.

Dead! (Slight Rotation + Skin Color Swap)

In Xna/Monogame there is a ‘tinting’ property built right into the SpriteBatch.Draw() routine (I would imagine this exists in other engines like Unity considering how trivial it is). Normally Color.White is passed, meaning just render the sprite as it exists in it’s image format, but very easily you can change that color to any color you like and have the entire sprite tinted so it’s no longer the raw image, you can make it red or blue or green etc. Sometimes this isn’t really what is intended, you may have a graphic that doesn’t really look how you want when everything is tinted red in which case you might be looking to swap specific colors (see above). However if you plan ahead and anticipate a desire to render a given sprite in many different colors (for whatever reason) you can just draw that sprite in a gray scale and probably focusing on the use of white and lighter grey colors in the image. Then when you render the sprite and tint it with say red, the image is vibrant red in those white areas and a little subdued or dimmed in the grey areas, but the point is you can make hundreds of variants of that sprite just by supplying a color value to the draw call. It’s simple and very effective when used in the right situations. I do this in many places in Eden to highlight objects to the player or to render the same objects in different color/tints for different reason all while using the same sprites.

It’s worth noting that tinting can also be used simply to darken a pre-existing sprite as well, sometimes this is the simple effect that is desired, if you tint a sprite with black or grey then you will actually darken the sprite without necessarily changing the various colors used in the image.

Recently I’ve been experimenting with Depth Stencils, the concept is pretty simple; through the use of the depth stencil and a couple sprite assets you create a mask or stencil through which to render a sprite. I’ve talked about this in a past article on depth stencils themselves but the idea is that as the developer you can create a stencil specific to what you need and then render normal sprites through it so that only the parts that aren’t masked (the open areas of a physical stencil for example) are the areas in which the sprite will actually be rendered. There are a ton of uses for stencils, but I’ve taken advantage of them in Eden so that I can get even more variants out of my pre-existing graphic assets. Specifically I’ve create just a small handful of sprite masks from which to generate stencils in order to draw building pieces a little differently depending on how damaged they are. This serves two purpose, the most obvious is to display to the character that a given building is damaged, but additionally to breakup the graphics so that once again not everything is identical and uniform. This simple idea can be further expanded by creating multiple variants of the sprite masks themselves so that the same stencil isn’t overused (I do this extensively with terrain rendering). Once again the result is mixing just a handful of sprites to produce a large variety of permutations when combining them through stencil effects, less physical graphic assets resulting a lot more variety.

Stencil Example (the white areas are the only areas that will render)*

* This actually depends on how you setup your mask and stencil and configure it to work. It’s equally possible to only render where there is black, etc. The point is, given a shape (mask) you can create a stencil through which rendering will occur, just like a real life stencil and achieve a variety of graphical effects.

Stencils Used to Depict Existing Assets with Various Levels of Damage

Pixel Shaders
While I am by no means expert with pixel shaders, they are the simplest shader to work with and can produce a ton of different effects with respect to the colors of a sprite. Up above I talked about swapping colors and that is easily achievable through the use of pixel shaders but it doesn’t stop there. First, quickly, pixel shaders are little bits of code that tell the GPU how to render a pixel on the screen; that is what color to render it as. That is why pixel shaders are so simple (with respect to the other types of shaders at least) is that the only output is a color value for a given pixel. Through pretty basic shaders one can render a given sprite as black & white, inverted, swapped colors, various patterned and styled effects and a whole host of other ideas if one is willing to learn. The point is that with a few shaders, the developer has the ability to apply that them to any of their graphic assets meaning once again you can take a handful of sprites and render them many different ways using different shaders for different effects.

Examples of Pixel Shader Effects

While this article is by no means exhaustive about the ways and techniques in which a developer can produce a lot of interesting results with just a few graphical assets, I hope it serves as a simple primer to get you thinking about how you might take advantage of your own assets and get more out of them. Entire games have been made out of literally just a handful of physical art assets because the developers constantly re-used those assets in new and interesting ways. Nowhere is it written that a game must contains gigabytes of graphics assets in order to be good, relevant, pleasing or successful. In many cases, less is more; use that to your advantage šŸ™‚


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s