Playing With The Isometric Perspective

Before the mainstream advancement to 3D games it was not uncommon to find games featuring isometric (or axonometric) perspectives. This perspective is intriguing because it remains 2 dimensional but has a depth component. Some refer to isometry as 2.5 dimension or pseudo-3D for this reason. Unlike 3D games, isometric game objects should appear the same size regardless of how far away they are.

While the isometric perspective provides an interesting art style and gameplay, it also presents us with a few challenges. Currently, I am working with a team on a Bomberman-style game. In this particular world, players are able to explore a multitude of heights in an isometric environment.

When working on an isometric game, drawing order of tiles and entities becomes important. When done incorrectly tiles or entities will be clipped by others. To ensure that they overlap correctly the isometric map tile rows should be drawn top-down. This is to say that rows of tiles in the back of the map (farthest from you) should be drawn before the tiles closer to you. (This TIGSource forum thread discusses some further potential clipping problems with isometric draw order.)

Simple isometric draw order

When dealing a multiple layer game like we are, identifying the different layers may prove difficult for players. This situation gets worse when tiles of different layers match up visually where a tile could belong to any two layers. In the image below, how can will the player tell where their character is standing? Can the character move down or will it collide with a tile?

Where is the Murid standing in relation to the other tiles?

It is not hard to lighten up the tiles of each layer. In that image above, you should notice a subtle color variance between the layers. Our character is standing on a tile which is slightly darker than the tiles in front of it. This effect is very subtle.

We can also outline the edges of tiles that have no neighbors in that direction. In our code, we set it up so that each isometric tile knows its neighboring tiles (if it has any) in every direction. With something like this already set up it should be relatively cheap to determine which edges of which tiles need outlining so that the edge is more obvious. Note that edges facing us do not need outlining since these edges and their sides are already facing us.

Left: No shading, Right: Some edge shading

Outlining these tiles can look awkward when we introduce ramp tiles. Ramps are essentially distorted rectangles where two nodes join with the bottom layer and the other two join with the layer the ramp leads to.

Isometric ramps with valid shading

The problem lies with the distortion of the ramp. Ramps facing the player appear vertically elongated, and ramps facing away from the player are vertically squished. An outline x pixels thick will appear thicker for ramps facing the player and thinner for those that aren’t.

Notice the smaller outline for the ramp

What happens if a character is completely covered by the map? Some games overcome this by showing an outline of the character sprite in such situations. Of course, in many cases outlining is more involved than taking the difference the character sprite silhouette and a larger one. For complex shapes, the technique described will not generate a uniform outline thickness. Alternatively the character sprite could be inverted to indicate the same thing.

This second solution doesn’t sound like much of a solution: We could chose to ignore this problem completely. Level designs should reflect this decision so that this situation is impossible to create. Even if players could see their own characters, should we really burden players to interact with parts of the level environment they can’t see?