One of the things that you have to do a lot when developing grid based games in Actionscript 3 is obviously lay out the grid. This is confusing to a lot of people but in flash, it is really quite simple. I created a simple class just for this blog to demonstrate how this can be achieved.
Here is the Actionscript 3 class, and then an explanation:
package com.frigidfish{
import flash.display.Sprite;
public class Grid extends Sprite{
public var rows:uint;
public var cols:uint;
public var cell:Array = new Array();
public var plot:Array = new Array();
public function Grid(displayObject:*,rows,cols, spacer){
this.rows = rows;
this.cols = cols;
populateCells(displayObject,spacer);
plotCells(cell);
}
private function populateCells(displayObject:*,spacer:int){
var iterator:uint = 0;
for(var c:uint = 0;c<cols;c++){
for(var r:uint = 0;r<rows;r++){
cell[iterator] = new displayObject;
cell[iterator].y = cell[iterator].height * r + (spacer*r);
cell[iterator].x = cell[iterator].width * c + (spacer*c);
addChild(cell[iterator]);
iterator++
}
}
}
private function plotCells(cell:Array){
var iterator:uint = 0;
for(var c:uint = 0;c<cols;c++){
plot[c] = new Array;
for(var r:uint = 0;r<rows;r++){
plot[c][r] = cell[iterator];
iterator++
}
}
}
}
}
Example usage:
import com.frigidfish.Grid;
var gameGrid:Grid = new Grid(Token,5,5,5);
addChild(gameGrid);
// There are 2 ways you can access the grid.
// by cell number (count 20 cells col by col):
gameGrid.cell[20].visible = false;
// or by plot info. if you count over 2 cols, and one
// row down, you'll see that this line makes the grid
// item invisible.
gameGrid.plot[2][1].visible = false;
Ok, so this is a very simple as3 class that can be built upon to do a lot of things. For example you could add a dynamic text field to your display object, and use the iterator in grid.as to add numbers to each cell.
You could use this as a starting point for a match type game or an array of other puzzle ideas. The point of this is just to help you understand how the grid is generated.
Let’s quickly go through the grid class:
The first thing we do is create 4 variables (lines 8-11).
rows and cols are passed to the constructor along with the class/display object that you want to instantiate and a spacer number. Note that in this class it is assumed that whatever you pass it as your display class must be displayable.
For this example, I just made a quick movieclip and called it Token, and selected ‘export for Actionscript’ in it’s properties.
Next is the constructor. As I said before, this requires 4 parameters:
your library item or class to display, rows (how many rows do you want) cols (how many columns do you want), space in pixels between display objects
the populateCells function does the meat of the work.
we create an iterator and start it at 0.
next we loop through each column.
for each column we add all of the rows:
1. create a new instance of the supplied display object and add it to the cell array
2. set the y position of the display object to it’s height x the number of the current row, + spacer
3. set the x position of the display object to it’s width x the number of the current column + spacer
4. Since this class extends Sprite, it is instantiated as a Sprite so we call just add the cell to it using the addChild() method
5. add 1 to the iterator and continue the loop.
notice that a key to making the spacer work properly is multiplying it by the row or the column. If you were to just ‘add’ spacer without multiplying by the row/col you would not achieve the desired result.
Next we execute the plotCells method. This creates an extra way to find the cell that you want. It sets up a 2 dimensional array and adds the cells to it so that you can access them by plotting coordinates.
first it creates an iterator and sets it to 0.
next we look through the length of the cols variable
now we create a new array and assign it to the plot array at the current column
for each number in cols, we iterate through all rows.
finally we assign each cell from our cell array to the proper plot coordinates.
add 1 to the iterator and process the next column.
So basically:
plot[0][0] = cell[0]
plot[0][1] = cell[1]
plot[0][1] = cell[2]
…
…
and so on. if you made a 5×5 grid, column 2, row 0 would be:
plot[2][0] = cell[10]
well, that’s it!
Hope you find this useful in your Flash Actionscript 3 projects.
Download this project as a working example here.