How to calculate the height and width of an isometric rectangle/square

Question

I'm writing an isometric tile game. Each tile is twice as wide as it is tall (w:h = 2:1). All tiles in a map are the same size and their width and heights are known (TileWidth and TileHeight).

There can be any number of columns (>0) and rows (>0).

I'm struggling to come up with a formula to calculate the width and height of the fully drawn map. This needs to be the distance from the very top to the very bottom and the extreme left to the extreme right. As the number of columns and rows can vary (and thus the map is not always a perfect diamond) it's proving very hard!

Answer 1

Good question! There's a not-too-obvious answer but it's easy to calculate:

Let's call the row axis "r" and the column axis "c", and consider the first picture, where the extent along the r axis is 5 and the extent along the c axis is 3.

The unit increment along the r axis, relative to the drawing plane, is at angle +30 = (cos 30°, sin 30°) = (sqrt(3)/2, 0.5), and the unit increment along the c axis is at -30 = (cos 30°, -sin 30°) = (sqrt(3)/2, -0.5).

You need to consider the two diagonals of your isometric rectangle. In the first picture, those diagonals are D1 = [+5*U along the r axis and +3*U along the c axis] and D2 = [+5*U along the r axis and -3*U along the c axis], where U is the tile length in the isometric plane. When transformed into the drawing plane, this becomes D1 = ((5+3)*sqrt(3)/2*U, (5-3)/2*U) = (4*sqrt(3)*U, 1*U) and D2 = ((5-3)*sqrt(3)/2*U, (5+3)/2*U) = (sqrt(3)*U, 4*U). The screen width and height, therefore, are the maximum of the two extents = 4*sqrt(3)*U, 4*U.

This can be generalized: if there are Nr rows and Nc columns, and the tile length is U, the extent of the diagonals of the rectangle in the drawing plane are D1 = ((Nr+Nc)*sqrt(3)/2*U, (Nr-Nc)/2*U) and D2 = ((Nr-Nc)*sqrt(3)/2*U, (Nr+Nc)/2*U), and the screen width and height, therefore, are:

W = U*(Nr+Nc)*sqrt(3)/2
H = U*(Nr+Nc)/2