Developing for Windows Phone and Xbox Live : Avatars Using Render Targets

Let’s create a sample that shows how to render an avatar to a RenderTarget and then display the texture as a sprite. Start with the existing sample that displays a random avatar animation. For an additional member variable to store the RenderTarget, add the following member variable to your game’s class.

RenderTarget2D renderTarget;

To initialize the RenderTaget so it is ready to be set on the device, add the following to the LoadContent method in your game:

// Create new render target to draw the avatar to it
renderTarget = new RenderTarget2D(GraphicsDevice, 512, 512, false,
                                  SurfaceFormat.Color, DepthFormat.Depth16);

					  

You also want to change the projection matrix to use an aspect ratio of 1 because the width and height of the texture are equal.

projection = Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4,
                                                 1, 0.01f, 200.0f);

The last portion of code changes the way you render the avatar in the game’s Draw method. Update the game’s Draw method to contain the following code:

// Set the render target
GraphicsDevice.SetRenderTarget(renderTarget);

// Set the render target to transparent
GraphicsDevice.Clear(Color.Transparent);

// Set the world, view, and projection matrices
avatarRenderer.World = world;
avatarRenderer.View = view;
avatarRenderer.Projection = projection;

// Draw the avatar to the current render target
avatarRenderer.Draw(avatarAnimation);

// Set back to the backbuffer
GraphicsDevice.SetRenderTarget(null);

// Clear the backbuffer
GraphicsDevice.Clear(Color.CornflowerBlue);

// Draw the render target as a sprite
spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.NonPremultiplied);
spriteBatch.Draw(renderTarget, Vector2.Zero, Color.White);
spriteBatch.End();

First, set your render target and clear the render target to transparent. You clear to transparent to be able to composite the texture with other textures in your game. Then, draw the avatar as you would normally by setting the World, View, and Projection transforms before calling the Draw method. This draws the avatar to the render target.

The render target is then set to null to switch back to the backbuffer. The backbuffer is then cleared to CornflowerBlue before the SpriteBatch is used to draw the render target to the screen.

If you run the sample now, notice that the the texture with the avatar appears in the upper right-hand corner of the screen. Because the rest of the texture is transparent, it is difficult to tell you are using a render target. You can change the clear color when clearing the render target to show that you are in fact drawing the avatar to the screen using a texture that is created using a render target. Figure 1 shows the avatar drawn to the screen using a render target.