Camera2D - create isometric view

Graphics
1

I am working on a ordinary 2D RPG for quite some time now using ordinary orthagonal view.
(example here: https://www.youtube.com/watch?v=2cexpfyjwAE)

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 readonly Viewport viewport;
    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?

2

Matrix.CreateRotationZ(Rotation) *

…

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

1 Like
3

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