Tuesday, February 27 2007 – gse, xna

Going through the forums this morning I came across a post where a user was asking how to draw shadows in their 2D application. Now there are going to be lots of different methods to do this, but I thought I would show you the method that I have used in a couple of my small projects.

The first step is to gather the resources that you will need for the project, for this example I will be using a Space Ship sprite that I have found on the net as well as a background texture that will assist in showing off the shadows. In no way is this sample going to be a full game or application.

Once I have the resources together open up the sprite in your editor of choice, mine is Photoshop. Make sure that the image you have is transparent around the edges so that the background can shine through. Next Using the magic wand in Photoshop select the complete image and Invert the selection if necessary so that just the sprite is selected.

When this is done create a new layer and hide the original layer with the sprite on it. You should be left with the selection in the shape of the old sprite. Now fill in this shape with a dark grey colour, you could use a straight black colour but I find that the dark grey is not as sharp on the eyes as the Black. Next step is to change the blending options and change the opacity to about 70% and save the image.

In the end you should be left with two textures, one is the main sprite and the second is the shadow. Now onto the XNA Part. For the purpose of the example I have used the base code from the Your First Game (2D) from the XNA Documentation. I will have included a Link so that you can download the source for this Article.

To allow the extra sprites I have changed the initial setup values, and added 2 more sprites to the code, and for the Draw Statements I have changed it so that it looks like this.

// TODO: Add your drawing code here

this.spriteBatch.Begin(SpriteBlendMode.AlphaBlend);

this.spriteBatch.Draw(this.backgroundTexture, new Vector2(), Color.White);

this.spriteBatch.Draw(this.spaceShipShadowTexture,

new Vector2(this.spaceShipPosition.X + 10, this.spaceShipPosition.Y + 10), Color.White);

this.spriteBatch.Draw(this.spaceShipTexture, this.spaceShipPosition,Color.White);

this.spriteBatch.End();

The above code will allow the background and shadows to be drawn in the correct order so that they produce the correct effect.

I know that I have not dug to deep into the XNA Code but All I have done is follow the example in the documentation added some sprites and changed the draw order, we should all be able to follow that. The example I have shown here is only one way of doing the job, you will find that there will be hundreds off different ways it can be done; it will all depend on your style. I will try to over time add some different examples to my blog but for the mean time this is how I do it.

Some of the other methods might be to se a standard grey sprite and control the opacity (Transparency) of the sprite through code. Using this method you could change the level of shadow. One reason why you might do this is to show the height of the sprite…. Have the shadow move further away and get lighter as the sprite rises from the background.

Sprite Shadows

Here is the Source Code for the Article…