3D in 2D

One of the unique parts about the way realmlikes work is their 2D setup, that incorporates 3d walls into the world.

In 2D games, everything is on a flat plane, with no depth.

But we want 3D walls, that look 3D when you rotate the camera.

A normal 2D top-down camera would not pick up the depth of these walls so we need to think of another approach.

By putting the camera at an angle like so, we can capture the depth of the scene as well. The reason for an exact 45 degree angle is because we want a 1 unit high wall to appear the same size as 1 tile.

This brings a small problem, the camera view becomes squished. If only there was a way to stretch it back out…

And of course there is. The solution is a custom camera projection.

const float ROOT_TWO = 1.41421356237f;
void LateUpdate()
{
    Camera cam = GetComponent<Camera>();
    float size = cam.orthographicSize;
    float aspect = cam.aspect;
    float l, r, b, t, n, f;
    l = -size * ROOT_TWO * aspect;
    r = size * ROOT_TWO * aspect;
    b = -size;
    t = size;
    n = 1f;
    f = 100f;

    Matrix4x4 proj = Matrix4x4.Ortho(l, r, b, t, n, f);
    cam.projectionMatrix = proj;
}

This basically brings the left and right sides of the camera view closer, therefore when it gets rendered to a screen, its essentially stretched back out. The ROOT_TWO constant is here because the hypotenuse of a right triangle with sides of size 1 = √2 = approx. 1.4142…

Now you can see, that without 3d walls it looks identical to a top-down 2D perspective, but the walls integrate seamlessly with the world. You might have noticed earlier that I also made the player sprite stand upright relative to the tilemaps, which gives us the effect of sprite depth sorting for free, which even works with the walls as you can see in the demo video.