Tuesday, August 31, 2010

Creating a simple tile system in AS3: Part 1

Today we will learn the basics of creating a simple tile system.

What is a tile system and why should anyone consider using it? A tile system is a map of textured blocks of the same size, used when developing games.

For example, you want to have a simple map, like a grass field surrounded by stone walls. For this, you will only need 2 small textured tiles - grass and stone. Instead of drawing the whole map (which will probably result in a big sized image file) you only need 2 different images, and you will only have to clone them with code to make it look like a map.

This method was used in very many classic games, but are often used in Flash games too.

So the first thing we will need to do, is to draw our tiles. I made 2 tiles (grass and stone) in photoshop with 32x32 px dimensions. It is important that each tile has the same width and height. You have to make sure that there won't be any sharp edges when you combine tiles with eachother and they look like one picture together. There are some photoshop tutorials on that.

If you're not into drawing, just get some free textures from the internet and size them down to 32x32 pixels.

Now when we have our graphics ready, open up flash and create a new MovieClip. Give it a class name of tile, and take it away from the stage.



In the MovieClip, create 2 frames. In the first one put your grass tile, in the second - your stone tile. Make sure their x and y equal 0! So that the center of the movieclip is their upper left corner.

Coding time! First of all we'll create some variables containing information about tile size and our map size (how many tiles in a row and in a collumn):

var mapWidth = 10;
var mapHeight = 10;
var tileSide = 32;
var totalTiles = mapWidth * mapHeight;

Now when we have that, we create a new Array, which contains data for our map. It will be an Array of Arrays. Each row is a separate Array. Here's my map:

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

Now we only need to draw our map. How? Using a loop, of course.

for (var i:int=0; i<mapHeight; i++)
{
 for (var u:int=0; u<mapWidth; u++){
  var cell:MovieClip = new tile();
  cell.gotoAndStop(myMap[i][u]+1);
  cell.x=tileSide*u
  cell.y=tileSide*i
  addChild(cell);
 }
}

Now I will explain the code above.

We have two loops. One for the rows, and one for the collumns. We have our map Array set up, so each row is an Array. So the first tile would be myMap[0][0], second would be myMap[0][1], and so on. The first number represents rows, second - collumns.

The loops check every tile and create it as a tile class Object. We tell our MovieClip to take the frame of the tile we need. After that, we just set the coordinates according to the row and collumn. AddChild() adds the tile to stage.

So here's the result:


Next time we will handle walking. Oh, and here's the full code:

var mapWidth = 10;
var mapHeight = 10;
var tileSide = 32;
var totalTiles = mapWidth * mapHeight;
var myMap:Array = [
   [1,1,1,1,1,1,1,1,1,1],
   [1,0,0,0,0,0,0,0,0,1],
   [1,0,0,0,0,0,0,0,0,1],
   [1,0,0,0,0,0,0,0,0,1],
   [1,0,0,0,0,0,1,1,0,1],
   [1,0,0,0,0,0,1,0,0,1],
   [1,0,0,1,0,0,1,0,0,1],
   [1,0,0,1,1,1,1,0,0,1],
   [1,0,0,0,0,0,0,0,0,1],
   [1,1,1,1,1,1,1,1,1,1]
   ];

for (var i:int=0; i<mapHeight; i++)
{
 for (var u:int=0; u<mapWidth; u++){
  var cell:MovieClip = new tile();
  cell.gotoAndStop(myMap[i][u]+1);
  cell.x=tileSide*u
  cell.y=tileSide*i
  addChild(cell);
 }
}

Thanks for reading!

Related:

Creating a simple tile system in AS3: Part 2

5 comments:

gabriel said...

works! THanks! I seen other examples more complicated and less worky!

G.
versevessel.com

Anonymous said...

good

Anonymous said...

brilliant Blog, really useful tutes easily explained. Most other flash blogs seem to focus on the complications of flash you have made it simple to understand. thanks a lot.

Anonymous said...

Big thanks, very nice!

Hill said...

We’ve been stumbling around the internet and found your blog along the way.

We love your work! What a great corner of the internet :)


pave tiles website


Post a Comment