Creating Shadows Under Units - Revision history

Mnewton1 at 20:32, 6 September 2009

2009-09-06T20:32:20Z

Jetryl: fixed links

2009-05-06T09:40:41Z

fixed links

Jetryl: Added images.

2009-04-19T04:57:11Z

Added images.

Jetryl: Updated for latest standard.

2009-03-05T03:08:31Z

Updated for latest standard.

Tsr: /* The Current Method: */ added information on gaussian blur for the GIMP

2006-06-12T13:22:41Z

‎The Current Method:: added information on gaussian blur for the GIMP

GrabberBot: automated change of forum links take 2

2006-01-21T17:44:59Z

automated change of forum links take 2

Allefant: Reverted edit of GrabberBot, changed back to last version by Jetryl

2006-01-21T16:56:56Z

Reverted edit of GrabberBot, changed back to last version by Jetryl

GrabberBot: automated change of forum links

2006-01-21T16:34:51Z

automated change of forum links

Jetryl at 08:40, 30 December 2005

2005-12-30T08:40:28Z

New page

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:

http://www.wesnoth.org/forum/files/unitshadows1_148.png

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:

http://www.wesnoth.org/forum/files/unitshadows2_123.png

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:

http://www.wesnoth.org/forum/files/unitshadows3_202.png

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:

http://www.wesnoth.org/forum/files/unitshadows4_193.png

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.

http://www.wesnoth.org/forum/files/unitshadows5_481.png

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

http://www.wesnoth.org/forum/files/unitshadows6_182.png

== See Also ==
* [[Create]]
* [[Art Tutorials]]

[[Category: Art Tutorials]]

← Older revision		Revision as of 20:32, 6 September 2009
Line 1:		Line 1:
−	by Richard Kettering (~~Jetryl~~)	+	by Richard Kettering (Jetrel)

@@ Line 9: / Line 9: @@
 To create a shadow, take a unit you wish to apply shadows to.
-http://www.wesnoth.org/wiki-images/shadow-tutorial-1.png
+http://www.wesnoth.org/wiki-images/tutorial/sprite-shadows/shadow-tutorial-1.png
 Create a new layer (we're assuming here that you're using Gimp/Photoshop or some layer-supporting graphics program), and draw in it, with the pencil tool set to RGB: 22,0,52 the desired shape of the shadow you would like.  Note for most units, that our perspective will make the shadow of most creatures somewhat wider than it is tall.
-http://www.wesnoth.org/wiki-images/shadow-tutorial-2.png
+http://www.wesnoth.org/wiki-images/tutorial/sprite-shadows/shadow-tutorial-2.png
 Finally, move this layer underneath all your other layers, and set its opacity to 60%.
-http://www.wesnoth.org/wiki-images/shadow-tutorial-3.png
+http://www.wesnoth.org/wiki-images/tutorial/sprite-shadows/shadow-tutorial-3.png
 == See Also ==

@@ Line 9: / Line 9: @@
 To create a shadow, take a unit you wish to apply shadows to.
 Create a new layer (we're assuming here that you're using Gimp/Photoshop or some layer-supporting graphics program), and draw in it, with the pencil tool set to RGB: 22,0,52 the desired shape of the shadow you would like.  Note for most units, that our perspective will make the shadow of most creatures somewhat wider than it is tall.
 Finally, move this layer underneath all your other layers, and set its opacity to 60%.
 == See Also ==

@@ Line 41: / Line 41: @@
 ]  I generally duplicate this layer, when finished, and hide the duplicate "backup" layer.
-] Apply a gaussian blur to this layer, with a width of 0.5 pixels:
+] Apply a gaussian blur to this layer, with a width of 0.5 pixels (if you're using GIMP use 1.5 pixels):
 http://exong.net/wesnoth-attach/files/unitshadows4_193.png

@@ Line 2: / Line 2: @@
-===History:===
+Wesnoth has been through several iterations of how shadows are drawn, our most recent being a slightly blurred version.
-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.
+Our current standard for drawing shadows is fairly simple.  All of the shadow pixels are given an opacity of 60% (or in other words, a transparency of 40%).  The preferred shadow color is RGB: 22,0,52  (on a scale from 0->255; in hex it would be 160034).  This has minor cosmetic advantages over pitch black (rgb: 0,0,0), because most shadowed surfaces in the real world have a large amount of blue-ish ambient light reflected into them, rather than being just a darker version of their source color.  It also makes shadows easier to work with in mixed-down PNG files, because you can select just the shadow by clicking on it with the magic wand tool (since it's a different color than black, which invariably ends up getting used on the bodies of most units).
-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.
+To create a shadow, take a unit you wish to apply shadows to.
-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.
+Create a new layer (we're assuming here that you're using Gimp/Photoshop or some layer-supporting graphics program), and draw in it, with the pencil tool set to RGB: 22,0,52 the desired shape of the shadow you would like.  Note for most units, that our perspective will make the shadow of most creatures somewhat wider than it is tall.
-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:
+Finally, move this layer underneath all your other layers, and set its opacity to 60%.
 == See Also ==

@@ Line 15: / Line 15: @@
 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:
-http://www.wesnoth.org/forum/files/unitshadows1_148.png
+http://exong.net/wesnoth-attach/files/unitshadows1_148.png
@@ Line 27: / Line 27: @@
 ]  Select all of the pixels which make up the old shadow:
-http://www.wesnoth.org/forum/files/unitshadows2_123.png
+http://exong.net/wesnoth-attach/files/unitshadows2_123.png
@@ Line 36: / Line 36: @@
 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:
-http://www.wesnoth.org/forum/files/unitshadows3_202.png
+http://exong.net/wesnoth-attach/files/unitshadows3_202.png
@@ Line 43: / Line 43: @@
 ] Apply a gaussian blur to this layer, with a width of 0.5 pixels:
-http://www.wesnoth.org/forum/files/unitshadows4_193.png
+http://exong.net/wesnoth-attach/files/unitshadows4_193.png
 ] 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.
-http://www.wesnoth.org/forum/files/unitshadows5_481.png
+http://exong.net/wesnoth-attach/files/unitshadows5_481.png
 This, then, is what the final result of the example images in this tutorial looks like:
-http://www.wesnoth.org/forum/files/unitshadows6_182.png
+http://exong.net/wesnoth-attach/files/unitshadows6_182.png
 == See Also ==