Editing Using TileSets

A TileSet is a block of small images used to make up larger pictures.   Many Games uses TileSets to display their graphics.


[[file:TileSet1.png]]
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;

<edcode>
var tileSet = loadImage("TileSet1.png",12,8);

function move() {
  //nothing yet
}

function draw() {
  drawImage(tileSet,320,240,86);
}

run(move,draw);
</edcode>

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.

<edcode>
var tileSet = loadImage("TileSet1.png",12,8);

function move() {
  //nothing yet
}

function draw() {
  drawImage(tileSet,320,240,86);
  drawImage(tileSet,320+32*-2,240+32,52);
  drawImage(tileSet,320+32*-1,240+32,0);
  drawImage(tileSet,320+32*0,240+32,1);
  drawImage(tileSet,320+32*1,240+32,2);
  drawImage(tileSet,320+32*2,240+32,2);
  drawImage(tileSet,320+32*3,240+32,2);
  drawImage(tileSet,320+32*4,240+32,4);
  drawImage(tileSet,320+32*5,240+32,5);
  drawImage(tileSet,320+32*6,240+32,55);
}

run(move,draw);

</edcode>

<edcode>
var tileSet = loadImage("TileSet1.png",12,8);

var xx = 95;

var map = [ [57,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,57],
            [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,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],
            [57,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,57] ];

function move() {
  //nothing yet
}

function draw() {
  for (ty = 0; ty < map.length; ty++) {
    var row=map[ty];
    for (tx=0; tx < row.length; tx++) {
      var tile= row[tx];
      drawImage(tileset,tx*32,ty*32,tile);
    }
  }
}

run(move,draw);
</edcode>