diff --git a/asdf/SpriteSheetXML.js b/asdf/SpriteSheetXML.js new file mode 100644 index 0000000..76674d3 --- /dev/null +++ b/asdf/SpriteSheetXML.js @@ -0,0 +1,45 @@ +// XML format must be: +// +// +// ... +// + +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; \ No newline at end of file diff --git a/asdf/TileMap.js b/asdf/TileMap.js new file mode 100644 index 0000000..b6d77fe --- /dev/null +++ b/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; \ No newline at end of file diff --git a/asdf/TileMapXML.js b/asdf/TileMapXML.js index e570cd2..e34547d 100644 --- a/asdf/TileMapXML.js +++ b/asdf/TileMapXML.js @@ -1,44 +1,24 @@ -// XML format must be: -// -// -// ... -// +import Container from "./Container.js"; +import TileSpriteXML from "./TileSpriteXML.js"; -class TileMapXML { - constructor(url) { - this.array = []; - this.fetchXMLtoArray(url); - } +class TileMapXML extends Container { + constructor (tiles, mapW, mapH, texture, xml) { + super(texture); + 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) { - 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; - } - } + // Add all tile sprites + this.children = tiles.map((frame, i) => { + const s = new TileSpriteXML(texture, xml, frame); + s.frame = frame; + s.pos.x = i % mapW * this.tileW; + s.pos.y = Math.floor(i / mapW) * this.tileH; + return s; + }); } } diff --git a/asdf/index.js b/asdf/index.js index 70d366f..c589f3d 100644 --- a/asdf/index.js +++ b/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