Using TileSets - Revision history

121.74.249.71 at 07:58, 23 July 2015

2015-07-23T07:58:45Z

Lerc at 04:20, 16 June 2014

2014-06-16T04:20:41Z

Lerc at 02:42, 16 June 2014

2014-06-16T02:42:18Z

Lerc at 02:12, 16 June 2014

2014-06-16T02:12:08Z

Lerc at 01:58, 16 June 2014

2014-06-16T01:58:48Z

Lerc: 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 ..."

2014-06-16T01:55:25Z

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 ..."

New page

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>

@@ Line 92: / Line 92: @@
+     }
+   }
+}

← Older revision		Revision as of 01:58, 16 June 2014
Line 50:		Line 50:

	</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>

@@ Line 86: / Line 86: @@
 function draw() {
-   for (ty = 0; ty < map.length; ty++) {
+   for (var ty = 0; ty < map.length; ty++) {
      var row=map[ty];
-     for (tx=0; tx < row.length; tx++) {
+     for (var tx=0; tx < row.length; tx++) {
        var tile= row[tx];
        drawImage(tileSet,tx*32,ty*32,tile);
@@ Line 167: / Line 167: @@
 function drawMap(map) {
-   for (ty = 0; ty < map.length; ty++) {
+   for (var ty = 0; ty < map.length; ty++) {
      var row=map[ty];
-     for (tx=0; tx < row.length; tx++) {
+     for (var tx=0; tx < row.length; tx++) {
        var tile= row[tx];
        drawImage(tileSet,tx*32,ty*32,tile);

← Older revision		Revision as of 04:20, 16 June 2014
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 59: / Line 59: @@
 <edcode>
 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],
@@ 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],
              [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
              [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,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] ];
-            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
-            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx],
-            [xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,xx,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() {
@@ Line 90: / Line 89: @@
      for (tx=0; tx < row.length; tx++) {
        var tile= row[tx];
-       drawImage(tileset,tx*32,ty*32,tile);
+       drawImage(tileSet,tx*32,ty*32,tile);
+     }
+   }
@@ Line 96: / Line 95: @@
 run(move,draw);
 </edcode>