AS3 Pathfinding Part 1: Understanding 2D Arrays

This is going to be a 2 or possibly even 3 part series on path finding in AS3.0! It’s a topic almost everyone wants to understand, but there are far more who don’t than do. Hopefully this series will change that. This is what we’ll be creating via a 2D array (that’s being drawn from data in a 2D array, and it’s the foundation for pathfinding)!

Lets begin. Arrays are fairly simple, they are simply a list of things. For example, let’s create an array and add some things to it.

Code:

var myArray:Array = new Array();
myArray.push("Item 1", "Item 2", "Item 3");
trace(myArray); // Item 1, Item 2, Item 3
trace(myArray[0]); // Item 1   (Array[item number] lets you reference a specific item in an Array. 0 is the first item in the array.

That’s cool, you probably already knew that. Now, how do you make an array two dimensional? You make an Array of Arrays. If that didn’t confuse you, you’re weird (or just smarter than I am). Here’s how that works, instead of pushing “Item 1″, “Item 2″, and “Item 3″ into the array, you push Array1, Array2, Array3. Make sense? Good, but you still probably don’t know why you would ever want an array of arrays. I’m sure there are lots of uses for them, but what I’m going to talk about is 2D arrays give you the ability to create a tile based map. This tile based map is representing code, so that means each tile can have a value and based on that value it can decide if that tile is a wall, or a path, or anything else you might want it to be. For the sake of the tutorial (which will be leading into pathfinding in part 2, I’m just going to have walls and paths). Let’s say 1 = wall, and 0 = path. In the following example, myMap is the main array that all of the other arrays are added to. For this to work properly, you must first add a new array to myMap, and then add all of the other arrays (each level of the map) to that array. So it’s like this: myMap>newArray>All of the levels.

This will make the following more clear, row = x (horizontal) and column = y (vertical). You can access any single tile in the map array like this: myMap[0][X][0][Y]

Code:

var myMap:Array = new Array();
myMap.push(new Array());
var level1:Array = new Array([1,1,1,1,1]);
var level2:Array = new Array([1,0,0,0,1]);
var level3:Array = new Array([1,0,0,0,1]);
var level4:Array = new Array([1,0,0,0,1]);
var level5:Array = new Array([1,1,1,1,1]);
myMap[0].push(level1, level2, level3, level4, level5);

var wall:int = 1;
var path:int = 0;

var tileWidth:int = 20;
var tileHeight:int = 20;
var tileSpacing:int = 1;

for (var k in myMap[0]) //This will make the map loop through it's 5 levels or rows, so the following code will run 5 times, once for each row.
{
	for (var i in myMap[0][k][0]) //This will make the map loop through each column, remember this is already in the loop that goes to each row, so at this point every tile in the map will be looped through.
	{
		var square:Shape = new Shape();
		var squareMC:MovieClip = new MovieClip();
		if (myMap[0][k][0][i] == path)
		{
			square.graphics.beginFill(0x9CD55E);
			square.graphics.drawRect(0, 0, tileWidth, tileHeight);
			square.graphics.endFill();

		} else if (myMap[0][k][0][i] == wall)
		{
			square.graphics.beginFill(0x000000);
			square.graphics.drawRect(0, 0, tileWidth, tileHeight);
			square.graphics.endFill();
		}
		squareMC.addChild(square);
		squareMC.x = (i * (tileWidth + tileSpacing + tileSpacing)) + tileSpacing;
		squareMC.y = (k * (tileHeight + tileSpacing + tileSpacing)) + tileSpacing;
		addChild(squareMC);
	}
}

I know this seems confusing. I strongly encourage you to not just dismiss this as too complicated for you. Copy and paste that code into a new AS3.0 document and spend some time playing around with it until you understand it. That’s how you learn. It’s only 40 lines, you can do it.