Drawing a Masked Sprite over a Background

Demonstrates how to draw a foreground and background sprite using the SpriteBatch class, where only part of the foreground sprite masks the background.

Overview

In this example, you will draw a background texture, followed by another sprite on top of the background with its transparent elements not showing by using a Blend State that supports alpha blending.

End result

Requirements

The example assumes the texture you are loading contains multiple images, one for the background and one for the foreground ship texture.

• 
• 

Save the textures to your content project and name it "AnimatedCharacter" (this name will used to reference it in the project).

Important

The foreground sprite in this example must include masking information, e.g. a PNG or DDS file that supports transparency / an alpha channel.

Drawing a Foreground and Background Sprite

1. Follow the steps of How To: Draw a Sprite. A good first step to understanding the loading and drawing of textures and setting up your project.

2. Add some variables and update the LoadContent method to load and initialize the content.

   // Position of foreground sprite on screen
   private Vector2 ViperPos;  
   
   // The texture for the ship
   private Texture2D shipTexture;
   
   // The texture for the background
   private Texture2D starTexture;
   
   protected override void LoadContent()
   {
       // Create a new SpriteBatch, which can be used to draw textures.
       spriteBatch = new SpriteBatch(GraphicsDevice);
   
       starTexture = Content.Load<Texture2D>("starfield");
       shipTexture = Content.Load<Texture2D>("ship");
       Viewport viewport = graphics.GraphicsDevice.Viewport;
   
       ViperPos.X = viewport.Width / 2;
       ViperPos.Y = viewport.Height - 100;
   }
   

3. In Game.Draw method of your game class, call SpriteBatch.Begin for the SpriteBatch.

4. Specify BlendState.Opaque.

   Note

   This will tell the SpriteBatch to ignore alpha color values when drawing sprites. By default, the z-order of sprites is the order in which they are drawn.

5. Call the Draw method, passing in the starTexture. Then call SpriteBatch.End.

   public override void Draw (GameTime game)
   {
       GraphicsDevice.Clear(Color.CornflowerBlue);
   
       _spriteBatch.Begin(blendState: BlendState.Opaque);
       _spriteBatch.Draw (starTexture);
       _spriteBatch.End();
   }
   

6. After this code, call SpriteBatch.Begin for the SpriteBatch again. This time, specify BlendState.AlphaBlend.

   This will cause pixels on the sprite with an alpha value less than 255 to become progressively transparent based on the magnitude of the alpha value. An alpha of 0 will make the pixel completely transparent.

   Important

   Calling SpriteBatch.Begin with no parameters causes SpriteBatch to default to BlendState.AlphaBlend.

7. Next in the Draw method, we draw the shipTexture, ViperPos with Color.White, finishing off with a call to SpriteBatch.End.

   public override void Draw (GameTime game)
   {
       _spriteBatch.Begin(blendState: BlendState.Opaque);
       _spriteBatch.Draw (starTexture);
       _spriteBatch.End();
   
       _spriteBatch.Begin(blendState: BlendState.AlphaBlend);
       _spriteBatch.Draw (shipTexture, ViperPos, Color.White);
       _spriteBatch.End();
   }
   

The end result is a fixed / opaque background with a semi-transparent ship drawn on top for the player. You can of course experiment with layers / parallax transparent backgrounds behind the player too, the choice is up to you.

Extra Credit

Try using this technique on top of the How To Make A Scrolling Background guide for the beginnings of your very own space shooter :D

See Also

• Drawing a Sprite
• How To Make A Scrolling Background

Concepts

• What Is a Sprite?

Reference

• SpriteBatch
• SpriteBatch.Draw
• Texture2D

© 2012 Microsoft Corporation. All rights reserved.