WaxJelly

I used this basic idea in my “Snap-To-Grid” post, but here’s the simplest way to setup a full-stage grid in flash using only code.

var cellSize:Number = 70;
var cols:Number = Math.ceil(Stage.width / cellSize);
var rows:Number = Math.ceil(Stage.height / cellSize);

function drawSquare (who:String, to_x:Number, to_y:Number) {

this.createEmptyMovieClip(who, this.getNextHighestDepth());
with (this[who]) {

lineStyle(1, 0×999999, 100);
moveTo(0, 0);
lineTo(cellSize, 0);
lineTo(cellSize, cellSize);
lineTo(0, cellSize);
lineTo(0, 0);
_x = to_x;
_y = to_y;

}

}

for (var c=0; c<cols; c++) {

for (var r=0; r<rows; r++) {

drawSquare(”c_”+c+”_r_”+r, c*cellSize, r*cellSize);

}

}

Now, as always, here’s the breakdown.

• First, we setup the basic variables necessary for the calculations we’re doing. For this, we’ll simply setup a basic “cellSize” which is the size of each cell in our grid. We will also determine how many rows and columns we need by dividing the stage by the cellSize.

var cellSize:Number = 70;
var cols:Number = Math.ceil(Stage.width / cellSize);
var rows:Number = Math.ceil(Stage.height / cellSize);

• NOTE: we’re using Math.ceil() here because we don’t need to make 39.84 columns, we need 40 of them! We also don’t want to use Math.floor() because we always want at least 1 more than the needed number of cells so that the whole screen is covered. Change “ceil” to “floor” and run this script to see what I mean.

• Next, we write a function that simply draws a square. This uses the basic principles of the Drawing API with a few “good practices” kinda short cuts. There’s a lot there, so let’s break it down line-by-line:

• The function itself requires 3 variables: “who” is a string that we’ll use to create a dynamic movie clip for each cell in the grid, and “to_x” and “to_y” are placement numbers that we’ll pass to tell the function where to place each cell.

function drawSquare (who:String, to_x:Number, to_y:Number) {

• Next, we create a new movie clip with the variable name we’ve been given, and for the purposes of this tutorial, we’ll throw it onto the stage where this code resides (thus the “this”)

this.createEmptyMovieClip(who, this.getNextHighestDepth());

• We use a “with” statement to keep from having to repeat unnecessary references to variables. Now that we have a movie clip created, we’ll use “this[who]” to reference it

with (this[who]) {

• Next, we actually draw the box using gray lines (0×999999), and the cellSize we established earlier to draw the square

lineStyle(1, 0×999999, 100);
moveTo(0, 0);
lineTo(cellSize, 0);
lineTo(cellSize, cellSize);
lineTo(0, cellSize);
lineTo(0, 0);

• Finally, we relocate the box to it’s coordinates according to where it lies in the columns/rows grid (more on this in the final loop)

_x = to_x;
_y = to_y;

• The last thing we have left to do is to actually scroll through (this is called “looping”) the total number of columns (which we established in the first 3 lines), and the total number of rows in each column, calling our drawSquare function and passing the proper variables at each interval

for (var c=0; c<cols; c++) {
for (var r=0; r<rows; r++) {
drawSquare(”c_”+c+”_r_”+r, c*cellSize, r*cellSize);
}
}

• What we’re doing here is looping first through the total number of columns, then through the list of rows, and calling the drawSquare function each time.
• When we actually get to the calling of the function, we create 3 dynamic variables. They’re “who”, “to_x”, and “to_y”"Who”: to create the “who” variable, we’re using a “c_1_r_4″ format, and sending the current column (”c_”+c), then the current row (”_r_”+r)”to_x” and “to_y”: we simply multiply the current column (”c”) by the cellSize to generate it’s “x” value. We then multiply the current row (”r”) by the cellSize to generate it’s “y” value.
  

  NOTE: keep in mind, that during this loop, the first column is “0″, so we’re multiplying 0 x cellSize, which will always give us 0, placing the cell at the top left corner, and working it’s way out from there. This is one of those “duh” moments that some people have (including me) only after doing this a few times.

That’s it. Simple again. Enjoy!