Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
Windows Phone

Windows Phone 7 : 3D Game Development (part 3) - The Game Class

5/2/2013 6:33:37 PM

3. The Game Class

To draw a 3D scene a developer needs to set up a coordinate system and create a camera to view the rendered scene.

3.1. The Camera

We need to create a camera that will be a view into our 3D world of triangles that is rendered by the GPU. Right-click on the XNA3DPrimitives project and select Add => New Item... => click on XNA Game Studio 4.0 and select Game Component. Name the new game component Camera and click Add. Remember from our discussion above that the Camera object has a position within the model world, looks in a particular direction, and has a view defined by the Frustum. We modify the constructor to take three parameters: cameraUpVector, cameraPosition, and cameraDirection all of type Vector3..

The cameraPosition and cameraDirection parameters orient the Camera. As an example, if flying an airplane in the first person, you bank right to turn right, so it would make sense to have the CameraUp Vector oriented 45 degrees to the right through the turn. The camera direction defines the viewing Frustum and will be oriented to look towards our triangles when drawn to the screen.

The Camera GameComponent object will need two public properties: View and Projection of type Matrix. Don't worry about what it means to define these terms as a Matrix type – it isn't critical. It is more important to think of the concepts above as we define them programmatically.

The Matrix class has a static method called CreatePerspectiveFieldOfView that defines the frustrum for the GPU. This method call takes four parameters:

  • fieldOfView

  • aspectRatio

  • nearPlaneDistance

  • farPlaneDistance

The fieldOfView parameter defines the angle width of the field of view for the Frustrum in radians, not degrees. Remember from geometry that 360 degrees equals 2pi Radians, 180 degrees equals pi Radians, and 90 degrees equals pi/2 radians. The MathHelper class defines these values for you so you can pass in MathHelper.PiOver4 to define a field of view of 45 degrees, which is a good starting point for most games.

The aspectRatio parameter is defined by the ratio of the screen width divided by screen height. The Game object has these values in this format: Game.Window.ClientBounds.Width /Game.Window.ClientBounds.Height.

The nearPlaneDistance parameter defines how far in front of the Camera object the near plane from Figure 8-4 is defined. A good starting point is one for our example, but in a real game you may not want the near plane to include every object in front of the Camera object. Lastly, the farPlaneDistance parameter defines the far plane, i.e., the how far into the distance the Camera can "see" past the Near Plane.

Now that we have defined the Frustrum box, we need to orient the frustrum box in a particular direction to look at our triangles that we are going to draw in just a bit. The handy Matrix class defines a static method named CreateLookAt that defines the direction that the Camera is facing. It takes three parameters:

  • Camera Position

  • Camera Direction

  • Camera Up Vector

The CreateLookAt parametersmatch the three parameters that are passed into the Camera GameComponent object that we defined above so we pass them into the method call as shown in Listing 2.

Example 2. The Camera GameComponent Class
using Microsoft.Xna.Framework;

namespace XNA3DPrimitives
  public class Camera : Microsoft.Xna.Framework.GameComponent
    public Camera(Game game, Vector3 position, Vector3 direction, Vector3 upVector)
      : base(game)
      // Initialize frustum matrix
      Projection = Matrix.CreatePerspectiveFieldOfView(
          1, 20);
      // Initialize "look at" matrix
      View = Matrix.CreateLookAt(position, direction, upVector);

    public Matrix View { get; private set; }
    public Matrix Projection { get; private set; }

    public override void Initialize()


    public override void Update(GameTime gameTime)



We next update the Game1 class to include our new Camera object and use it to call the cube related methods to render the cube in a scene.

3.2. Rendering the Cube Scene

To leverage the Camera object we add it to Game1.cs in the Game1.Initialize method:

protected override void Initialize()
{ // Initialize camera
  camera = new Camera(this, cameraPosition,
      Vector3.Zero, Vector3.Up);


We update the DrawCubePrimitive method to leverage the Camera object. The method now just takes two parameters. Here is a snippet of the first part of the method where the changes are in effect:

private void DrawCubePrimitive (Matrix world,  Color color)
  // Set BasicEffect parameters.
  basicEffect.World = world;
  basicEffect.View = camera.View;
  basicEffect.Projection = camera.Projection;
  basicEffect.DiffuseColor = color.ToVector3();
  basicEffect.Alpha = color.A / 255.0f;

The basicEffect object now gets its View and Projection properties from the Camera object in the DrawCubePrimitive method. Here is the Game1.Draw method that renders the cube:

protected override void Draw(GameTime gameTime)

  // TODO: Add your drawing code here
  Matrix world = Matrix.CreateFromYawPitchRoll(yaw, pitch, roll);
  DrawCubePrimitive (world, Color.Orange);
  // Reset the fill mode renderstate.
  GraphicsDevice.RasterizerState = RasterizerState.CullCounterClockwise;

The World coordinate is obtained from configured, yaw, pitch, and role values at the top of Game1.cs resulting in the rendered cube shown in Figure 7.

float yaw = .5f;
float pitch = .5f;
float roll = .5f;

Figure 7. Rendered cube with configured color

The scene is static, which is a bit boring. Let's add some movement to the scene in the next section via yaw, pitch, and roll.

3.3. Adding Movement

In the previous section, the cube object is positioned using world Matrix object, which is created using the Matrix.CreateFromYawPitchRoll(yaw, pitch, roll) static method call. The world Matrix objectis passed to DrawCubePrimitive method and assigned to the basicEffect.World property to render the object with the configured yaw, pitch, and roll applied to its coordinates. Figure 8 describes these parameters visually.

Figure 8. Yaw, pitch, and roll

We apply a simple way to manipulate the object by updating the yaw, pitch, and roll members in the Update method shown here:

protected override void Update(GameTime gameTime)
  // Allows the game to exit
  if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)

  float time = (float)gameTime.TotalGameTime.TotalSeconds;

  yaw = time * 0.5f;
  pitch = time * 0.5f;
  roll = time * 0.5f;



The gameTime.TotalGameTime.TotalSeconds value is fairly small as it is the elapsed time between frames. Applying the modification on each call to Update results in smooth animation. A screenshot doesn't do it justice, so run the sample code to observe the lighting provided by the BasicEffect instance when rendering the object as it rotates.

Now that we covered 3D programming basics and rendering 3D objects generated from triangle primitives in code, we can move on to rendering rich 3D models, building on the 3D game development concepts presented so far.
Other -----------------
- Windows Phone 8 : Phone-Specific Design (part 3) - Using the Pivot Control in Blend
- Windows Phone 8 : Phone-Specific Design (part 2) - Using the Panorama Control in Blend
- Windows Phone 8 : Phone-Specific Design (part 1) - The ApplicationBar in Blend
- Windows Phone 7 : AlienShooter Enhancements (part 2) - Tombstone Support, Particle System
- Windows Phone 7 : AlienShooter Enhancements (part 1) - Load and Save Game State
- Windows Phone 7 Programming Model : Application Execution Model
- Windows Phone 7 Programming Model : Bing Maps Control
- Windows Phone 8 : Designing for the Phone - Blend Basics (part 4) - Working with Behaviors
- Windows Phone 8 : Designing for the Phone - Blend Basics (part 3) - Creating Animations
- Windows Phone 8 : Designing for the Phone - Blend Basics (part 2) - Brushes
- First look: Apple Watch

- 10 Amazing Tools You Should Be Using with Dropbox
- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 1)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 2)

- How to create your first Swimlane Diagram or Cross-Functional Flowchart Diagram by using Microsoft Visio 2010 (Part 3)
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Popular keywords
HOW TO Swimlane in Visio Visio sort key Pen and Touch Creating groups in Windows Server Raid in Windows Server Exchange 2010 maintenance Exchange server mail enabled groups Debugging Tools Collaborating
Top 10
- Microsoft Excel : How to Use the VLookUp Function
- Fix and Tweak Graphics and Video (part 3) : How to Fix : My Screen Is Sluggish - Adjust Hardware Acceleration
- Fix and Tweak Graphics and Video (part 2) : How to Fix : Text on My Screen Is Too Small
- Fix and Tweak Graphics and Video (part 1) : How to Fix : Adjust the Resolution
- Windows Phone 8 Apps : Camera (part 4) - Adjusting Video Settings, Using the Video Light
- Windows Phone 8 Apps : Camera (part 3) - Using the Front Camera, Activating Video Mode
- Windows Phone 8 Apps : Camera (part 2) - Controlling the Camera’s Flash, Changing the Camera’s Behavior with Lenses
- Windows Phone 8 Apps : Camera (part 1) - Adjusting Photo Settings
- MDT's Client Wizard : Package Properties
- MDT's Client Wizard : Driver Properties
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
2015 Camaro