Isometric vs. Top Down

Xalthorn posted an interesting article at his blog comparing isometric to top down perspective. His main focus was on the field of view each method offers when 2 players look at the same map area.

This article will focus more on the technical bits and on the pros and cons each method offers in terms of a browser based game.

Angled Top Down View

This view, often referred to as Zelda™ like, employs usually square tiles that show the game area from an elevated position straight from the front (from South).  Therefore the North or Up direction in this type of games is usually straight up. This perspective, well known through games like Zelda or the early Final Fantasy titles has some huge advantages for usage in a browser game:

• square tiles don’t overlap [1]
• node events such as mouseover, mouseout and click are easy to use on individual tiles
• arrangement of graphics is easy due to the grid they are placed on
• suited very good for fast paced action

The disadvantages aren’t associated with browser games, but rather  results of the perspective that is used:

• even though tiles are square they show more depth than width (due to the elevated camera)
• because of the straight on view it is hard to place important game details on walls not directly facing the player

Isometric View

This view is wide spread in strategy games and rpg’s.  The game area is viewed from an elevated position and from the front right (from South East). The special feature of this view is that tiles have twice the width of their height and have a diamond shape. North of the map typically is rotated 45 degrees clockwise. Standard tiles have a width / height ratio of 2:1.

Due to this feature, this view offers more visible depth and other advantages:

• due to the rotation and pixel ratio of the tiles depth is more visible
• overlapping tiles don’t completely obscure background tiles
• important game objects can face in more than one direction (without being obscured)

The disadvantages of this perspective affect to a large part browser games because to work around them requires a not unsubstantial amount of work to get around them.

• tiles don’t align in a grid [2] and overlap so regular mouse events can’t be used properly
• depth management is more difficult as with other perspectives
• movement and scrolling(if constrained to a global direction) move in two directions on screen (i.e. North moves the object up and right)

Conclusions

These are just some of the most obvious observations regarding these perspectives. However, they also make clear that isometric tile graphics in a web browser require much more work and quite likely also more processing power of the host machine. One of those reasons is for example that in an  isometric perspective game, instead of using regular events (click) on a tile you instead have to use the click coordinates on the parent element to calculate the click position.

Tags: Games, isometric, tile graphics