EXPLOSIONS, BLITTING, AND OPTIMIZATION in Font

Creator ANSI/AIM Code 128 in Font EXPLOSIONS, BLITTING, AND OPTIMIZATION

Figure 6-7. Obliterate the rock using the actual pixels from the cave bitmap. In this example, the bits of rock are all similar in color, and the photographs in this book are black and white, so the effect may seem a little muted. But imagine a space action game where you re blasting away at colorful baddies at light speed. They would explode in a cascade of color that exactly matches pixels they re made of. It s true, pixel-perfect destruction. I ll first explain how this works, and then show you the specifics of the code. If you re thinking, Yeah, that s nice, but I don t think I ll really need to use this in any of my games, I still encourage you to read through this section, even just as an intellectual exercise. It introduces some extremely important new concepts and techniques that form a cornerstone for many of the examples to come. In the previous section, we took a snapshot of a square area of the cave bitmap. Now we need to cut that snapshot into a lot of little squares. That means we need to take a lot of tiny, square snapshots of each section of the big snapshot. We can then use each tiny snapshot to represent a single particle. It works like this:

3. Loop through the grid, and take mini-snapshots of every cell. If the grid has 100 cells,

animate those movie clips using the same techniques as the previous example. Figure 6-8 illustrates what we want to accomplish.

Take a close look at the image of the grid in Figure 6-8. What does it remind you of Perhaps the tile work in your shower or the expensive tiled floor in the lobby of a bank That s why the term for a bitmap with a grid overlaid on it is a tile sheet. Each cell in a tile sheet is called a tile. So how do you overlay a grid onto a bitmap You actually already know how to make a grid. Think back to the enigmatic Block Game from 4. A nested for loop helped us plot the blocks on the stage in a grid pattern. Here s a simplified version:

for(var column:int = 0; column < numberOfColumns; column++) { for(var row:int = 0; row < numberOfRows; row++) { //Position of block block.x = column * gridCellSize; block.y = row * gridCellSize; } } It simply loops through each column, and then loops through each row of that column, to find the new grid position. The grid position is a combination of the current row and column, multiplied by the size of an individual grid cell. This bit of code is a video-game staple. You ll need to become comfortable looking at it because we re going to be using it a lot from here on out. Whenever you see it, you should think, Aha! It s a grid! We can use this same bit of code to help solve our current problem. Let s pretend that the size of each tile is 10 pixels. tileSize = 10; We then need to divide the width or height of the snapshot by the tileSize to give us the number of cells in each row or column gridSize = snapshot.width / tileSize; If the snapshot is 80 pixels wide, this will give us 8. That means there will be eight rows and eight columns in the grid. This is all we need for a square grid where the height and width are the same. You need to make sure that the tile size will divide evenly into the grid size. Now that we have that information, we can use it to loop through every cell, calculate its x and y coordinates, and take a mini-snapshot of that section of the bitmap. Because the dimensions of the grid exactly match the dimensions of the snapshot, the cells align perfectly to the corresponding positions on the snapshot. for(var column:int = 0; column < gridSize; column++) { for(var row:int = 0; row < gridSize; row++) { //1. Find the x and y coordinates of this tile. //2. Use those coordinates to take a mini-snapshot of the tile //3. Wrap the mini-snapshot in a MovieClip container so that it can be animated } } That s not so hard, is it