HTML and CSS Reference
In-Depth Information
//return!
return pkt;
};
For the sake of argument, here is a version of rendering, called forward rendering, which could be considered
“brute force.” Effectively, you're going to walk to each layer and then walk through all the tiles in that layer and draw
the tile on its canvas:
function onDrawMap(ctx)
{
//we walk through all the layers
for (var layerIdx = 0; layerIdx < gMap.currMapData.layers.length; layerIdx++)
{
//is this a tile layer, or an object layer?
if (gMap.currMapData.layers[layerIdx].type != "tilelayer") continue;
var dat = gMap.currMapData.layers[layerIdx].data;
//find what the tileIndexOffset is for gMap layer
for (var tileIDX = 0; tileIDX < dat.length; tileIDX++)
{
var tID = dat[tileIDX];
//if the value is 0, then there's no tile defined for this slot, skip it!
if (tID == 0)
continue;
var tPKT = gMap.getTilePacket(tID);
var worldX = Math.floor(tileIDX % gMap.numXTiles) * gMap.tileSize.x;
var worldY = Math.floor(tileIDX / gMap.numXTiles) * gMap.tileSize.y;
// Nine arguments: the element, source (x,y) coordinates, source width and
// height (for cropping), destination (x,y) coordinates, and destination width
// and height (resize).
ctx.drawImage(tPKT.img, tPKT.px, tPKT.py, gMap.tileSize.x, gMap.tileSize.y, worldX,
worldY, gMap.tileSize.x, gMap.tileSize.y);
}
}
}
Coordinate Spaces and View-Rect
With the current code, you run into the issue of coordinate spaces. The canvas has coordinates, (0, width) and (0, height).
These are not equal to the coordinates of the map, (0, map width) (a.k.a. world-space coordinates). As such, you end
up drawing only the part of the map whose coordinates are identical to the canvas coordinates. This, of course, is less
than the desired output, as you want the ability to render whatever part of the map your player happens to occupy.
