Article: Rolling World Tutorial

Bonus content

Animating the hero

We will rotate the arms and legs of our hero when he walks around. For this we will have to change our hero model a bit. When we modelled the arms and legs we did not pay much attention to the center of the meshes. If we rotated an arm right now they would turn around the center of the mesh, not around the shoulder.

• Open the scene with our hero model in SoftImage Mod Tool
• Press 'Space' for select mode and select the left arm
• Now click the Center Selection Filter
  
• Now we can edit the center of the left arm. Press 'v' for translation mode
• You can either move the center with the handles or enter y=13 in the Transform tab

When we now rotate the arm it swings around the shoulder as we would expect it to do.

• Repeat the same procedure for the right arm and both legs. Use y=7 for the legs
• Save the scene and publish our hero

We want the limbs to swing forth and back. The best way to do this is using a Sinus function. We have to keep track of the angle of the limbs and the sinus of that angle.

• Add variables for the angle and its sinus to the game class:
  [csharp]
  float HeroAnimateAngle = 0.0f;

  float HeroAnimateSinus = 0.0f;[/csharp]

All limbs can share the same angle and sinus because they swing the same amount.

• In the Update method of the game class we update the angle and the sinus:
  [csharp]
  HeroAnimateAngle += (float)gameTime.ElapsedGameTime.TotalSeconds;
  HeroAnimateSinus = (float)Math.Sin(HeroAnimateAngle * 4.0f) * leftStick.Length();[/csharp]

The sinus of the angle is multiplied with the controller input. This way the arms and legs only swing when the hero moves. Finally, in the DrawGameObject method we check which meshes are limbs and multiply their objTransform with a rotation matrix.

• In the DrawGameObject method add these lines after the assigning objTransform:
  [csharp]
  if (mesh.Name == "LeftArm" || mesh.Name == "RightLeg")
  objTransform = Matrix.CreateRotationX(HeroAnimateSinus) * objTransform;
  if (mesh.Name == "RightArm" || mesh.Name == "LeftLeg")
  objTransform = Matrix.CreateRotationX(-HeroAnimateSinus) * objTransform;[/csharp]

The first two limbs are rotated by the sinus, the second two by the negative sinus. The result is antipodal swinging of the limbs.

Aerial/Atmospheric perspective

Aerial perspective means that objects in the distance appear less saturated than objects close by. This is due to the light scattering in the air between the object and the viewer. You can read up on aerial perspective on wikipedia (http://en.wikipedia.org/wiki/Aerial_perspective).

The mountains in this picture are less saturated the further away they are. Instead of changing the saturation we will use a simple linear interpolation which we can easily recreate in our effect file. We will blend the pixel color over into the sky color based on the distance of the pixel to the hero. The distance is computed for the vertex, but when it is passed from the vertex shader to the pixel shader it is automatically interpolated for each pixel.

• Add a distance variable to the output structure:
  [csharp]float Distance : TEXCOORD1;[/csharp]

• Add the distance to the parameter list of the pixel shader
  [csharp]float4 PS( float2 Tex : TEXCOORD0, float Distance : TEXCOORD1 ) : COLOR[/csharp]
• Update the pixel shader so it looks like this:
  [csharp]
  float4 PS( float2 Tex : TEXCOORD0, float Distance : TEXCOORD1 ) : COLOR
  {
  float dist = clamp(Distance * 0.0025, 0, 1);
  float4 TextureColor = tex2D( ColorTextureSampler, Tex );
  float4 SkyColor = float4(0.39, 0.58, 0.93, 1);

  float4 PixelColor = lerp( TextureColor, SkyColor, dist );
  PixelColor.a = TextureColor.a;

  return PixelColor;
  }

  [/csharp]

We clamp and attenuate the distance because we don't want the trees to fade out too quickly. But you can choose an attenuation value to your liking.
We store the texture pixel and the sky color in two variables which we interpolate using the pixel's distance from the horizon. The sky color is CornflowerBlue which is used to clear the viewport in the Draw method.
All three values are entered into the Lerp function which returns an interpolated color. In the last line we reset the alpha value because it doesn't need to be interpolated.

When you start your game now you can see that trees in the distance start to blend in with the sky. It is a simple trick which gives the game world more depth and a more realistic look.

Running the game on XBox

SoftImage Mod Tool Pro

Up until now we used SoftImage Mod Tool. To run the game on the XBox 360 you need the references provided with SoftImage Mod Tool Pro. If you are a premium member of the XNA Creators Club you can get SoftImage Mod Tool Pro for free. Download it here:
SOFTIMAGE|XSI Mod Tool Pro

Create Copy of Project for XBox 360

We need to create a copy of our existing project:

• Click right on the project name and select "Create Copy of Project for XBox 360"

A new project is added to the solution. This project builds the game for the XBox 360.

• Open the References node of the new project and remove the XSIXNARuntime reference
• Add a new reference to the XBox 360 version of XSIXNARuntime:
  (e.g. C:/Softimage/Softimage_Mod_Tool_Pro_7.5/Addons/XNAGSE/Data/XNA_SAMPLES/XSIXNARuntime/bin/Xbox 360/Release)
• Right click on Content and add a reference to the Windows version of XSIXNARuntime:
  (e.g. C:/Softimage/Softimage_Mod_Tool_7.5/Addons/XNAGSE/Application/References/XNA 3.1)

You should now have this:

The Windows version of XSIXNARuntime is still needed because the content is build on your PC. However, when the game runs, it uses the XBox 360 version.