Question

I used the Tiled map editor to make a XML file which has items listed as:

<data>
  <tile gid="1"/>
  <tile gid="2"/>
  <tile gid="2"/>
  <tile gid="1"/>
  <tile gid="1"/>
  <tile gid="3"/>
  <tile gid="3"/>
  <tile gid="1"/>
  <tile gid="2"/>
</data>

Say this was a 3×3 map. How can I parse this into an array as

[
  [1,2,2],
  [1,1,3],
  [3,1,2],
]

to load it easier? Thanks!

Answer 1

You can use JavaScript to convert it to an array with this simple script:

var xml = '<data><tile gid="1"/><tile gid="2"/> <tile gid="2"/><tile gid="1"/><tile gid="1"/><tile gid="3"/><tile gid="3"/><tile gid="1"/><tile gid="2"/></data>​​​​​​​​​​​​​​​​​​​​​​​​​​​​';

​var data = new DOMParser().parseFromString(xml, "text/xml").documentElement;

var tileNodes = data.querySelectorAll("tile");
var tiles = [];

for (var i = 0; i < tileNodes.length; i++) {
    var point = [];
    point.push(parseInt(tileNodes[i].getAttribute("gid"), 10));
    point.push(parseInt(tileNodes[++i].getAttribute("gid"), 10));
    point.push(parseInt(tileNodes[++i].getAttribute("gid"), 10));
    tiles.push(point);
}