How do I properly draw complex 2D isometric tiles?

Questions & Answers
1

How do I properly draw complex 2D isometric tiles? I am having trouble with my current attempt which can draw flat isometric tiles perfectly, but renders weirdness when those tiles are given a 3D-ish look to them.

The code I am using to do the drawing is:

using UnityEngine;

public class TileMap : MonoBehaviour
{
    [SerializeField]
    private GameObject m_tile;
    [SerializeField]
    private int m_width = 10;
    [SerializeField]
    private int m_height = 10;

    private float m_tileWidthPx = 128;
    private float m_tileHeightPx { get { return m_tileWidthPx * 0.5f; } }
    private float m_unitsPerPixel = 100;
    
    private float m_unitsOffsetX { get { return (m_tileWidthPx / m_unitsPerPixel); } }
    private float m_unitsOffsetY { get { return m_unitsOffsetX * 0.5f; } }

    void Start()
    {
        for (int i = 0; i < m_width; i++)
        {
            for (int j = m_height - 1; j >= 0; j--)
            {
                var tile = Instantiate(
                    m_tile,
                    new Vector3(
                        (j * m_unitsOffsetX / 2) + (i * m_unitsOffsetX / 2),
                        (i * m_unitsOffsetY / 2) - (j * m_unitsOffsetY / 2),
                        0),
                        Quaternion.identity);

                tile.name = string.Format("({0}, {1})", Mathf.Abs(i), Mathf.Abs(j));
            }
        }
    }
}

I am getting these results:

18073-isometric-art-problem.png
18073-isometric-art-problem.png982×608 336 KB

The red lines are used to indicate the problem areas.

2

You need a camera set to orthographic projection mode. This will remove all foreshortening and all grid lines on the same plane will be parallel or meet at the same one angle in the viewport space and screen space. Play with the orientation of that camera to get the exact angle you want.