diff options
Diffstat (limited to 'client/tmxloader.js')
| -rw-r--r-- | client/tmxloader.js | 190 |
1 files changed, 152 insertions, 38 deletions
diff --git a/client/tmxloader.js b/client/tmxloader.js index 7753d20..2b3ff0c 100644 --- a/client/tmxloader.js +++ b/client/tmxloader.js @@ -2,68 +2,182 @@ var TMXLoader = function(mapName){ var self = {}; self.mapName = mapName; - self.width = 0; - self.height = 0; + self.tileset = { firstGID: 0, isTsx: false, + tsxSource: "", source: "", tileWidth: 0, tileHeight: 0, tileCount: 0, width: 0, height: 0, + img: null, + }; + + self.tile = { + id: 0, + index: 0, }; - self.tilesets = []; + + self.tiles = [self.tile]; self.layer = { id: 0, - name: 0, - tiles: "", + name: "", + tiles: [], + tilesStr: "" + }; + + self.layers = { + layer: [self.layer] }; - self.layers = []; + self.map = { + width: 0, + height: 0, + layers: [self.layer], + tilesets: [self.tileset], + + }; self.xml = new XMLHttpRequest(); + self.xml2 = new XMLHttpRequest(); self.parser = new DOMParser(); - self.xml.open('GET', "/client/assets/maps/" + mapName + ".tmx"); - self.xml.onload = function(){ - dom = self.parser.parseFromString(self.xml.response, "text/xml"); - - self.width = dom.documentElement.getAttribute('width'); - self.height = dom.documentElement.getAttribute('height'); - - // tilesets - for (var i=0; i < dom.documentElement.getElementsByTagName('tileset').length; i++){ - var tileset = {}; - tileset.firstGID = dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('firstgid'); - tileset.tileWidth = dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('tilewidth'); - tileset.tileHeight = dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('tileheight'); - tileset.tileCount = dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('tilecount'); - if(dom.documentElement.getElementsByTagName('tileset').item(i).hasAttribute('source')){ - tileset.source = dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('source'); - tileset.isTsx=true; + self.loadMap = function(){ + self.xml.open('GET', "/client/assets/maps/" + mapName + ".tmx"); + self.xml.onload = function(){ + dom = self.parser.parseFromString(self.xml.response, "text/xml"); + + self.map.width = dom.documentElement.getAttribute('width'); + self.map.height = dom.documentElement.getAttribute('height'); + + // tilesets + for (var i=0; i < dom.documentElement.getElementsByTagName('tileset').length; i++){ + var tileset = {}; + tileset.firstGID = parseInt(dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('firstgid')); + if(!dom.documentElement.getElementsByTagName('tileset').item(i).hasAttribute('source')){ + tileset.source = dom.documentElement.getElementsByTagName('tileset').item(i).getElementsByTagName('image')[0].getAttribute('source').replace("../", "/client/assets/"); + tileset.width = parseInt(dom.documentElement.getElementsByTagName('tileset').item(i).getElementsByTagName('image')[0].getAttribute('width')); + tileset.height = parseInt(dom.documentElement.getElementsByTagName('tileset').item(i).getElementsByTagName('image')[0].getAttribute('height')); + tileset.tileWidth = parseInt(dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('tilewidth')); + tileset.tileHeight = parseInt(dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('tileheight')); + tileset.tileCount = parseInt(dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('tilecount')); + tileset.img = self.addImg(tileset.source); + self.map.tilesets[i] = tileset; + }else{ + tileset.isTsx = true; + tileset.tsxSource = dom.documentElement.getElementsByTagName('tileset').item(i).getAttribute('source').replace("../", "/client/assets/"); + self.map.tilesets[i] = tileset; + self.loadTSX(); + } } - else{ - tileset.source = dom.documentElement.getElementsByTagName('tileset').item(i).getElementsByTagName('image')[0].getAttribute('source'); - tileset.width = dom.documentElement.getElementsByTagName('tileset').item(i).getElementsByTagName('image')[0].getAttribute('width'); - tileset.height = dom.documentElement.getElementsByTagName('tileset').item(i).getElementsByTagName('image')[0].getAttribute('height'); + + // layers + for (var i=0; i < dom.documentElement.getElementsByTagName('layer').length; i++){ + var layer = {}; + layer.name = dom.documentElement.getElementsByTagName('layer').item(i).getAttribute('name'); + layer.tilesStr = dom.documentElement.getElementsByTagName('layer').item(i).getElementsByTagName('data')[0].innerHTML; + layer.id = parseInt(dom.documentElement.getElementsByTagName('layer').item(i).getAttribute('id')); + layer.tiles= []; + self.map.layers[i] = layer; } - self.tilesets[i] = tileset; + self.parseLayer(); } + self.xml.send(); + } + + self.addImg = function(source){ + var TSet = {}; + TSet.new = new Image(); + TSet.new.src = source; + return TSet.new; + } + + self.loadTSX = function(){ + for(var i=0; i < self.map.tilesets.length; i++){ + + if(self.map.tilesets[i].isTsx && self.map.tilesets[i].tsxSource != null){ + self.xml2.open('GET', self.map.tilesets[i].tsxSource); + tileset = self.map.tilesets[i]; + self.xml2.onload = function(){ + dom2 = self.parser.parseFromString(self.xml2.response, "text/xml"); + tileset.source = "/client/assets/tilesets/" + dom2.documentElement.getElementsByTagName('image')[0].getAttribute('source') + tileset.width = parseInt(dom2.documentElement.getElementsByTagName('image')[0].getAttribute('width')); + tileset.height = parseInt(dom2.documentElement.getElementsByTagName('image')[0].getAttribute('height')); + tileset.tileWidth = parseInt(dom2.documentElement.getAttribute('tilewidth')); + tileset.tileHeight = parseInt(dom2.documentElement.getAttribute('tileheight')); + tileset.tileCount = parseInt(dom2.documentElement.getAttribute('tilecount')); + tileset.img = self.addImg(tileset.source); + tileset.isTsx = false; // prevents from reloading + } + self.xml2.send(); + } + } + } + + self.getTileIdAt = function(x, y, layer){ + return self.map.layers[layer].tiles[y][x]; + } - // layers - for (var i=0; i < dom.documentElement.getElementsByTagName('layer').length; i++){ - var layer = {}; - layer.name = dom.documentElement.getElementsByTagName('layer').item(i).getAttribute('name'); - layer.tiles = dom.documentElement.getElementsByTagName('layer').item(i).getElementsByTagName('data')[0].innerHTML; - layer.id = dom.documentElement.getElementsByTagName('layer').item(i).getAttribute('id'); - self.layers[i] = layer; - console.log(layer.name); + self.parseLayer = function() { + for (var i=0; i < self.map.layers.length; i++){ + for(var mapX = 0; mapX < self.map.height; mapX++){ + self.map.layers[i].tiles[mapX] = []; + for(var mapY = 0; mapY < self.map.width; mapY++){ + tileId = parseInt(self.map.layers[i].tilesStr.replace('\n','').split(',')[mapY * self.map.width + mapX]); + self.map.layers[i].tiles[mapX][mapY] = {id : tileId, + index : mapX * self.map.width + mapY }; + } + } + self.map.layers[i].tilesStr = ""; } } + + self.getCollision = function(direction){ + // TODO + } + + self.drawLayer = function(layerName, xOffset, yOffset){ + for(var layerId=0; layerId < self.map.layers.length; layerId++) + { + var t = 0; + if (self.map.layers[layerId].name.toLowerCase().includes(layerName)){ + for (var mapY=0; mapY < self.map.height; mapY++){ + for (var mapX=0; mapX < self.map.width; mapX++){ + var gid = self.map.layers[layerId].tiles[mapX][mapY].id; + + for(var sets=0; sets< self.map.tilesets.length; sets++) + { + if (gid <= (self.map.tilesets[sets].firstGID + self.map.tilesets[sets].tileCount) && + gid >= self.map.tilesets[sets].firstGID) + t=sets; + } + + tsGid = gid - self.map.tilesets[t].firstGID; + + if(self.map.tilesets[t].img == null && tsGid == 0) + continue; + + tilesinrow = self.map.tilesets[t].width / self.map.tilesets[t].tileWidth; + + y= Math.floor(tsGid / tilesinrow); + x= tsGid % (tilesinrow); + + ctx.drawImage(self.map.tilesets[t].img, + x * self.map.tilesets[t].tileWidth, y * self.map.tilesets[t].tileHeight, + self.map.tilesets[t].tileWidth, self.map.tilesets[t].tileHeight, + mapX*self.map.tilesets[t].tileWidth+ xOffset,mapY*self.map.tilesets[t].tileWidth+ yOffset, + self.map.tilesets[t].tileWidth, self.map.tilesets[t].tileHeight) + } + } + } + } + } + + self.loadMap(); - self.xml.send(); return self; -}
\ No newline at end of file +} |