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 16×16, 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)

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… :)


    Sorry, no Tweets were found.