We will use Arrays or Vectors to hold information about the tiles that makes up the map. Arrays is a convenient way to hold a set of variables or objects.

Two dimensional array

You need two-dimensional array for map in order to both store rows and column of tiles. Two-dimensional arrays is just arrays, that contains a set of arrays. Let’s take it from the bottom up, in order to get it right..

Normal, simple array declaration looks like this:

var myArray:Array = ["a", "b", "c", "d"];

You can get value of first element with the array access operator []  that looks up the array. Something like:


returns “a”. Arrays are zero-based, which is why you enter 0 to get the first element. Second element is myArray[1] and returns “b”, and so on.

Now the clever part! What if you don’t put “a”, “b” and “c” into array, but inserts other arrays? Yes, you can do that. Here, let’s make some arrays:

var a:Array = ["a1", "a2", "a3"];
var b:Array = ["b1", "b2", "b3"];
var c:Array = ["c1", "c2", "c3"];
var myArray:Array = [a, b, c];

Now we have declared array myArray and each element in there is also an array. So, a look at myArray[0] returns an array with ["a1", "a2", "a3"], second element has value ["b1", "b2", "b3"]. If you write:

var myVar:Array = myArray[2];

then myVar gets value ["c1", "c2", "c3"].

If you double the access operators, with two sets of square brackets, you can “dig” into the underlying elements in the arrays. If you write:

var myVar:String = myArray[2][0];

then it gets value of first element of third element in myArray “c1″, and

var myVar:String = myArray[0][1];

takes first element of myArray (a) and second element from that (“a2″).


gets value b1 You get the picture.

Making the map

A complete map stores in a two-dimensional array could look like this:

var myMap:Array = [
 [1, 1, 1, 1, 1, 1, 1, 1],
 [1, 0, 0, 0, 0, 0, 0, 1],
 [1, 0, 1, 0, 0, 0, 0, 1],
 [1, 0, 0, 0, 0, 1, 0, 1],
 [1, 0, 0, 0, 0, 0, 0, 1],
 [1, 1, 1, 1, 1, 1, 1, 1]

As you can see our map has 6 rows and 8 columns. If our hero would start from top left corner, he could move 8 steps right and 6 steps down before leaving map and wander into unknown space. The values are tile ID’s  and used to referer to the tile that should be at the given position.

If for example we get number 1, then we create new tile from Tile1 template. Then in the game, when we reach that tile, we will check the properties of that tile objects. It can have many properties, but most basic tiles have only 2 properties – walkable and frame.

Walkable shows if a character can walk into that tile (walkable=true) or not (false). We do not use the hitTest that is built into Flash as hitTest is quite slow and therefor not relevant, when we need to pump as much power out of the player as possible.

Frame tells what frame of tiles movie clip we have to show in that position. It is used when placing the tiles on the screen. As we use same tiles movie clip for every tile by attaching it over again, they all would show frame 1 by default. More about this on Creating Tiles section. In addition to that, we will explore the possibility of creating a sprite sheet, that is one large image, with some coordinates that tells, where each image is placed.

So, if we declare a tile, by doing something like this:

var tile1:Tile = new Tile();

This creates a tile that can’t be stepped on (walkable=false) and in that spot, the tile to show should be the one from frame 2.

Next: Creating Tiles

Link to original

The original version of this page can be found at http://www.tonypa.pri.ee/tbw/tut01.html 


Leave a Comment