Video Games With Isometric Graphics - Mapping Screen To World Coordinates

Mapping Screen To World Coordinates

One of the most common problems with programming games that use isometric (or more likely dimetric) projections is the ability to map between events that happen on the 2d plane of the screen and the actual location in the isometric space, called world space. A common example is picking the tile that lies right under the cursor when a user clicks. One such method is using the same rotation matrices that originally produced our isometric view in reverse to turn a point in screen coordinates into a point that would lie on the game board surface before it was rotated. Then, by dividing the x and y values by the tile width and height and rounding down we can derive the world-x and y values. Another way that is less computationally intensive and can have good results if our method is called on every frame, rests on the assumption that we have a square board that was rotated by 45 degrees and then squashed by 0.5 vertically as explained above. We first find the tile clicked on the a virtual grid that is laid on top of our projection as shown on the diagram, we call it virtual-x and virtual-y. As we can observe, clicking any tile on the central axis of the board where (x, y) = (tileMapWidth / 2, y), will produce the same tile value for both world-x and world-y which in our example is 3 (0 indexed). By selecting the tile that lies one position on the right on our virtual grid, we actually move one tile less on the world-y and one tile more on the world-x. We can then derive a formula that calculates world-x by taking the virtual-y and adding the virtual-x from the center of the board. Like wise we can derive world-y by taking virtual-y and subtracting virtual-x. These calculations measure virtual-x from the central axis, as shown, so we must subtract half the board. An example code in C can look like this (provided the variables have the correct values):

float virtualTileX = screenx / virtualTileWidth; float virtualTileY = screeny / virtualTileHeight; // some display systems have their origin at the bottom left while the tile map at the top left, so we need to reverse y float inverseTileY = numberOfTilesInY - virtualTileY; float isoTileX = (int)(inverseTileY + (virtualTileX - numberOfTilesInX / 2)); float isoTileY = (int)(inverseTileY - (virtualTileX - numberOfTilesInX / 2));

This method might seem counter intuitive at first since we are taking the coordinates of a virtual grid rather than the original isometric world and there is no one-to-one correspondence between virtual tiles and isometric tiles. A tile on the grid will contain more than one isometric tiles and depending on where it is clicked it should map to different coordinates. The key in this method is that the virtual coordinates are taken as floating point numbers rather than integers. A virtual-x and y value can be (3.5, 3.5) which means the center of the third tile. In the diagram on the left, we see the 3rd tile on the y in detail. As we can see, when the virtual-x and y can add up to 4 in which case the world x will also be 4.