Lesson 12: Transparent Sprites
This lesson focuses on how to draw a sprite in XNA where some of the background or sprites behind it shows through.
We pick up where Lesson 11 left off.
Source code for Lesson 12 completed: http://www.bluerosegames.com/xna101/lessons/XnaLesson12.zip
When I first started digging into XNA, I had a hard time figuring out how to draw a sprite so that some of the background shows through. Some reasons you may want to draw a sprite that you can see through is for fog effects, making a character glow, or for a drop shadow on an object. It turns out that it's very simple, and that could be one of the reasons I had trouble finding information on the topic.
When we draw the sprite, we can draw it with less than 100% opacity. 100% opacity means the object cannot be seen through whatsoever, and 0% opacity means the object is completely transparent.
The Color object that we used in lesson 10 to tint the sprite can also be used to control the opacity. The Color object has a fourth parameter besides Red, Green, and Blue. This parameter is called Alpha and controls the amount of opacity to draw with. This value, like the Red, Green, and Blue values has a range of 0 to 255, with 255 being completely opaque, and 0 being completely transparent.
So all we have to do to is pass a color to the Draw() method which specifies a value less than 255 for the Alpha value. The Color object has another constructor which takes four arguments with the fourth being the Alpha value.
In the Game1.Initialize() method, change the statement that sets ball2's drawing color to the following:
ball2.DrawingColor = new Color(255, 0, 255, 128);
128 is halfway between 0 and 255, so ball2 will be drawn at 50% opacity.
Run the program again and see that the background now shows through the purple ball.
In the game I'm currently working on, I use transparency to draw a drop shadow. This is fairly straightforward to add to the BouncingBall class. To draw a drop shadow, draw the same texture as the sprite itself, but offset, with a black tint, and with a lower opacity value than the sprite itself. To do this, let's add a new private Color field to the BouncingBall class called _dropShadowColor. In this case, we won't expose a public property to set the _dropShadowColor, instead it will be set inside the class.
Add the following line to the BouncingBall class to declare _dropShadowColor
private Color _dropShadowColor;
Then in the constructor, let's give it a default value.
_dropShadowColor = new Color(0, 0, 0, 128);
The drop shadow color, by default, will be black with 50% opacity.
However, if we set the drawing color to something other than 100% opacity, we need to adjust the drop shadow opacity accordingly. So in the BouncingBall.DrawingColor Property's set method, add the following:
_dropShadowColor = new Color(0, 0, 0, (byte)(_drawingColor.A / 2));
"A" is the Alpha value of the color, so this sets the Alpha of the drop shadow to half of the value of the drawing color's Alpha value. The "/" character performs division, and the "(byte)" casts the value into a value of type byte. The byte data type is what the constructor expects to be passed in for the Alpha value, and has a value of 0 to 255. When one data type is converted to another it is called casting. The division causes an implicit cast to type int, so it needs to be cast back to a byte or you'll get an error when you build the program. More about casting in a later lesson.
So this is a good example of how properties can be useful. Just by setting the DrawingColor property, we actually set the value of two fields.
So all that's left is to Draw the drop shadow. It needs to be drawn before the actual sprite, for the same reason we had to draw the background first. So at the beginning of the BouncingBall.Draw() method add the following:
spriteBatch.Draw(Texture, _position +
new Vector2(10f, 10f), _dropShadowColor);
which will draw the drop shadow using the drop shadow color at a position 20 pixels to the right and below the sprite. Run the program again and it should look like this:
