“XNAVATARS” - PART 2 – NO SHADOWS?

As promised, I’m hereby posting the second part of the series about using Avatars with XNA GS on the XBox 360.

If you remember, on my first article I showed how to draw an animated avatar on screen taking into account transitions between two animations.

In this part, I will talk about one factor that will help you improve a little bit the eye-candy in your game when using avatars: shadows.

As you may know, the Avatar’s rendering system does not allow us to use a custom shader effect to render an avatar on screen; instead, we must only use the built-in system to accomplish that task.

On one side, this simplify things but on the other, it limits our possibilities a little bit.

Casting shadows is an example of this limitation. As I will show you in a minute or two, a “cheap” workaround can can used, for simple games.

The technique I’ll use is known as “Flat Shadows” (the XNA Framework includes all we need for it). It is a rather basic substitute for “real” shadows, but it will do the trick just fine for projects that don’t require “picky” shadow effects.

We will be using the project I had included last time as a starting point and mainly focus on the code to add and or modify.

1. Fields to add:

private Matrix[] transitionTransforms, shadowTransforms;

...

private Plane plane;

private float lightRotation;

private Model floor;

What’s new? The ‘shadow transforms’ array will store the matrices we need to flatten the model based on a reference plane, which we also define.

2. The constructor:

...

// Create the array of matrices that will hold bone transforms for shadows.

this.shadowTransforms = new Matrix[ 71 ];

...

Nothing fancy here. Just create the array that will hold the collection of matrices to flatten the model.

3. Initializing the game:

/// <summary>

/// Allows the game to perform any initialization it needs to before starting to run.

/// This is where it can query for any required services and load any non-graphic

/// related content.  Calling base.Initialize will enumerate through any components

/// and initialize them as well.

/// </summary>

protected override void Initialize()

{

    this.plane = new Plane( Vector3.Up, 0 );

    // As usual, initialize all compoenents.

    base.Initialize();

}

We just create the reference plane with a normal facing up and without moving along that normal (so it’s a XZ plane where the Y coordinate is zero, initially).

4. Loading content:

...

// Set the "World" value wit a rotarion of 180º.

this.avatarRenderer.World = Matrix.CreateTranslation(

    Vector3.Right * -1 + Vector3.Up * 0 + Vector3.Forward * -1 ) *

    Matrix.CreateRotationY( MathHelper.Pi );

...

We just modify the line that places the avatar in the world.

5. Updating the game:

We will only add this line:

...

// Update the value used to rotate the light.

this.lightRotation += .5f * (float)gameTime.ElapsedGameTime.TotalSeconds;

...

So the light will rotate to show the effect.

6. Drawing the avatar:

/// <summary>

/// This is called when the game should draw itself.

/// </summary>

/// <param name="gameTime">Provides a snapshot of timing values.</param>

protected override void Draw( GameTime gameTime )

{

    // As usual, clear the backbuffer (or the current render target).

    GraphicsDevice.Clear( Color.CornflowerBlue );

    // Create the array of bone transforms for the floor and populate it.

    ModelBone[] transforms = new ModelBone[ this.floor.Bones.Count ];

    this.floor.Bones.CopyTo( transforms, 0 );

    // For each mesh in the floor model.

    foreach(var mesh in this.floor.Meshes)

    {

        // Get the basic effect.

        foreach ( BasicEffect effect in mesh.Effects )

        {

            // Set values and commit changes.

            effect.DiffuseColor = Color.LightSteelBlue.ToVector3();

            effect.View = this.avatarRenderer.View;

            effect.Projection = this.avatarRenderer.Projection;

            effect.World = transforms[ mesh.ParentBone.Index ].Transform;

            effect.CommitChanges();

        }

        // Finally, draw the mesh.

        mesh.Draw();

    }

    // Can we draw the avatar?

    if ( avatarRenderer != null && currentAnimation != null )

    {

        // If we can, is the animation in transition?

        if ( this.isInTransition )

        {

            // If so, draw it with the interpolated transforms.

            this.avatarRenderer.Draw(

                this.transitionTransforms,

                currentAnimation.Expression );

        }

        else

        {

            // If not, draw it with the actual transforms.

            this.avatarRenderer.Draw(

                this.currentAnimation.BoneTransforms,

                currentAnimation.Expression );

        }

        // Make the light sources of the avatar dark.

        Vector3 ambientColor = this.avatarRenderer.AmbientLightColor;

        Vector3 lightColor = this.avatarRenderer.LightColor;

        this.avatarRenderer.AmbientLightColor =

            this.avatarRenderer.LightColor =

                -10 * Vector3.One;

        // Enable alpha blending.

        GraphicsDevice.RenderState.AlphaBlendEnable = true;

        GraphicsDevice.RenderState.SourceBlend = Blend.SourceAlpha;

        GraphicsDevice.RenderState.DestinationBlend = Blend.InverseSourceAlpha;

        // Change the depth bias just a bit to avoid z-fighting.

        float sourceDepthBias = GraphicsDevice.RenderState.DepthBias;

        GraphicsDevice.RenderState.DepthBias = -0.0001f;

        // Set the new light direction.

        this.avatarRenderer.LightDirection = Vector3.Normalize(

            Vector3.Right * 7.5f * (float)Math.Cos( lightRotation ) +

            Vector3.Forward * 15.0f * (float)Math.Sin( lightRotation ) +

            Vector3.Up * 10.0f );

        // If the avatar is stepping over the floor, then move the plane 

        // according to the "altitude" of the avatar in the world so as

        // to calculate and cast shadows in the correct world position

        // (also, take into account that in case of a "jump" movement, in a 

        // "complete" shadow system you must reposition the shadow along the 

        // floor taking into account the place where the light-ray hits the 

        // floor while it points to the avatar; otherwise, it will stand still 

        // as if the avatar never jumped in the first place).

        this.plane.D = -this.avatarRenderer.World.Translation.Y;

        // Calculate and set the world transform that will flatten the 

        // avatar's geometry, taking into account the original rotation,

        // scale and translation factors.

        Matrix world = this.avatarRenderer.World;

        this.avatarRenderer.World *= Matrix.CreateShadow(

               this.avatarRenderer.LightDirection,

               this.plane );

        // Is the animation in transition?

        if ( this.isInTransition )

        {

            // If so, draw it with the interpolated transforms.

            this.avatarRenderer.Draw(

                this.transitionTransforms,

                currentAnimation.Expression );

        }

        else

        {

            // If not, draw it with the actual transforms.

            this.avatarRenderer.Draw(

                this.currentAnimation.BoneTransforms,

                currentAnimation.Expression );

        }

        // Reset all affected values.

        this.avatarRenderer.World = world;

        this.avatarRenderer.AmbientLightColor = ambientColor;

        this.avatarRenderer.LightColor = lightColor;

        GraphicsDevice.RenderState.DepthBias = sourceDepthBias;

        GraphicsDevice.RenderState.AlphaBlendEnable = false;

    }

    // The following is used to show some statistics and other info

    // on screen. It can be omitted (or optimized).

    this.spriteBatch.Begin();

    // No need for further explanation.

    this.spriteBatch.DrawString(

        this.font,

        "Press 'A' to force changing animations or 'Back' to exit.",

        new Vector2( 50, 25 ),

        Color.White );

    // No need for further explanation.

    this.spriteBatch.DrawString(

        this.font,

        "Press 'B' to change the type of selection : " +

        ( this.moveRandomly ? "RANDOMLY" : "IN ASCENDING ORDER" )

        + ".",

        new Vector2( 50, 55 ),

        Color.White );

    // Draw the animation pointer, whether we are processing a transition and

    // the current transition time. Please notice that in this implementation

    // when the current animation is about to end (that is, 1 second or less),

    // the pointer "currentAnimationId" will change even if the animation is still

    // the same, so you will see a different number and name during 1 second or so.

    this.spriteBatch.DrawString(

        this.font,

        this.currentAnimationId + " : " +

            ( (AvatarAnimationPreset)this.currentAnimationId ).ToString() +

            " (" +

            ( !this.isInTransition ? "no transition" : this.transitionProgress.ToString() + " processed" ) +

            ").",

        new Vector2( 50, 85 ),

        Color.White );

    // Draw the current position and length of the animation being rendered.

    if ( currentAnimation != null )

    {

        this.spriteBatch.DrawString(

            this.font,

            "Processed " +

            this.currentAnimation.CurrentPosition.ToString() +

                " of " +

                this.currentAnimation.Length.ToString() +

                ".",

            new Vector2( 50, 115 ),

            Color.White );

    }

    // Flush the batch.

    this.spriteBatch.End();

    // As usual, call the base method.

    base.Draw( gameTime );

}

Here’s where most changes occur; the game ...:

1. ... draws the avatar as on my previous example,
2. ... changes the values of the lights that affect the avatar,
3. ... adjusts the depth-bias to avoid any eventual z-fight,
4. ... rotates the light and adjusts the plane altitude before flattening the model,
5. ... updates the position of the flattened model using the static method of the matrix struct, which is named in the code as “CreateShadow”,
6. ... draws the fake shadow, and finally ...
7. ... restores the values of the lights and position of the avatar’s model meshes.

7: Changes to transitions code: none.

If everything goes fine you will see something like this:

Things to notice, though:

1. Shadows will be drawn even when there’s no elements to cast shadows on (see how part of the shadow is rendered beyond the “floor” for a short period of time),
2. You will have to modify the location of the shadow when the position of the avatar changes its height (i.e.: if jumping),
3. The model’s meshes are flattened onto a reference plane, so it will only work for objects on that specific plane (like, in my example, a floor), and
4. Thus, there’s no self-shadowing.

A more precise approach would be extending this example by trying to use the stencil buffer and depth data, as explained at the end of this thread.

Well, this is it for today. You can find the source code for this example here.

Cheers!
~Pete

> Link to Spanish version.