Added TileMap support (both with indexes and XML)

asdf/SpriteSheetXML.js

@@ -0,0 +1,45 @@
+// XML format must be:
+//      <TextureAlias imagePath="">
+//         <SubTexture x="" y="" width="" height=""></SubTexture>
+//         ...
+//      </TextureAlias>
+
+class SpriteSheetXML {
+    constructor(url) {
+        this.array = [];
+        this.fetchXMLtoArray(url);
+    }
+
+    fetchXMLtoArray(url) {
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', url, false);
+        xhr.send(null);
+
+        if (xhr.status === 200) {
+            var children = xhr.responseXML.children[0].children;
+            for (let index = 0; index < children.length; index++) {
+                const element = children[index];
+                this.array.push({
+                    name: element.attributes.name.nodeValue,
+                    x: element.attributes.x.nodeValue,
+                    y: element.attributes.y.nodeValue,
+                    width: element.attributes.width.nodeValue,
+                    height: element.attributes.height.nodeValue
+                });
+            }
+        } else {
+            console.error('XML file cannot be loaded!')
+        }
+    }
+
+    findIndex(attribute, value) {
+        for (let index = 0; index < this.array.length; index++) {
+            const element = this.array[index];
+            if (element[attribute] == value) {
+                return index;
+            }
+        }
+    }
+}
+
+export default SpriteSheetXML;

asdf/TileMap.js

@@ -0,0 +1,25 @@
+import Container from "./Container.js";
+import TileSprite from "./TileSprite.js";
+
+class TileMap extends Container {
+  constructor(tiles, mapW, mapH, tileW, tileH, texture) {
+    super();
+    this.mapW = mapW;
+    this.mapH = mapH;
+    this.tileW = tileW;
+    this.tileH = tileH;
+    this.w = mapW * tileW;
+    this.h = mapH * tileH;
+
+    // Add all tile sprites
+    this.children = tiles.map((frame, i) => {
+      const s = new TileSprite(texture, tileW, tileH);
+      s.frame = frame;
+      s.pos.x = i % mapW * tileW;
+      s.pos.y = Math.floor(i / mapW) * tileH;
+      return s;
+    });
+  }
+}
+
+export default TileMap;

asdf/TileMapXML.js

@@ -1,45 +1,25 @@
-// XML format must be:
+import Container from "./Container.js";
-//      <TextureAlias imagePath="">
+import TileSpriteXML from "./TileSpriteXML.js";
-//         <SubTexture x="" y="" width="" height=""></SubTexture>
-//         ...
-//      </TextureAlias>
 
-class TileMapXML {
+class TileMapXML extends Container {
-    constructor(url) {
+    constructor (tiles, mapW, mapH, texture, xml) {
-        this.array = [];
+        super(texture);
-        this.fetchXMLtoArray(url);
+        this.mapW = mapW;
-    }
+        this.mapH = mapH;
+        this.tileW = xml.array[tiles[0]].width;
+        this.tileH = xml.array[tiles[0]].height;
+        this.w = mapW * this.tileW;
+        this.h = mapH * this.tileH;
 
-    fetchXMLtoArray(url) {
+        // Add all tile sprites
-        var xhr = new XMLHttpRequest();
+        this.children = tiles.map((frame, i) => {
-        xhr.open('GET', url, false);
+            const s = new TileSpriteXML(texture, xml, frame);
-        xhr.send(null);
+            s.frame = frame;
-
+            s.pos.x = i % mapW * this.tileW;
-        if (xhr.status === 200) {
+            s.pos.y = Math.floor(i / mapW) * this.tileH;
-            var children = xhr.responseXML.children[0].children;
+            return s;
-            for (let index = 0; index < children.length; index++) {
-                const element = children[index];
-                this.array.push({
-                    name: element.attributes.name.nodeValue,
-                    x: element.attributes.x.nodeValue,
-                    y: element.attributes.y.nodeValue,
-                    width: element.attributes.width.nodeValue,
-                    height: element.attributes.height.nodeValue
         });
     }
-        } else {
-            console.error('XML file cannot be loaded!')
-        }
-    }
-
-    findIndex(attribute, value) {
-        for (let index = 0; index < this.array.length; index++) {
-            const element = this.array[index];
-            if (element[attribute] == value) {
-                return index;
-            }
-        }
-    }
 }
 
 export default TileMapXML;

asdf/index.js

@@ -8,12 +8,14 @@ import KeyControls from "./controls/KeyControls.js";
 import MouseControls from "./controls/MouseControls.js";
 
 import Sprite from "./Sprite.js";
+import TileMap from "./TileMap.js";
+import TileMapXML from "./TileMapXML.js";
 import TileSprite from "./TileSprite.js";
 import TileSpriteXML from "./TileSpriteXML.js";
 import Text from "./Text.js";
 import Texture from "./Texture.js";
 
-import TileMapXML from "./TileMapXML.js";
+import SpriteSheetXML from "./SpriteSheetXML.js";
 
 export default {
   CanvasRenderer,
@@ -23,8 +25,10 @@ export default {
   KeyControls,
   MouseControls,
   Sprite,
-  TileSprite,
+  TileMap,
   TileMapXML,
+  TileSprite,
+  SpriteSheetXML,
   TileSpriteXML,
   Text,
   Texture