Implementing axonometric bird-view in XNA

Question

I made all kinds of logic (waypath, aso) for my strategical game, based on XNA (monogame). Now I "misused" the Vector2 a little bit: As I'm working from a "top-down" perspective, I'm using the Y-axis of Vector2 as Z-axis.

My next step is to draw the elements on the screen: I think the axometric-view called "bird view" would suit the game most.

I spent most time of the weekend searching for a way to achive this, but without any luck.

I know how I would draw the objects and defining the depths, but I have no idea how to "calculate" the top-down-position to the one with the perspective.

Here's a picture of what I want to do:

How do I calculate the "real" position (here on the right-side) to the perspective-view (on the left side)? From my research I know the key-word is matrix, but that's all I’ve got.

I don't know to define this bird-view, nor how to proper set up the matrix. I guess with something like Matrix.CreateLookAt? And if so: Would I have to change all my Vector2s to Vector3, to use the "real" axis, or is there another way I could achive this?

Any help would be greatly appreciated.

Cheers, Richard

Answer 1

An axonometric projection is basically an orthographic projection with a rotation. You can create an orthographic projection with Matrix.CreateOrthographic or its friend CreateOrthographicOffCenter (MSDN).

Transformation matrices are basically used to take coordinates from one "space" to another. For example, a projection matrix takes points in "view" space (or "camera" space - where everything is relative to the camera's position and direction) into a space appropriate for the GPU to rasterize.

One nice property of matrices is that you can combine them through matrix multiplication.

For example, if you wanted an axonometric projection, you could do something like this:

Matrix m = Matrix.CreateRotationX(MathHelper.PiOverTwo)
         * Matrix.CreateRotationY(MathHelper.PiOverTwo)
         * Matrix.CreateOrthographic(...);

(Note: I haven't checked or tested the above code - it's for illustration only.)

The rotation matrixes here are somewhat equivalent to a view matrix, that takes points from "world" space to "view" space. In this case it's just the orientation component. (Finally a world matrix takes points from object space, where your model is defined, and places them in the world).

Normally you combine these matrices like so:

 Matrix transform = world * view * projection;

Generally effects, like BasicEffect, do this for you.

In this context, CreateLookAt is generally used to create your view matrix. The matrix that it outputs transforms the entire world so that it's sitting in front of your camera.

Finally: You can use matrices to swap axes, if you need to (I'm not sure you do). Although you might have to manually create your matrices, rather than using the built-in Create methods, in this case.