Tilebased games in Flash 5 – Part 1

Tilebased games have been done basicly since the dawn of the computergames era. Back in the days when we had computers like the 48k Spectrum ZS and Commondore 64 there were no 32mb graphic cards or 128mb rams to store the graphic and code. The gamedevelopers had to work pretty hard to squeeze everything in, and if you look back today and see what they did, it´s rather impressive. What they had to do, was to work out really smart solutions to fit it all in, this often meant ‘recycling’…

So what´s so good about tiles then? Filesize, speed, easy mapbuilding, collision detection and so on… If you don´t get it, hopefully you will after reading this and experimenting on your own.

If you ever owned a C64, spectrum, nintendo, sega, atari, amiga or whatever, chances that you have played tilebased games are 100%. But you might haven´t noticed and that´s the whole idea. If you look at some old nintendo classics like Super mario bros or Zelda, you will easily spot the different tiles and see how they were built. If you look at for example Super mario bros you can see that the bushes and the cloud-tops use the exact same tiles, just a different color. Tiles can be flipped horizontal and vertical to be used again and again to create different looks, and much more.

The basic idea is to put tiles(squares of graphic) next to eachother in a grid to create maps. The first thing we can do is to create a couple of tiles, lets just a make a black and white one to keep it simple.
Make a movieclip(ctrl-F8), name it ’tile’. In the first frame draw a white square with a black hairline, make it 16×16 (width x height), center it. In the second frame, make a copy of the first one and fill it with black. Now we got two simple tiles.
So lets move on…

Now we need to create a map. This is best done with a multidimensioal array, don´t worry it´s easier than it sounds. It can look something like this:

myMap = [ [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] ];

So lets explain this, the varible ‘myMap’ is an array containing six elements, these elements are in their turn arrays. What we got then is a twodimensioal array. So what good will this do then? Well this is our map, at least it will be.
The 1:s will be black tiles and the 0:s will be white tiles.
Now lets make function that draws our simple map.
But first let´s go back to the tile-movieclip we made earlier, open the library(ctrl-L), rightclick the tile-mc choose linkage, check ‘export this symbol’, then write ’tile’ in the identifer-field.

Now open your actionscript window on the first frame on the main timeline. Put the myMap-array there.
On to the mapdrawing-function.
Let´s look at the whole thing first and then we’ll go through it step by step later.

// ### code start
// no scaling of the flashmovie...
fscommand ( "allowscale", false );
// constants of the tiles width and height
tileW = 16;
tileH = 16;
// our map-array
myMap = [ [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] ];

// the mapdrawing-function
function buildMap (map) {
	var mapWidth = map[0].length;
	var mapHeight = map.length;
	for (var i = 0; i < mapHeight; ++i) {
		for (var j = 0; j < mapWidth; ++j) {
			this.attachMovie("tile", "t_"+i+"_"+j, ++d);
			this["t_"+i+"_"+j]._x = (j*tileW);
			this["t_"+i+"_"+j]._y = (i*tileH);
			this["t_"+i+"_"+j].gotoAndStop(map[i][j]+1);
		}
	}
}

// calls the mapdrawing-function with the argument myMap
buildMap (myMap);
// ### code end

Try at and see if it works, if it dosen’t, read carefully and make sure you followed everything, or if you´re lazy, download a fla.

Here´s what mine looks like:

So now let´s step through the code.
We started by setting some constants:

tileW = 16;
tileH = 16;

These are just the width and the height of out tiles, we use them later on in the mapdrawing-function to give each tile a correct x and y position.

Then we have the function:

function buildMap (map) {

We pass one argument, which is the map we want to draw, in this case we pass myMap.

Then we set two variables:

var mapWidth = map[0].length;
var mapHeight = map.length;

Here we measure the maps width and height, in tiles.
The first one, map[0].length, checks to see how long the first element in the map-array are, or the length of the first array in the big array, if you will.
this one:

myMap = [ ->[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] ];

So it will return 8.

The second one, map.length, will check how long the big array is:

myMap = ->[ [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] ]<-;

Returns 6.

So now we know that we´re dealing with a 8×6 map.

Next up we have two loops:
The first one is the height-loop and the second one is the width-loop.

for (var i = 0; i < mapHeight; ++i) {
	for (var j = 0; j < mapWidth; ++j) {
		this.attachMovie("tile", "t_"+i+"_"+j, ++d);
		this["t_"+i+"_"+j]._x = (j*tileW);
		this["t_"+i+"_"+j]._y = (i*tileH);
		this["t_"+i+"_"+j].gotoAndStop(map[i][j]+1);
	}
}

So what happens is, the first time the height-loop(i) is equal to 0, then comes the width-loop(j), it will loop from 0 to one less than mapWidth(8), 7 that is(arrays first element is 0).
For each loop through the width-loop, we will attach our tile-movieclip:

this.attachMovie("tile", "t_"+i+"_"+j, ++d);

We give it uniqe name and a uniqe depth.

Then we´ll position this tile based on were we are in the height- and width loops, we also use our constants tileW and tileH to calulate this:

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

Then we make sure that the tile is drawn correctly, remember 1 should be black and 0 should be white. By checking ‘map[i][j]’, we know where we are in the map-array. Lets say i is equal to 2 and j is equal to 5. Then we are here:

myMap = [ [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] ];

Remember when navigating in an array 0 is always the first element, 1 is the second and so on.
So:

this["t_"+i+"_"+j].gotoAndStop(map[i][j]+1);

Makes the tile go to the first frame(white) if it´s a 0 in the map-array and the second frame if it´s a 1.

That´s it! Now you have built a map! Now go experiment with this for a while, change the map, make some other tiles adn so on… Hopefully you understand the advantage of using this technique, when it comes to mapbuilding. If not, you will when we move on to, adding a character and the easy implementing of collision detection.