# Camera2D - create isometric view

I am working on a ordinary 2D RPG for quite some time now using ordinary orthagonal view.

For testing purposes I would like to set the view to an isometric view… Diablo2 like.

To be honest, I don’t understand everything about ViewMatrices, Projections and so on, but I thought that it should be quite easy to get my Camera into an isometric perspective.
Well… the 45° rotation on one axis is easy and kind of obvious, but I need to rotate it by another 30° on the other axis.

What I got now is the following (quite straight foreward I guess)

``````Camera2D camera;
camera = new Camera2D(GraphicsDevice.Viewport);
Matrix viewMatrix = camera.GetViewMatrix();

spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.NonPremultiplied, transformMatrix: viewMatrix);
``````

And the Camera Class:

``````public class Camera2D
{
private Vector2 position;

public int viewWidth;
public int viewHeight;
public int worldWidth;
public int worldHeight;

public Camera2D(Viewport viewport)
{
this.viewport = viewport;

Rotation = 0;
Zoom = 1;
Origin = new Vector2(viewport.Width / 2, viewport.Height / 2);
Position = Vector2.Zero;

viewWidth = viewport.Width;
viewHeight = viewport.Height;
}

public Vector2 Position
{
get
{
return position;
}
set
{
position = new Vector2(
MathHelper.Clamp(value.X, 0, worldWidth - viewport.Width),
MathHelper.Clamp(value.Y, 0, worldHeight - viewport.Height));
}
}

public float Rotation { get; set; }
public float Zoom { get; set; }
public Vector2 Origin { get; set; }

public Matrix GetViewMatrix()
{
return
Matrix.CreateTranslation(new Vector3(-Position, 0f)) *
Matrix.CreateTranslation(new Vector3(-Origin, 0f)) *
Matrix.CreateRotationZ(Rotation) *
Matrix.CreateScale(Zoom, Zoom, 1) *
Matrix.CreateTranslation(new Vector3(Origin, 0f));
}

public void Update(int xPos, int yPos)
{
Position = new Vector2(xPos - viewWidth / 2, yPos - viewHeight / 2);
}
}
``````

I have the feeling that I need to tweak GetViewMatrix() to get the desired result, but I dont know how (besides of setting Rotation to 45°)
Maybe I am on a completely wrong path?

Matrix.CreateRotationZ(Rotation) *

Matrix.CreateRotationZ(RotationZ) *
Matrix.CreateRotationX(RotationX) * // add this line

1 Like

Hi, Yes 2D camera can be tweaked ^_^y

But your youtube sample is not an Isometric 2D game, it’s a TOP DOWN TILE BASE SYSTEM sample, that can be achieved by a simple rectangular tile base system using the sample image below.

Even Diablo 2 has no specialized 2D camera system it uses an ISOMETRIC TILE BASE SYSTEM.

You can achieved isometric view feeling by using an Isometric tile system.

Cheers ^_^y