Isometric Projection is a common game view that has been widely used for almost 30 years since the 1980s. Thanks to the good-looking 3D depth presentation in 2D coordinate, isometric projection is being used in many games in different platforms. It provides some kinds of 3D depth feeling to the game without handling full 3D coordinates and manipulations. This is an important technique in making Flash game and Flash virtual world because Flash does not support full 3D in mature way yet and isometric game view is one of the best solutions in Flash to provide 3D-like representation.
In this chapter, we are going to learn basic isometric techniques in Flash. The following topics will be discussed:
- The concept of isometric projection
- Drawing an isometric tile in Flash
- Drawing the bitmap graphic textures for isometric map
- Loading external map data
- Converting the coordination between isometric and screen
- Building a map editor
This chapter mainly focuses on the basic techniques of applying isometric map. There are some advanced techniques such as sorting objects to make correct depth in isometric projection which will be discussed in Chapter 7, Creating Buildings and Environments in the Virtual World.
There are different game views in presenting a Flash virtual world. Top-down, side-scrolling, 3D, and isometric view are four common views. It is important to decide which game view is being used for the whole virtual world because they require totally different graphic drawing techniques implementation. We will compare the advantages and disadvantages for each game view.
This is a game view where the camera hangs in the sky looking downwards to the player. The camera can be perpendicular to the ground or it can view the ground from some angles.
As the angle and rotation of the camera is fixed in top-down perspective, all static objects in the world need to be drawn only once.
One disadvantage of the top-down perspective is that the graphic detail cannot be viewed if it is not facing the player.
The following screenshot from Pokemon in Game Boy uses top-down perspective. We can only see the front wall of the house that faces the player and we cannot see any side walls.
In this type of game view, the game is viewed by the side-view camera. Game objects are placed side-by-side and the characters usually move towards left and right.
The advantage of the graphic implementation is that the rich graphics can be drawn in lesser time compared to other views because almost all graphics only need to be drawn in one-angle view, and the left and right view can be duplicated.
The disadvantage is that there is not much depth and 3D effect in the side-scrolling view.
The following screenshot shows one of the most representative works of side-scrolling games, Super Mario Brothers:
In a full 3D game view, the camera is not fixed into one angle. Instead, the camera can be placed and rotated freely.
There are some 3D engines for Flash. Papervision3D and Away3D are two famous 3D engines for Flash that can import and manipulate 3D mesh objects that are created from 3D software. Game developers can pan and rotate the camera view freely without drawing a lot of artwork because they are be rendered from the same mesh object.
The following graph shows a mesh rendering by Away3D. Different texture can apply to the same mesh and the mesh can be rotated and panned freely.
The disadvantage of using 3D view in Flash is that displaying complex 3D mesh in Flash may result in slow performance, and programming 3D world requires much more advanced programming and graphic techniques than other game views.
Isometric projection is a method to display 3D objects in 2D. It is sometimes called "2.5D" because it can give a good effect on 3D depth in 2D coordinate. Isometric has been widely used in the game industry for almost 30 years.
The advantage of using isometric game view is that it gives some basic 3D features without dealing with 3D coordinates and complicated 3D mesh objects.
The following screenshot shows the game that uses isometric projection to add depth and details in the city view of a virtual world (screenshot from the Flash game hosted on www.seasonlao.com).
There are some disadvantages of using isometric game view. One is that extra coordination conversion and calculation is needed because the isometric world is displayed in a diamond form instead of a square form.
Another disadvantage is that every movable element requires more then one graphic to display in isometric projection because there are different angle views. An object may face North, East, South, West or even NW, NE, SW, SE. When comparing isometric projection to other game views, it requires much more artwork production time.
Many virtual worlds and games are in isometric projection because the 2.5D game view can present the game world better while preventing the much more difficult full 3D programming.
The virtual world we are going to build will also be based on isometric projection.