Foundation Game Design with ActionScript 3.0, Second Edition (93 page)

If you test it, you'll see this output:

Because you included a
break
directive, the loop stops at that point. It never checks element [2], which is a good thing. The loop has found what it's looking for so it doesn't need to check any further. Using for loops to search arrays is a basic programming technique that you'll be using frequently from now on.

You can store anything you like inside arrays, including other arrays. You know that a single, empty array looks like this:

It's just a pair of square brackets. Let's say you want to put three new arrays inside that first empty array. You can do it like this:

The first array now contains three new empty arrays. But it's confusing to look at it like this, so here's an easier way to visualize this:

It's now very clear to see that the surrounding array contains three new arrays inside it. This is called a
two-dimensional
array, or 2D array. They're arrays inside of arrays.

Let's imagine that your hobby as a bug collector has now expanded to include not only flying insects but also birds and slow crawling things. You'll need a bigger collection jar! You don't want your slugs and worms to get mixed up with your birds because they might get eaten. So you need a new jar that has internal compartments that separate the different types of creatures you're collecting. You could put the flying insects in one section, the birds in another, and the slow crawling things in the third. A 2D array is perfect for this, and here's what it would look like:

You now have one array that contains three internal arrays—one for each type of creature. (Note that there's no comma after the last array. Also note that there's a semicolon after the last square bracket.)

Each of the internal arrays is no more than simple elements of the containing array. This means if you want to access the array that contains the slow crawling things, you can do it like this:

This would give you
snail
,
slug
, and
worm
.

If you wanted to find out what the second element of that array was, you could do it like this:

This would give you
slug
.

Here's another example. If you want to find the third element of the second array, you could find it like this:

This would give you
magpie
.

In the chapter's source file you'll find a project folder called ArraysInsideArrays with a working example of this new collection jar. Here's the application class:

Here's the trace output from this code:

Figure 9-12
illustrates how this two-dimensional array works.

Figure 9-12.
Understanding two-dimensional arrays

2D arrays are a very efficient way of organizing complex information, and you can see that it's very easy to find what you're looking for if you understand the system. In the next section you'll see how to use a 2D array to store the x and y positions of boxes so that you can easily add them to their correct positions on the stage.

You'll need a bit of practice with arrays before you start to feel comfortable using them in your own code. Spend a bit of time with these example files, make some changes, and observe the way your changes affect the output. These examples are the key to understanding the rest of the chapter, so make sure you understand them before continuing further.

I've decided that I want my platform game to contain 13 boxes, positioned on the stage as shown in
Figure 9-13
.

Figure 9-13.
Adding lots of boxes to the stage

The first thing I did was plan this in Illustrator, which is a good way of sketching out level ideas. I made the grid visible (View  Show Grid) and choose the Snap to Grid option, which makes it easier to position objects precisely on the grid (View  Snap to Grid). (My boxes are 50 pixels wide and high, so I made sure that the gridlines were set to display every 50 pixels in Preferences  Guides & Grid).
Figure 9-14
shows my level plan in Illustrator. You don't have to use Illustrator, of course; a pencil and graph paper works just as well. (Yes, a pencil and paper. Try it!)

Figure 9-14.
Using Illustrator to plan the positions of the game boxes

I then noted the x and y positions of each of the boxes, like this:

I did this for all 13 boxes. I then had all the information I needed to use loops and arrays to create and add these boxes to the stage.

You'll find a project folder called MakingBoxes in the chapter's source files. The images folder contains a 50 by 50 PNG graphic of a box. The src folder contains the same
Box
class you used in Time Bomb Panic from
Chapter 7
. You need both these elements in the project folder for the code to work.
Figure 9-15
shows what the MakingBoxes project folder looks like.

Figure 9-15.
The project folder contains a PNG image of the box and a Box class which embeds the image.

Here's the entire
MakingBoxes
application class and the result is what you can see in
Figure 9-13
.

You need two arrays to make this code work.

The
_boxes
array is a storage container for all thirteen boxes. The
_boxPositions
array will be a 2D array that stores the x and y positions of each box.

_boxPositions
contains 13 arrays. Each array contains two elements: the first element is the box's x position and the second element is the box's y position.

These are the same numbers I scribbled down with my pencil when I was planning the level. There are 13 boxes, so there's one pair of x and y coordinates for each box.

The
for
loop does the work of creating a box object, pushing it into the
_boxes
array, adding it to the stage, and positioning it with the help of the
_boxPositions
2D array.