Tilebased games in Flash 5 - Part 8

I browse around the flash-forums once in a while and look around in the "game development"-forums. Thereīs almost always a bunch of big threads about isometrics, so I thought we could devote some time to that before I write about editors.

There is really no difference between isometrics and 2d. Not much code-wise anyway. This is the differences:

1. The way you build the map(attach tiles).
2. y turns into inversed z, y now means distance from the ground.
3. The way you render moving objects x- and y-positions.
4. We have to worry about z-sorting.

So we could start out with something like this(focus then arrowkeys):



We have a buildMap-function that draws the map and we have a character you can control with the arrowkeys. Fla-file here.
One thing you might notice if youīve looked att previous examples is that the characters _x- and _y-properties is not updated instantly. Instead the character has itīs own xpos- and ypos-properties, and when all is set, it calls the render-function, which now only looks like this:
function render () {
	_x = xpos;
	_y = ypos;
}
This will make some more sence later(I hope :)). This is usually a good practice, to have your own properties and run all collision stuff on them, and in the end draw the changes on the screen.

This is how the tiles translate from 2d to isometric(if you didnīt know).



Now to change this from 2d into isometrics, we need 2 new variables for our buildMap-function. Letīs call them isotileW and isotileH, they represent the actual width and height of a flat isometric tile.
If your original tile was 16x16, they will be something like this:
isotileW = 22;
isotileH = 11;
They will only be used when drawing the map(position the tiles correctly).
Then we need to change this in buildMap-function:
this.clip["t_"+i+"_"+j]._x = j*tileW;
this.clip["t_"+i+"_"+j]._y = i*tileH;
That is the way we position the tiles... into this:
this.clip["t_"+i+"_"+j]._x = (isotileW/2)*(j-i);
this.clip["t_"+i+"_"+j]._y = (isotileH/2)*(j+i);
Now the buildMap-function draws the map like it should. Sorry if this is a repetition of tutorial 5...

Now we need to make the character render itīs _x- and _y-positions a little different. For that we need a few new variables:
sinY = cosY = 0.707;
cosX = 0.866;
This is some constant sinus and cosine values, you could get the same thing for sinY and cosY if you use Math.sin(the radiance of 45 deegres) and Math.cos(the radiance of 45 deegres). The cosX comes from 30 deegres in the same way. In the swf down below Iīll try to explain why we use these values...



I snatched those values from Andries Odendaal's(Wireframe) tutorials.

These values is then used when we change the render-function from this:
_x = xpos;
_y = ypos;
into this:
_x = -ypos*sinY+xpos*cosY;     
_y = height*cosX-(-ypos*cosY-xpos*sinY)/2;
This will render any movement according to the isomteric view. You might notice that thereīs a height-variable which hasnīt been mentioned anywhere. This is the distance from the ground(or "y" if you will), try setting it something like -20, and the character will appear to me hovering above the ground.

Only thing thatīs left now is z-sorting. Now there are probably many ways to that, in this case I just sort the character against the tile itīs standing on, like this:
var depth = ((centerY)*mapH) + (centerX+1)
this.swapDepths(depth);
Almost works in this case :)

Hereīs how it looks now... (focus then arrowkeys)



And hereīs the fla. Try to compare it with the previous 2d-version, I have tried to comment everything thatīs new or changed.
So the conclusion youīve hopefully reached is that isometrics is not very different from 2d, itīs just the visual stuff that have changed, the tile-concept is still the same.
If you want some more info on isometric projection I suggest you read this: http://www.compuphase.com/axometr.htm. A Very good overview... :)

(C) OutsideOfSociety 2002.