Creating Shadows Under Units

by Richard Kettering (Jetryl)

Wesnoth's shadows have evolved through several different iterations of "how they are drawn". This tutorial covers both a quick history of what was done in the past to draw shadows, and what the current "official" method is. As a general note, it should be mentioned that the shadows are part of the same image file as the unit graphics.

History:

Wesnoth, at first, used a binary transparency system - a pixel was either completely opaque, or completely see-through (transparent). This is not unlike what .gif images use, in terms of the final effect. The first system actually assigned one color (pure black, for those who are interested) as the transparent color, and anywhere where such a pixel was found in a game image, the engine would not draw it.

The next step was fairly obvious - wesnoth uses the PNG image format, which allows a special part of the image to be built-in to the file. This is essentially another image which tells the computer how transparent each pixel in the image is, and it is called an Alpha Channel. This "alpha channel" is a grayscale image, meaning that each pixel can be set to be not only either completely opaque or completely transparent, but also anywhere in-between. At first, we converted all of our images to PNG, but used only binary transparency. Our shadows were jet black, and obscured the ground completely.

As code support came, we switched to our next system, in which many of our images are in at the time of this writing. This set the shadow of a unit to be 60% opaque, allowing the ground beneath to show through, and looked rather good.

As our terrain improved, however, this began to show its limitations. The shadows had hard edges which were forced to lie on pixel boundaries. This looks unnatural for some of the situations in which we use it, and as such, we moved to our current system. This is simple, has a clear procedure which can be followed to generate it rapidly and correctly, and looks good in all situations. In the following image, compare the dwarf done with the old method, and the elven sylph done with the new method. It's a subtle, but potent difference, and is especially evident when the colored rings are drawn under our units to signify which team they're on:

The obvious complaint about the current system is that it might be hard to edit, compared with the previous system. The solution is simple - just delete the previous shadow and recreate one from scratch. Because of how these shadows are made, it is relatively clear which pixels had been opaque in the source layer before blurring, and if a few pixels are different in a new frame, it is often unnoticeable. At most, the process of creating a new shadow will take a few minutes, and for animations, it has the benefit of forcing someone to draw a shadow from scratch (which should be done anyways).

The Current Method:

The first two steps in this method are for converting old shadows to the new system. To adapt it to creating a shadow from scratch, start with a new empty layer in your graphics program, and begin at step three. In this tutorial, I'll be using the process I used to create shadows for Neoriceisgood's Saurian Flanker as an example:

1] Select all of the pixels which make up the old shadow:

2] "Cut" these into another layer in your graphics program. In photoshop, a wonderful tool for this is in the following menu: Layer -> New -> Layer via Cut. This acts like cutting the selection from one layer and pasting it as another in the exact same position it was in before.

3] Take this new layer, and draw over all of it in solid black with the pencil tool. When doing this, if you are converting an old shadow, you can use the old one as a guide for where the new shadow should fall. Regardless of what you're creating, however, there is an unusual thing to do in this step, and that is to draw in the entire area that a shadow would fall - not merely the area that is unobscured by the unit, but also in the area that you cannot see. This is important for a later step.

Note that this layer should be moved below all the other layers in the file. It's also very helpful to temporarily make the other layers mostly transparent, as this can guide you in intuiting where the shadow should fall on an imaginary ground:

4] I generally duplicate this layer, when finished, and hide the duplicate "backup" layer.

5] Apply a gaussian blur to this layer, with a width of 0.5 pixels:

6] Change the opacity of this layer to precisely 60%. If your graphics editor speaks in transparency instead, then set it to 40%, which is the same thing. Either one of these means that 40% of what is underneath will shine through the black. It's very important, however, not to deviate from using solid black, and not to deviate from using 60% opacity unless you have a good reason. Using these makes our unit imagery consistent.

This, then, is what the final result of the example images in this tutorial looks like:

See Also

• Create
• Art Tutorials