## As: Isometric Tile Based Map

• 2,436 Views
• 9 Replies
Pyromaniac
Pyromaniac
• Member since: Jan. 14, 2005
• Offline.
Forum Stats
Member
Level 18
Blank Slate
As: Isometric Tile Based Map 2007-04-04 17:29:01

Here is a tile based map, isometric style. Isometric is a normal square rotated 45 degrees and at half the normal height.

http://denvish.net/ulf/040407/58618_Isometric .swf
SWF Use the arrow keys to move

This is made in all API, but it is very easy to change to attach a movieClip.
All the code is commented, but if you have any questions than just post away.

// Isometric Map Maker
// 24 FPS
// Made by Matt Bellis (aka Pyromaniac) 4/4/07
var i:Number = 100;
// holds depths
var xhold:Number;
var yhold:Number;
// set position of character, not defined yet
var set_size:Number = 50;
// the size of the tiles
var listener:Object = new Object();
// to make a key listener you need an object
var colors:Array = ["0xFFFFFF", "0xD20202", "0x0202DB"];
// what color the sqaures are
var map1:Array = [[0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
[2, 0, 2, 0, 0, 0, 1, 0, 2, 0],
[0, 0, 0, 2, 3, 1, 1, 0, 0, 0],
[0, 2, 2, 0, 1, 1, 1, 1, 1, 0],
[0, 2, 0, 0, 1, 0, 0, 0, 1, 0],
[0, 0, 0, 0, 0, 0, 2, 0, 0, 0]];
// this creates the grid
// 0 = moveable (default white)
// 1 = wall (default red)
// 2 = wall (default blue)
// 3 = player start position (also sets movable square under it)
function setPos(map:Array):Void {
for (var j:Number = 0; j<map.length; j++) {
for (var z:Number = 0; z<map[j].length; z++) {
// loops through the map j being the first power array, z beign the second
// think of j as _x and z as _y
if (map[j][z] == 3) {
xhold = j;
yhold = z;
}
// finds the players starting position and sets xhold and yhold to it
// basically what number the player is in the array, what spot it is at
}
}
}
setPos(map1);
function checkHit(x:Number, y:Number, map:Array):Boolean {
if (map[x][y] == 0) {
return true;
}
if (map[x][y]>=1) {
return false;
}
}
// this function checks to see if a tile is walkable
// if the tile in the array is 0, that means its walkable,otherwise it isnt
function makeSquare(size:Number, color:String):MovieClip {
i++;
// this variable holds our depth so we would want to increase it
px = createEmptyMovieClip("tile"+i, i);
with (px) {
lineStyle(1);
beginFill(color, 100);
moveTo(-size/2, 0);
lineTo(0, size/2);
lineTo(size/2, 0);
lineTo(0, -size/2);
lineTo(-size/2, 0);
endFill();
_height /= 2;
// an isometric square is a normal one, rotated 45 degrees and with 1/2 the original height
}
return px;
}
// this function draws and makes a square movieclip
function makeIsoGrid(map:Array, size:Number):Void {
for (var j = 0; j<map.length; j++) {
for (var z = 0; z<map[j].length; z++) {
// loops through the map j being the first power array, z beign the second
/*
say we have an array that looks like this:
var my_Array:Array = [[0,0,0,0],[0,0,0,0],[0,0,0,0]];
this array has 3 arrays inside of it (really called a matrix)
the first for loops goes through each element in the array
the second one goes through each element in the array that the previous one was looping through
it is hard to describe, but if you understand this, then you understand how tile based games are made
*/
if (map[j][z] == 3) {
player = makeSquare(size, "0x000000");
player._x = size*(j+z)/2;
player._y = size*(j-z)/4;
player._x += 100;
player._y += 150;
player.swapDepths(1000000);
px = makeSquare(size, colors[map[j][z]]);
px._x = size*(j+z)/2;
px._y = size*(j-z)/4;
px._x += 100;
px._y += 150;
map[j][z] = 0;
// if the number in the array is 3 (aka the player) it makes a player and then make a blank square under it
} else {
px = makeSquare(size, colors[map[j][z]]);
px._x = size*(j+z)/2;
px._y = size*(j-z)/4;
/* so you might have seen this a few times before, but this is one of the major differences between a normal game
and an isometric one
so the formula for isometeric tiles are for
X: size*(x+y)/2
Y: size*(x-y)/4
in our case j being x and z being y
*/
px._x += 100;
px._y += 150;
// if its not the player square, then it makes a square, and colors it whatever number it is
// colors[map[j][z]] is the array colors and then whatever number the tile is ( 0, 1, or 2)
}
}
}
}
listener.onKeyDown = function() {
// checks to see if a key is pressed
if (Key.isDown(Key.RIGHT)) {
if (checkHit(xhold+1, yhold, map1) == true) {
// calls up the function to see if the tile in the direction is walkable
player._x += set_size/2;
player._y += set_size/4;
// moves the player's x and y to the square to the right
xhold++;
// if it is walkable then makes the xhold go up, because that variable is used to see if the tile is walkable

}
}
if (Key.isDown(Key.LEFT)) {
if (checkHit(xhold-1, yhold, map1) == true) {
player._x -= set_size/2;
player._y -= set_size/4;
xhold--;
}
}
if (Key.isDown(Key.UP)) {
if (checkHit(xhold, yhold+1, map1) == true) {
player._x += set_size/2;
player._y -= set_size/4;
yhold++;
}
}
if (Key.isDown(Key.DOWN)) {
if (checkHit(xhold, yhold-1, map1) == true) {
player._x -= set_size/2;
player._y += set_size/4;
yhold--;
}
}
// the same thing for the other keys holds true which was said about the right key
};
makeIsoGrid(map1, set_size);
// calls up the function to make the isometric grid using the map1 array, and the variable set_size (change that for bigger or smaller map)

The code might get messed up for being posted on the BBS, but heres the .fla

DanBomer
DanBomer
• Member since: Apr. 1, 2006
• Offline.
Forum Stats
Member
Level 09
Blank Slate
Response to As: Isometric Tile Based Map 2007-04-04 18:09:43

Greaty tutorial. It really helps on the game im making! :P

Denvish
Denvish
• Member since: Apr. 25, 2003
• Offline.
Forum Stats
Member
Level 46
Blank Slate
Response to As: Isometric Tile Based Map 2007-04-04 18:13:22

Cool tut, definitely a useful one for tile-based games.

Don't forget to add post a link in AS: Main so it doesn't get missed in the next update.

- - Flash - Music - Images - -

Depredation
Depredation
• Member since: Sep. 5, 2005
• Offline.
Forum Stats
Member
Level 17
Game Developer
Response to As: Isometric Tile Based Map 2007-04-05 15:17:49

Nice tut. Although i think theres an error. You called your map array 'map1', but you refer to it as 'map' throughout the as. I'm probably wrong, but its worth checking :).

Pyromaniac
Pyromaniac
• Member since: Jan. 14, 2005
• Offline.
Forum Stats
Member
Level 18
Blank Slate
Response to As: Isometric Tile Based Map 2007-04-05 23:42:07

At 4/5/07 03:17 PM, Depredation wrote: Nice tut. Although i think theres an error. You called your map array 'map1', but you refer to it as 'map' throughout the as. I'm probably wrong, but its worth checking :).

In the functions to build maps and stuff it uses map as a variable
So when you call the function you use what map you would want to (ie- map1)

pivot11
pivot11
• Member since: Jun. 16, 2006
• Offline.
Forum Stats
Member
Level 07
Blank Slate
Response to As: Isometric Tile Based Map 2007-04-06 02:23:19

Great job! This is definitly useful

Blok' Party, Orbital Khaos, site, MSMstudios, Phrozen Phlame

Penboy
Penboy
• Member since: Jun. 17, 2006
• Offline.
Forum Stats
Member
Level 17
Artist
Response to As: Isometric Tile Based Map 2007-04-06 03:06:38

glomph
glomph
• Member since: Jun. 16, 2005
• Offline.
Forum Stats
Member
Level 10
Blank Slate
Response to As: Isometric Tile Based Map 2007-04-15 13:18:54

vaguely related
how do people get around the fact flash auto formats arrays on to one line?
thanks

I have done the deed. Didst thou not hear a noise?

xWELSHxDRAGONx
xWELSHxDRAGONx
• Member since: Apr. 13, 2006
• Offline.
Forum Stats
Member
Level 07
Blank Slate
Response to As: Isometric Tile Based Map 2007-04-15 16:57:13

2 options, either dont use auto format, or accept it puts it on 1 line.

Its cool to see how much u have advanced pyro over the last like year.