• Choose a category
• All
• Classic-Fiction

By Root 6537 0

of the screen. Once selected, you can click and “paint” the tile by selecting a location on the tile map on the top- left side of the screen. Figure 4-9 shows the tile map created for this example.

Save the tile map. Tiled uses a plain text file format called .tmx. Normally, tile data in Tiled is saved out in a base-64-binary file format; however, we can change this by editing the preferences for Tiled. On a Mac, under the Tiled menu, there should be a Preferences section. (If you are using the software on Windows or Linux, you will find this in the File menu.) When setting the preferences, select CSV in the “Store tile layer data as” drop-down menu. Once you have done this, you can save the file from the File menu.

Here is a look at what the saved .tmx file will look like in a text editor:

32,31,31,31,1,31,31,31,31,32,

1,1,1,1,1,1,1,1,1,1,

32,1,26,1,26,1,26,1,1,32,

32,26,1,1,26,1,1,26,1,32,

32,1,1,1,26,26,1,26,1,32,

32,1,1,26,1,1,1,26,1,32,

32,1,1,1,1,1,1,26,1,32,

1,1,26,1,26,1,26,1,1,1,

32,1,1,1,1,1,1,1,1,32,

32,31,31,31,1,31,31,31,31,32

Figure 4-9. The tile map example in Tiled

The data is an XML data set used to load and save tile maps. Because of the open nature of this format and the simple sets of row data for the tile map, we can use this data easily in JavaScript. For now, we are only concerned with the 10 rows of comma-delimited numbers inside the node of the XML—we can take those rows of data and create a very simple two-dimensional array to use in our code.

Displaying the Map on the Canvas

The first thing to note about the data from Tiled is that it is 1 relative, not 0 relative. This means that the tiles are numbered from 1–32 instead of 0–31. We can compensate for this by subtracting one from each value as we transcribe it to our array, or programmatically during our tile sheet drawing operation. We will do it programmatically by creating an offset variable to be used during the draw operation:

var mapIndexOffset = -1;

NOTE

Rather than using the mapIndexOffset variable, we could loop through the array of data and subtract 1 from each value. This would be done before the game begins, saving the extra processor overload from performing this math operation on each tile when it is displayed.

Map height and width

We also are going to create two variables to give flexibility to our tile map display code. These might seem simple and unnecessary now, but if you get in the habit of using variables for the height and width of the tile map, it will be much easier to change its size in the future.

We will keep track of the width and height based on the number of rows in the map and the number of columns in each row:

var mapRows = 10;

var mapCols = 10;

Storing the map data

The data that was output from Tiled was a series of rows of numbers starting in the top left and moving left to right, then down when the rightmost column in a row was completed. We can use this data almost exactly as output by placing it in a two-dimensional array:

var tileMap = [

[32,31,31,31,1,31,31,31,31,32]

, [1,1,1,1,1,1,1,1,1,1]

, [32,1,26,1,26,1,26,1,1,32]

, [32,26,1,1,26,1,1,26,1,32]

, [32,1,1,1,26,26,1,26,1,32]

, [32,1,1,26,1,1,1,26,1,32]

, [32,1,1,1,1,1,1,26,1,32]

, [1,1,26,1,26,1,26,1,1,1]

, [32,1,1,1,1,1,1,1,1,32]

, [32,31,31,31,1,31,31,31,31,32]

];

Displaying the map on the canvas

When we display the tile map, we simply loop through the rows in the tileMap array, and then loop through the columns in each row. The tileID number at [row][column] will be the tile to copy from the tile sheet to the canvas. row *32 will be the y location to place the tile on the canvas; col*32 will be the x location to place the tile: