IsometricGood

Cultura is an isometric game, for now at least, and so let's make the isometric view properly.

I want to apply textures to quads which we use for the squares that represent each spot in the grid-like world.  But I've a problem:

Drawing a quad then apply the texture will then result in the texture facing the wrong way.  Sad times!  In order for the texture to look right we need to reorient it.  But you need to rotate it 45 degrees counter clockwise to face the right way and we've no way of rotating only the texture.  And I'd like to simply say, "I want to place wild wheat here" and then it is there.  No need to do math beyond the coordinates.

In order to achieve this, I went about a suggestion from a friend and rotated the square counter clockwise 45 degrees.  Now I apply the texture to this rotated quad.  When the camera rotates clockwise 45 degrees, voila, the quad has the texture facing the correct direction.  Then I render it such that it is blocking the terrain below it.

But there's a new problem.  If I use the quad of the original size, it looks wrong.  Why?  Well if you look carefully above at the diagram, after you have rotated the square, the texture it displays isn't spread across the original amount of area.

That's a normal quad.  After you've rotated it, try putting that original square back over top of it.  You'll notice that the texture doesn't touch the corners of the rotated square!  So I need to make the original square larger AND rotated counterclockwise 45 degrees.

In order to get the correct coordinates, imagine the normal square with sides of length 1.  Now draw a diamond around it such that it just touches the corners.  The centre of the two squares are the same and using the fact that the diamond just touches the corners of the square you can get the length of the diamond's sides.

Draw it out and you'll see that it's a simple application of the hypotenuse.  The length of half the side is 0.5^2 + 0.5^2 = x^2.  Therefore x = 0.5.  So every corner of the diamond is 0.5 distance out from the midpoint of a square's sides.  Look below for how the diamond looks and the coordinates.

And then now, you can draw a texture normally onto the enlarge rotated quad and when it gets displayed it'll look correct.  You do have to draw the texture as a diamond though :P