Game Development Reference
In-Depth Information
2. The output. Now on row 3, column 0.
Figure 6-12.
The anatomy of a tile sheet blit
So, what exactly is going on in Figure 6-12?
1.
We see is our
drawLevelBackground
function in the middle of processing. It has copied
two rows of data from the tile sheet to the
canvasBitmapData
based on the data in the
levelTileMap
2D array.
2.
The next tile to place is the first tile (tile 0) on the fourth row (row 3):
levelTilemap[3][0]
The row value is 3, and the column value is 0.
3.
The
blitTile
variable is set to the contents of
levelTilemap[3][0]
. This is tile is 27
on our tile sheet.
4.
Next, we need to find where to start copying from the tile sheet to get the 32
32-pixel
square for that tile:
tileBlitRectangle.x=int(27 % 8)*32
or
x= 3*32 = 96
tileBlitRectangle.y=int(27 / 8)*32
or
y=3*32 = 96
The location on our tile sheet to start copying is 96x, 96y. It's only a coincidence that
they are the same value.
The
blitPoint.x
and
blitPoint.y
values set where the 32
32 set of pixels from the tile sheet
will be placed on to the
canvasBitmapData
canvas; see Figure 6-13.
Finally, we copy the pixels from the tile sheet to background canvas:
backgroundBD.copyPixels(tilesheet.getsourcebitmap(),blitrectTile, blitpoint);
