Tilebased games in Flash 5 – Part 5

Now, how to draw an isometric map.
First we make our tiles look a little different. In our tile-movieclip, draw a square, say 30×30 pixels, rotate it 45 degrees. Then scale it 50% vertically. Place the top-center point att 0x0 coordinates. And you got a isometric tile.

The map-drawing is exactly the same as a 2d map, only difference is the way we calculate their x and y positions.

Let´s look at the mapbuild-function for that.

// buildMap-function
function buildMap () {
mapW = map1[0].length;
mapH = map1.length;
for ( i=0; i < mapH; ++i ) {
	for ( j=0; j < mapW; ++j ) {
		this.scrClip.attachMovie("tile", "t_"+i+"_"+j, ++d);
		this.scrClip["t_"+i+"_"+j]._x = (tileW/2)*(j-i);
		this.scrClip["t_"+i+"_"+j]._y = (tileH/2)*(j+i);
		this.scrClip["t_"+i+"_"+j].gotoAndStop ( map1[i][j][0] );
	}
}
}

These two lines are the only difference:

this.scrClip["t_"+i+"_"+j]._x = (tileW/2)*(j-i);
this.scrClip["t_"+i+"_"+j]._y = (tileH/2)*(j+i);

The tileW and tileH variables are the actual width and height of the isometric tile. So if my original ordinary square was 30×30 as in our example, the tileW would be 42.5 and tileH 21.2, after we rotated and scaled it.

If we wanted to change the direction wich we look at our map, we can simply change the places of the i and j in the x-positioning line, or shift places of i+j parantese from x to y.

Here´s the swf:

Here you can download an example.

So there is really nothing new from the 2d perspective in drawing the map, what´s different though is the way to move a character in the isometric space.
In 2d, we have only 2 directions x and y. But now we got 3, x,y and z(z being the depth-movement). So x is when moving down-right or up-left. Z is when moving down-left or up-right. And last y which is when moving up from the map(jumping up from the floor if you will).

Just because this involves some 3d-math, dosen´t mean that it´s rocket-science. It´s still really simple stuff. I´m going to save myself a lot of time and effort trying to explain this here.
Because Andries Odendaal, from Wireframe have already done some examples of this approach in flash, they can be found here: http://www.wireframe.co.za/ff2001/
This is part of his flash-forward presentation 2001 in New york and Amsterdam. I happend to see it Amsterdam btw, really good stuff.

So that´s it for the isometric part. Back to 2d…
Next up I think we´re going to have look at how to make simple enemys.

Twitter

    Sorry, no Tweets were found.

Categories