HTML and CSS Reference
In-Depth Information
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
ourtilesheetdrawingoperation.Wewilldoitprogrammatically bycreatinganoffsetvariable
to be used during the draw operation:
var
var
mapIndexOffset
=
−
1
;
NOTE
Ratherthanusingthe
mapIndexOffset
variable,wecouldloopthroughthearrayofdataandsubtract
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
Wealsoaregoingtocreatetwovariablestogiveflexibilitytoourtilemapdisplaycode.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
var
mapRows
=
10
;
var
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, and 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
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
]
