Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript

Chapter 2. Making It Isometric

Our game, and other isometric games such as Sid Meier’s Civilization, Blizzard’s Diablo, or Zynga’s FarmVille, CityVille, and Café World use a special form of isometric projection (called dimetric projection) in which tiles (usually diamonds or hexagons) are displayed in a 2:1 ratio with their height at half their width.

Most game developers choose to display tiles with this specific 2:1 ratio because of a problem unique to raster graphics, which we can understand if we know how computer monitors work. Monitors—whether they are CRT, TFT/LCD, LED, or OLED—display pixels in a grid similar to the one in our game, which allows us to draw perfect vertical or horizontal lines. However, if we need to display a line at an angle than 0° or 90°, things start to get messy. Figure 2-1 shows the resulting problems.

Although the 90°, 45°, and 0° lines have a regular pattern and can be “stitched” with a parallel line perfectly, the 30° line doesn’t; it contains gaps instead. However, if we use the 2:1 ratio, we can calculate the inverse tangent (arctangent) of 1/2 to get 26.5650°, producing a result like Figure 2-2.

Figure 2-1. Gaps in lines drawn at an angle

Figure 2-2. A cleaner result at 26.565 degrees

Although so far our grid works only with squares, converting a square ...