Introduction:

This example will show you how to successfully create an isometric engine, firstly we will need a tile. Here is one I prepared earlier:

A tile (64 by 32 pixels)

Note how the tile has diagonal sides this is to allow loads of tiles to fit together correctly, so there is no overlap that the games player can see. Right now we have our tile lets construct our basic isometric engine. Firstly you need to understand how its going to work, there is a series of simple principles to follow:

1) The top-center corner is always halfway across the tiled display (ie where you draw your tiles)
2) The drawing process ALWAYS goes down and right.

If you follow those it should be easy to create a working isometric engine. Another thing you need to know is with each tile placed (on the same row) your next tile is 1/2 the tile width to the right and 1/2 the tile height down when you complete a line you move the draw cursor down 1/2 tile height and left 1/2 tile width this will allow you to create the isometric diamond shape.

Example 1: The basic diamond

In Example 1 there are several simple things we need to create our perfect engine CX and CY and the start of every line of the display these are reset every complete game cycle to make the display work. AX and AY are the coordinates of the top-center of our diamond display (for every tile these are incremented by 32 and 16 respectively, half our beginning tile (64 by 32) this will create a nice diamond that fits together perfectly). After every line we take 32 from CX and 16 from CY this will move the beginning of the next line down and to the left.

Example 2: Lets add our tile into the example

After the Setbuffer BackBuffer() add:
Global tile = LoadImage("tile.bmp")

And after the : For xx=0 to 10 add the following line:
Drawimage Tile,ax-32,ay

Now run the example again, you should now have some green tiles with white outlines, the outlines can be removed by adding ';' characters to the beginnings of both the if lines. We should now have the basics of an isometric engine. Notice the bottom of the image doesnt have white lines on this is because this would be your bottom edge of the diamond (the white line version of the engine).

Adding buildings and other terrain features to the engine is a simple process, firstly you need something to add to the terrain lets try this house (how convienient ;) ):

A simple house (64 by 64 pixels)

Adding this house wont be as simple as just adding a terrain tile to the engine we need to work out how high it is to add it in the correct position. The house there is 64 by 64 pixels, this means we need to take 32 from AY when we place our house. Now to add it to our example:

Add the following line under the 'Global Tile = LoadImage("tile.bmp"):
Global House = LoadImage("house.bmp")

And add the following line under the 'Drawimage tile,ax-32,ay' :
if xx = 5 and yy = 5 then drawimage house,ax-32,ay-32

The reason its 32 is the basic tile is already 32 pixels high this is taken from the house leaving 32 pixels left, this is taken from AY to place the house correctly on the isometric display. Now run the program and marvel at your isometric 3d engine with the beginnings of Populous :)

(Blitz Full version owners can get more bits to add to thier engines by going into 'Help\UserPages\WizardWars' in the Blitz Basic root directory.)

Hopefully this has given you a few pointers how to go about creating your own isometric engines, and make all those old 'Ultimate Play The Game' games a reality once more :).

If you have any further enquiries email me at ed@edzup.co.uk.

-EdzUp