Here we will look how the tile graphics are taken from tilesheet and added to main bitmap. The getImageFromSheet function looks like this:
function getImageFromSheet (t:Object, sprNum:Number):Bitmap { sheetColumns = t.sheet.width / t.ts; col = sprNum % sheetColumns; row = Math.floor (sprNum / sheetColumns); rect = new Rectangle (col * t.ts, row * t.ts, t.ts, t.ts); pt = new Point (0, 0); var bmp:Bitmap = new Bitmap(new BitmapData(ts, ts, true, 0)); bmp.bitmapData.copyPixels (t.sheet, rect, pt, null, null, true); return bmp; }
Function has 2 arguments: t represents the object and sprNum representing number of graphic to be used. First lets find how many columns of tiles tilesheet contains. For this we divide total width of tilesheet with the size of tiles. If tilesheet is 100 pixels wide and ts is 20 then we will see that it contains 5 columns of tiles.
Then we need to know from which position to copy needed tile graphics from. Variable col will get the column number. Modulo operator "%" finds remainder of sprNum divided by number of columns in tilesheet. Lets suppose sprNum is 5 and there is 3 columns in tilesheet. Remainder of 5/3 is 2 so the needed graphics are in column 2.
Row number is found by dividing sprNum with number of columns and taking full integer from result. Again, supposing sprNum is 5 and sheetColumns was 3, the row number is 1. Notice that both columns and rows start to count from 0 so graphics in first column and first row will have col=0 and row=0.
Once the row and column are found we create new rectangle object, the width and height of rectangle is equal to the size of tiles. Its position is the values from row and column variables multiplied by ts.
The point object defines where in tile object we wish to place the graphics. In this case we wish to place it in default position at 0,0.
Next we create new bitmap with the size of tile and to finish the job we copy graphics from tilesheet into bitmapdata object of bitmap. The function then returns this new bitmap which has image of tile.
Other function we used is called drawTile and its purpose is to draw the image of tile on the main bitmap:
function drawTile (t:Object, bmp:Bitmap) { var rect:Rectangle = new Rectangle(0, 0, t.ts, t.ts); var pt:Point = new Point(t.j * t.ts, t.i * t.ts); tilesBmp.bitmapData.copyPixels (bmp.bitmapData, rect, pt, null, null, true); }
Here the rectangle is full image of tile. The point object places the image on correct position and its the values of i and j multiplied by sixe of tiles. Last line copies the image into main bitmap.
How to reuse same tile image in several tiles? We have image of door and while we could draw same door on many different backgrounds, we rather reuse same door image and just add backgrounds when needed.
Lets make new object in prepareGame function:
tileDesc = new Object(); tileDesc.tile102 = {sprNum:1, sprNum2:2};
The tileDesc object contains extra descriptions of some tiles. If you only use simple tiles with one single image, you dont need to write extra description for it, but this allows us to extend the simple tiles.
Here the tile102 has been declared. Now when there is number 102 in the map array we can use information provided here. First, we have set the sprNum to 1 meaning that even when the number in the map is 102 and normally we would use image 102-100=2 we now use image 1 instead. The sprNum2 is second layer used to draw another image on top of first bitmap. In this example it is the image of door drawn on top of floor image. Since the door image is transparent, we can use same image of door on many different backgrounds. We dont need to draw separate door image in tilesheet for every possible background, we just use one. Thats clever isnt? You could even create more layers of bitmaps on top of each other.
We need to modify the buildmap function now to use information declared for the tile:
var declaredTile:Object = tileDesc["tile" + m]; if (declaredTile != null) { bmp = getImageFromSheet (curTile, declaredTile.sprNum); drawTile (curTile, bmp); curTile.sprNum = declaredTile.sprNum2; } bmp = getImageFromSheet (curTile, curTile.sprNum); drawTile (curTile, bmp);
So the declaredTile variable checks if current tile with number from the map array has been declared. If there is not such tile, it will have value of null and we dont need to do anything extra. If description exist we get the first image from tilesheet and draw it on screen. Then the second image is set to sprNum of current tile and this gets drawn on same spot in the main bitmap.
Next: The Hero.