A TiledMap Reader and Renderer

tiledmap.js

/**
 * 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;
};