Difference between revisions of "Using TileSets"
| Line 59: | Line 59: | ||
<edcode> | <edcode> | ||
| + | |||
var tileSet = loadImage("TileSet1.png",12,8); | var tileSet = loadImage("TileSet1.png",12,8); | ||
| − | var xx = 95; | + | var xx = 95; //tile 95 is blank so use xx just so we can tell the blank tiles in the |
| − | var map = [ [ | + | var map = [ [88,xx,xx,xx,xx,xx,xx,xx,xx,xx,87,xx,xx,xx,xx,xx,xx,xx,xx,88], |
[xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | ||
[xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | ||
| Line 70: | Line 71: | ||
[xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | ||
[xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | ||
| + | [87,xx,xx,xx,xx,xx,xx,xx,xx,xx,86,xx,xx,xx,xx,xx,xx,xx,xx,87], | ||
| + | [xx,xx,xx,xx,xx,xx,52,00,01,02,03,03,04,05,55,xx,xx,xx,xx,xx], | ||
| + | [xx,xx,xx,xx,xx,xx,xx,xx,25,26,14,27,28,xx,xx,xx,xx,xx,xx,xx], | ||
[xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | ||
[xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | ||
[xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | ||
[xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx], | ||
| − | [ | + | [88,xx,xx,xx,xx,xx,xx,xx,xx,xx,87,xx,xx,xx,xx,xx,xx,xx,xx,88] ]; |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
function move() { | function move() { | ||
| Line 90: | Line 89: | ||
for (tx=0; tx < row.length; tx++) { | for (tx=0; tx < row.length; tx++) { | ||
var tile= row[tx]; | var tile= row[tx]; | ||
| − | drawImage( | + | drawImage(tileSet,tx*32,ty*32,tile); |
} | } | ||
} | } | ||
| Line 96: | Line 95: | ||
run(move,draw); | run(move,draw); | ||
| + | |||
</edcode> | </edcode> | ||
Revision as of 02:12, 16 June 2014
A TileSet is a block of small images used to make up larger pictures. Many Games uses TileSets to display their graphics.
This is a TileSet designed for making Platform games. Each tile in the Image is 32 by 32 pixels in size. They are arranged in a block of 12x8 tiles.
To load a TileSet you can use the loadImage function to both load the Image and to say that it is comprised of 12 cells wide and 8 cells high.
you can then draw the individual tiles by calling drawImage and giving a number to say which tile image to use.
For example, the tileset has a flower at tile number 86;
To make a picture out of tiles you can assemble the tiles together in any form, in the example below we are drawing the tiles 52,0,1,2,2,2,4,5,55 in a row. Each tile is placed 32 pixels across from the last. The row of tiles is 32 pixels below the flower so it looks like the flower is growing out of the ground.
To harness the real poser of the TileSet, you can make a map of your world using the tile numbers.
Here we have the map stored as a list of rows, where each row is a list of tile numbers.
Now we can draw complex maps with just a few lines of drawing code.
