Drawing The XYZ Axes in XNA

Finally got to my favorite topic – game programming. I started with XNA and I am currently working on polishing my 3D game development skills.

When working in a XYZ world, it is sometimes useful to see where your objects are located. For this purpose, there are the XYZ axes.

Image lost since transition to new blog

As you see from the image above, I showed where the positive side of a specific axis is located (the direction). An object placed in a three-dimensional space has specific XYZ coordinates.

To get started, I created two matrices, that are the view matrix and the projection matrix. The view matrix defines the position of the camera, that will look at the world, while the projection matrix will determine the way it looks at it.

For this purpose, I declared them at the top of the game class:

Matrix viewMatrix;
Matrix projectionMatrix;

Here is a function that will set the proper values for the matrices:

private void CameraInit()
{
viewMatrix = Matrix.CreateLookAt(new Vector3(positionX, positionY, positionZ), new Vector3(0, 0, 0), new Vector3(0, 1, 0));
projectionMatrix = Matrix.CreatePerspectiveFieldOfView(MathHelper.PiOver4, device.Viewport.AspectRatio, 0.1f, 100.0f);
}

Notice that the first Vector3, that defines the camera position, gets the x, y and z values from three different variables. I use this to later on modify these values whenever the camera moves. Here is the declaration (also should be put on top of the class):

int positionX = 30;
int positionY = 0;
int positionZ = 30;

The values can be easily adjusted depending on the object that is being rendered, so that it fits in the camera “viewfinder”.

Now, I needed to draw the lines that will represent the axes. First of all, I defined an array of VertexPositionColor:

VertexPositionColor[] lines;

To set the values for the reference points, I created a separate function:

protected void SetLineVerticles()
{
lines = new VertexPositionColor[6];

lines[0] = new VertexPositionColor(new Vector3(-10, 0, 0), Color.Red);
lines[1] = new VertexPositionColor(new Vector3(10,0,0), Color.Red);
lines[2] = new VertexPositionColor(new Vector3(0, -10, 0), Color.Green);
lines[3] = new VertexPositionColor(new Vector3(0,10,0), Color.Green);
lines[4] = new VertexPositionColor(new Vector3(0, 0, -10), Color.Blue);
lines[5] = new VertexPositionColor(new Vector3(0,0,10), Color.Blue);
}

Every two VertexPositionColor elements define two points that will be used to draw a line as well as the line color. It is important to make these lines intersect in a single point and make sure that those are perpendicular to each other. Opposite values on the same axis will make this possible (see the correspondence between values – for the X axis it is –10 and 10, same applies to the Y and Z axes.

To draw the axes, I used the following code:

protected override void Draw(GameTime gameTime)
{
device.Clear(Color.White);

BasicEffect effect = new BasicEffect(device,null);

effect.World = Matrix.Identity;
effect.View = viewMatrix;
effect.Projection = projectionMatrix;
effect.VertexColorEnabled = true;

effect.Begin();

foreach (EffectPass pass in effect.CurrentTechnique.Passes)
{
pass.Begin();

device.VertexDeclaration = vertexDeclaration;
device.DrawUserPrimitives(PrimitiveType.LineList, lines, 0, 3);

pass.End();
}

effect.End();
base.Draw(gameTime);
}

It is the regular Draw function with primitive drawing code inside. Notice that I have a undeclared element here: vertexDeclaration.

It is what it is named – a VertexDeclaration instance:

VertexDeclaration vertexDeclaration;

Another interesting part of the above code is effect.VertexColorEnabled = true; This part enables the colors for the drawn primitives. If I will not enable this, all my lines will be black, although I explicitly set the colors for them.

if you run the game now, you will see a set of lines drawn as seen from the front. What if I wanted to see those from an angle perspective? I added the code below to the Update function, so that when the up key is pressed, the Y position of the camera is increased, therefore I can clearly see the axes.

if (Keyboard.GetState(PlayerIndex.One).IsKeyDown(Keys.Up))
{
positionY++;
CameraInit();
}

Here is why I needed the positions on the axes to be separate variables rather than hard-coded values. You can change those depending on how you want to move your camera now.

The end result (with camera moved a bit) should look like this:

Image lost since transition to new blog

Now, you can easily place other objects in this space and you can visually track where those are located.