# How to achieve this style of view in XNA?

I would like to use a Perspective projection to create the following effect in XNA: Cubes are simply made up of 8 vertices and drawn using DrawUserIndexedPrimitives().

Any extra suggestions, are also welcome.

• Have you tried changing the projection matrix to an Isometric one? – Jordaan Mylonas Jan 12 '12 at 3:21
• Do you want an actual perspective projection, where things get smaller as they get farther away? The diagram you drew looks like a parallel projection at an oblique axis, rather than a perspective projection. – Nathan Reed Jan 12 '12 at 3:47

If what you want is indeed like your drawing suggests, then you're looking to implement an oblique projection. Check this video for an example of this type of projection in a game. The big difference is that the game in the video uses a set of pre-made tiles, while you're trying to do the projection mathematically.

For starters, here's a picture which should make evident the difference between perspective, isometric and oblique projections. Use it to decide which of these you really want. Now, you can implement both Perspective and Isometric projections using methods already available in the XNA API:

• For a Perspective Projection, simply use one of the Matrix.CreatePerspective family of methods.
• For an Isometric Projection, use one of the Matrix.CreateOrthographic family of methods, and rotate your camera (or your objects) a bit in the X and Y axes so that they match the isometric look.

As for an Oblique Projection, I think it will be a bit more complicated. I've actually never seen an implementation of this before, so I'll just be going with my intuition. Someone let me know if there's a better, known solution to the problem. You're going to need a vertex shader. Here's the steps:

1. Set up an orthographic projection matrix (for which XNA already has helper methods). That's because both oblique and orthographic projections are types of parallel projections, so it's better to start from there.
2. Set up your camera so that it is looking down the Z axis, i.e. perpendicular to the XY plane. You can pan the camera around, but never change the angle it's facing.
3. Use a vertex shader, and after applying the projection matrix, modify the X and Y values using the following formula taken from the wikipedia article above. The angle should probably be around 45 degrees (you might have to invert the sign of Z depending in which space you do the calculation): Optionally you could do this last calculation with a vector instead. For instance, if the angle is indeed 45 degrees, you could do this last step as something like:

position.xy += z * normalize(float2(1,1));


This should make vertices that are further away from the camera, be rendered more to the right, and up from their original positions.