Skip to content

Instantly share code, notes, and snippets.

@tdgroot
Created November 25, 2013 12:35
Show Gist options
  • Save tdgroot/7640632 to your computer and use it in GitHub Desktop.
Save tdgroot/7640632 to your computer and use it in GitHub Desktop.
A TiledMap Reader and Renderer
/**
* Created by Timon on 20-11-13.
*/
var TiledMap = function (path) {
var request = new XMLHttpRequest();
request.open("GET", path, false);
request.send(null);
var map = JSON.parse(request.responseText);
this.load(map);
};
TiledMap.prototype.load = function (map) {
this.width = map.width;
this.height = map.height;
this.tileWidth = map.tilewidth;
this.tileHeight = map.tileheight;
this.orientation = map.orientation;
this.tileLayers = [];
this.objectGroups = [];
this.tileSets = [];
for (var i = 0; i < map.layers.length; i++) {
if (map.layers[i].type == "tilelayer") {
this.tileLayers.push(map.layers[i]);
} else if (map.layers[i].type == "objectgroup") {
this.objectGroups.push(map.layers[i]);
}
}
for (var i = 0; i < map.tilesets.length; i++) {
var tileSet = map.tilesets[i];
tileSet.width = tileSet.imagewidth / tileSet.tilewidth;
tileSet.height = tileSet.imageheight / tileSet.tileheight;
var path = tileSet.image;
tileSet.image = new Image();
tileSet.image.src = path;
this.tileSets.push(map.tilesets[i]);
}
console.log("Amount of tilelayers: " + this.tileLayers.length);
console.log("Amount of objectgroups: " + this.objectGroups.length);
console.log("Amount of tilesets: " + this.tileSets.length);
};
TiledMap.prototype.render = function (x, y, sx, sy, width, height) {
for (var i = 0; i < this.tileLayers.length; i++) {
var tileLayer = this.tileLayers[i];
this.renderTileLayer(tileLayer);
}
};
TiledMap.prototype.renderTileLayer = function (tileLayer) {
for (var y = 0; y < tileLayer.height; y++) {
for (var x = 0; x < tileLayer.width; x++) {
var tileID = tileLayer.data[x + y * tileLayer.width];
if (tileID == 0) continue;
var tileSet = this.getTileSetByID(tileID);
this.renderSubImage(x, y, tileSet, tileID);
}
}
};
TiledMap.prototype.renderSubImage = function (x, y, tileSet, tileID) {
var sx = 0, sy = 0, sw = 0, sh = 0, gw = tileSet.tilewidth, gh = tileSet.tileheight;
var aID = tileID - tileSet.firstgid;
sx = this.getTileSetX(tileSet, aID);
sy = this.getTileSetY(tileSet, aID);
sw = tileSet.tilewidth;
sh = tileSet.tileheight;
graphics.drawImage(tileSet.image, sx, sy, sw, sh, x * tileSet.tilewidth, y * tileSet.tileheight, gw, gh);
};
TiledMap.prototype.getTileSetByID = function (tileID) {
for (var i = 0; i < this.tileSets.length; i++) {
var tileSet = this.tileSets[i];
var imageCount = (tileSet.imagewidth / tileSet.tilewidth) * (tileSet.imageheight / tileSet.tileheight);
if (tileID < imageCount + tileSet.firstgid) return tileSet;
}
};
TiledMap.prototype.getTileSetX = function (tileSet, tileID) {
return (tileID % tileSet.width) * tileSet.tilewidth;
};
TiledMap.prototype.getTileSetY = function (tileSet, tileID) {
return Math.floor(tileID / tileSet.height) * tileSet.tileheight;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment