6 - Advanced image handling (2)

So, we've managed to draw an image onto our canvas, what else can we do with it?

Well, there are a few additional options available to us.
Next up we have...

drawTile

This is a method of drawing an image, but defining parts of that image, and choosing a part, or parts of the image to be drawn.

Before drawing a tile, or tileset, you need to define the tileset beforehand, by placing the 
command initTile in the "init" function.

The command would be:

myimage.initTile(width,height,offset);

This would mean that your image would be broken up into tiles, each X and Y pixels in size, and there is an option to assign a offset value to the first tile.
This final value does not have to be set, and will default as 0. It is mainly used if the tiles are being drawn as part of a character set - then the values can be assigned to an ASCii code, and the offset being defined as the number of tiles before the first character (A).

Some examples would be:

myimage.initTile(128,128);
myimage.initTile(32,32,32);

The two examples can be detailed as:

1) The image will be broken into tiles, each 128 pixels wide and 128 pixels high.
2) The image will be "tiled", each one 32 pixels square. An offset value of 32 is assigned,
for the use of a character set.

Now the tileset has been defined, we can start to draw the tile (or tiles) onto the canvas. myimage.drawTile(canvas,tilenum,xpos,ypos,alpha,rot,zoomx,zoomy); These variables are made up as follows: canvas - the destination canvas the tile will be drawn onto. tilenum - the number assigned to the tile you wish to draw. xpos - the X position the tile will be drawn onto the canvas. ypos - the Y position the tile will be drawn onto the canvas. alpha - the normalised value of the alpha applied to the image (default=1). rot - the rotation value (in degrees) applied to the image (default=0). zoomx - the width scale of the image to be drawn (default=1).
zoomy - the height scale of the image to be drawn (default=1). A real example would be: myimage.drawTile(mycanvas,1,50,50);
Here is an live example of this in action, where the entire image is drawn, and then one of the tiles on its own.