Difference between revisions of "Using TileSets"

From CodeStuff
Jump to: navigation, search
(Created page with "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 ...")
 
 
(4 intermediate revisions by one other user not shown)
Line 3: Line 3:
  
 
[[file:TileSet1.png]]
 
[[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.
 
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.
  
Line 50: Line 51:
  
 
</edcode>
 
</edcode>
 +
 +
 +
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.
  
 
<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 = [ [57,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,57],
+
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 63: Line 72:
 
             [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
 
             [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
 
             [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,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() {
 +
  //nothing yet
 +
}
 +
 +
function draw() {
 +
  for (var ty = 0; ty < map.length; ty++) {
 +
    var row=map[ty];
 +
    for (var tx=0; tx < row.length; tx++) {
 +
      var tile= row[tx];
 +
      drawImage(tileSet,tx*32,ty*32,tile);
 +
    }
 +
  }
 +
}
 +
 +
run(move,draw);
 +
 +
</edcode>
 +
 +
To make the world even more interesting, we can add multiple layers
 +
 +
 +
<edcode>
 +
 +
var tileSet = loadImage("TileSet1.png",12,8);
 +
 +
var xx = 95; //tile 95 is blank so use xx just so we can tell the blank tiles in the
 +
 +
 +
var background
 +
        = [ [68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [68,64,65,66,67,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [68,76,77,78,79,80,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68,68],
 +
            [30,30,30,30,30,30,30,30,30,30,29,30,30,30,30,30,30,30,30,30],
 +
            [30,30,30,30,29,30,30,30,30,30,30,30,30,30,30,30,30,30,30,30] ];
 +
 +
var mainMap
 +
        = [ [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 72: Line 133:
 
             [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
 
             [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
 
             [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,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] ];
+
             [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],
 +
            [17,18,17,18,17,18,17,18,17,18,17,18,17,18,17,18,17,18,17,18],
 +
            [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] ];
 +
 
 +
var foreground
 +
        = [ [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,85,85,85,85,85,85,85,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,89,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,89,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,89,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,89,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,89,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
 +
            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx] ];
 +
 
  
 
function move() {
 
function move() {
Line 78: Line 165:
 
}
 
}
  
−
function draw() {
+
 
−
   for (ty = 0; ty < map.length; ty++) {
+
function drawMap(map) {
 +
   for (var ty = 0; ty < map.length; ty++) {
 
     var row=map[ty];
 
     var row=map[ty];
−
     for (tx=0; tx < row.length; tx++) {
+
     for (var tx=0; tx < row.length; tx++) {
 
       var tile= row[tx];
 
       var tile= row[tx];
−
       drawImage(tileset,tx*32,ty*32,tile);
+
       drawImage(tileSet,tx*32,ty*32,tile);
 
     }
 
     }
 
   }
 
   }
 +
}
 +
 +
function draw() {
 +
  drawMap(background);
 +
  drawMap(mainMap);
 +
  drawMap(foreground);
 
}
 
}
  
 
run(move,draw);
 
run(move,draw);
 +
 
</edcode>
 
</edcode>

Latest revision as of 07:58, 23 July 2015

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


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;


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.


To make the world even more interesting, we can add multiple layers


Retrieved from "https://fingswotidun.com/code/index.php?title=Using_TileSets&oldid=1310"