HTTP request, Tiled map loading

src/file.js

@@ -0,0 +1,40 @@
+
+DWE.File = {}
+
+DWE.File.httpGET = function (url, xml) {
+  return new Promise(function (resolve, reject) {
+    var xmlHttp = new XMLHttpRequest()
+
+    xmlHttp.onreadystatechange = function() {
+      if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
+        resolve(xml === true ? xmlHttp.response : xmlHttp.responseText)
+      } else if (xmlHttp.readyState == 4 && xmlHttp.status >= 400) {
+        reject(xmlHttp.responseText)
+      }
+    }
+
+    xmlHttp.open('GET', url, true)
+    xmlHttp.responseType = xml ? 'xml' : 'text'
+    xmlHttp.send(null)
+  })
+}
+
+DWE.File.loadXML = function (url) {
+  return DWE.File.httpGET(url, true)
+}
+
+DWE.File.loadJson = function (url) {
+  return new Promise(function (resolve, reject) {
+    var promise = DWE.File.httpGET(url)
+    promise.then(function (data) {
+      var json
+      try {
+        json = JSON.parse(data)
+      } catch (e) {
+        return reject(e)
+      }
+
+      resolve(json)
+    }, reject)
+  })
+}

src/image.js

@@ -32,6 +32,33 @@ DWE.Image.Image = function (src) {
   }
 }
 
+DWE.Image.TileMap = class TileMap extends DWE.Image.Image {
+  constructor (src, aspectWidth, aspectHeight) {
+    super(src)
+    this.aspectWidth = aspectWidth
+    this.aspectHeight = aspectHeight
+    this.tiles = []
+  }
+
+  onload () {
+    for (let y = 0; y < this.height / this.aspectHeight; y++) {
+      for (let x = 0; x < this.width / this.aspectWidth; x++) {
+        this.tiles.push(new DWE.Math.Vector2(x, y))
+      }
+    }
+
+    if (this['onready']) {
+      this.onready.call(this, this)
+    }
+  }
+
+  draw (ctx, index, x, y, w, h) {
+    let box = this.tiles[index]
+    if (!box) return
+    ctx.drawImage(this.img, box.x * this.aspectWidth, box.y * this.aspectHeight, this.aspectWidth, this.aspectHeight, x, y, w, h)
+  }
+}
+
 // Load an array of image URLs
 // Returns a Promise
 DWE.Image.loadImageArray = function (uris) {

src/index.js

@@ -14,3 +14,9 @@ require('./keyboard.js')
 
 // Image helpers
 require('./image.js')
+
+// File helpers
+require('./file.js')
+
+// File helpers
+require('./tiled.js')

src/tiled.js

@@ -0,0 +1,146 @@
+
+DWE.Tiled = {}
+
+DWE.Tiled.Map = class {
+  constructor (file) {
+    this.file = file
+    let fname = file.split('/')
+    this.name = fname[fname.length - 1]
+    this.dir = fname.slice(0, -1).join('/')
+    this.loaded = false
+
+    this.tileMaps = []
+    this.layers = {}
+    this.tileWidth = 0
+    this.tileHeight = 0
+    this.scale = 1
+
+    this.loadTiledMap()
+  }
+
+  done () {
+    if (this['onready']) {
+      this.onready.apply(this, [this])
+    }
+    this.loaded = true
+  }
+
+  error (e) {
+    if (this['onerror'])
+      this.onerror.apply(this, [e])
+    else
+      console.error(e)
+
+    this.loaded = false
+  }
+
+  loadTiledMap () {
+    DWE.File.loadJson(this.file).then((mapData) => {
+      // Currently, only allow orthogonal and right-down options.
+      if (mapData.orientation !== 'orthogonal' || mapData.renderorder !== 'right-down')
+        return this.error(new Error('Currently, DWE Libs only allows orthogonal orientation and right-down render order.'))
+
+      var map = this
+
+      // Load map layers
+      function loadMapLayers () {
+        let width = mapData.width
+        let height = mapData.height
+        for (let i in mapData.layers) {
+          let layer = mapData.layers[i]
+          let tiles = []
+          if (layer.type != 'tilelayer' || !layer.visible) continue
+
+          for(let i = 0; i < width; i++) {
+            for(let j = 0; j < height; j++) {
+              let value = layer.data[(j * width) + i]
+              if (value == 0) continue
+
+              tiles.push({
+                x: i,
+                y: j,
+                tile: value
+              })
+            }
+          }
+
+          map.layers[layer.name] = {
+            tiles, x: parseInt(layer.x), y: parseInt(layer.y)
+          }
+        }
+
+        map.width = width
+        map.height = height
+
+        map.tileWidth = mapData.tilewidth
+        map.tileHeight = mapData.tileheight
+
+        map.done()
+      }
+
+      // Load tile maps
+      function loadNextTileMap(index) {
+        if (index === mapData.tilesets.length) return loadMapLayers()
+        var xtile = mapData.tilesets[index]
+        var path = map.dir + '/' + xtile.source
+
+        DWE.File.loadXML(path).then(function (data) {
+          var parser = new DOMParser()
+          var doc = parser.parseFromString(data, 'application/xml')
+          var tilesets = doc.getElementsByTagName('tileset')
+          var dataf = {}
+          for (let i in tilesets) {
+            let d = tilesets[i]
+            if (!(d instanceof Element)) continue
+            let tw = parseInt(d.getAttribute('tilewidth'))
+            let th = parseInt(d.getAttribute('tileheight'))
+            let imgfile = d.getElementsByTagName('image')[0]
+            if (imgfile) {
+              let img = new DWE.Image.TileMap(map.dir + '/' + imgfile.getAttribute('source'), tw, th)
+              img.onready = function () {
+                loadNextTileMap(index + 1)
+              }
+              img.offset = xtile.firstgid
+              img.tileCount = parseInt(d.getAttribute('tilecount'))
+              map.tileMaps.push(img)
+            }
+          }
+        }, function (e) {
+          map.error.apply(map, [e])
+        })
+      }
+
+      loadNextTileMap(0)
+    }, function (e) {
+      map.error.apply(map, [e])
+    })
+  }
+
+  drawLayer (ctx, origin, viewport, name) {
+    if (!this.layers[name]) return null
+    let layer = this.layers[name]
+    for (let i in this.tileMaps) {
+      let t = this.tileMaps[i]
+      for (let j in layer.tiles) {
+        let tile = layer.tiles[j]
+        let tcount = t.tileCount || t.tiles.length
+        if (tile.tile >= t.offset && tile.tile <= tcount) {
+          t.draw(ctx, tile.tile - 1, ((tile.x * this.tileWidth * this.scale) + origin.x + layer.x) + viewport.x, 
+            ((tile.y * this.tileHeight * this.scale) + origin.y + layer.y) + viewport.y, this.tileWidth * this.scale,
+            this.tileHeight * this.scale)
+        }
+      }
+    }
+  }
+
+  collideLayer (object, name) {
+    if (!this.layers[name]) return null
+    let layer = this.layers[name]
+    // TODO: Handle object collisions with map tiles
+    return null
+  }
+
+  setScale (scale) {
+    this.scale = scale
+  }
+}