Support JSON format maps

[parasyte]

It looks like Tiled supports exporting TMX to JSON since forever. We should really take advantage of this!

Also, it would be great to switch to JSON format "by default", because it won't require an XML parser. That means loading maps will be faster when using JSON. Also, CocoonJS doesn't support XML parsing. See: https://groups.google.com/d/msg/melonjs/VfXZ5LzTtzQ/B4LZ8_3Uc-cJ

The only problem I see with using JSON format maps by default is the file size. But maybe that's not really an important issue. The JSON output in Tiled is "readable" by adding a bunch of unnecessary whitespace. When I stripped the whitespace from my test map, the resulting file was actually SMALLER than the XML with Base64:

-rw-r--r-- 1 parasyte staff 7143 Nov 11 13:15 farm.json
-rw-r--r-- 1 parasyte staff 3386 Oct 14 14:54 farm.tmx
-rw-r--r-- 1 parasyte staff 2844 Nov 11 13:26 farm2.json
-rw-r--r-- 1 parasyte staff 3260 Nov 11 13:31 farm2.tmx

"farm.json" is the original output from Tiled. "farm2.json" is the same file with unnecessary whitespace stripped. And "farm2.tmx" is the same as "farm.tmx" but with unnecessary whitespace stripped. JSON is the clear winner!

We could always recommend a "build step" in the tutorial/FAQ/documentation that strips whitespace from the JSON files. There are other important savings that could be had with concatenating source files and minifying, as well.

[nvlbg]

This would definitely be a good feature for the framework. I would really like to help in the implementation of it, but all these TMX and Tiled classes are so messed up and undocumented that I can't understand anything. I guess new classes for parsing JSON maps need to be created. Can you guys give us more light into the tree of this classes, what each one is doing and what needs to be done/refactored?

[melonjs]

yep, that's definitely something i'm looking forward to as well for the next 0.9.6 version !

now in order to understand the current implementation :

• you should probably start by having a look here, as it will allow you to understand how a TMX file is architectured, and then explain some choice in implementation
• a second point to consider, is that the code has been somehow made to allow a future integration with another map format (you will notice that the TMXLayer inherit from the Layer Object). This might not be actually useful, and I would tend to agree if we would merge back those kind of classes to simplify the code (anyway at this point I don't really what other format could be added)
• private piece of code, yes are poorly documented, it's not an excuse as doc can be added while kept private, but I just did not pay any special attention in documenting properly these parts.

then, in terms of addiing support for JSON, my idea was more to work around the TMXParser : today it only support XML files, but adding the JSON format to it would allow make this completely abstract from the rest of the code, as they would only request for a specific attributes and corresponding value, wihtout having to care about the format itself. I beleive that this is a way better approach, instead of rewriting the whole thing.

[melonjs]

@ALL @parasyte @nvlbg

Awesome news : http://blog.ludei.com/
Native support for XML loading is there :)

[nvlbg]

That's great, but I still think it is really good for adding support for JSON format. I'll try adding it some in the future when I find time. For me it feels wrong to use XML in javascript when you can do it with JSON 😆

[melonjs]

@nvlbg personnaly I like to use XML, as during the level design phase it allows to easily test any changes just by doing a CTRL+S in Tiled and F5 in the browser. JSON could however be used when deploying the game for the here above listed benefits.

[parasyte]

@obiot et al. It deserves mention here, but exporting JSON is just as easy in Tiled; CTRL+E. ;)

[melonjs]

A few limitations I'm noticing :

• the backgroundcolor property is not currently exported by Tiled 0.9 (should be there in 0.9.1)
• both TMX and TSX file must use the same format (e.g. a XML map cannot use a JSON TSX file)

[melonjs]

@parasyte

amazing, I'm running right now the platformer example on my iphone using cocoonjs ! which means JSON parsing is done ! well it might still requires some code cleaning and deep testing to ensure nothing is missing, but so far so good ;)

I'll merge branches a bit later, and i'm so happy about it ! ;)

[parasyte]

WOOOOOO!!!! That's awesome news. How is the performance on CocoonJS compared to Safari? (Not sure you'll be able to tell right away with the platform demo, but thought I would ask!)

I'll do a quick code review for you tonight before sleep!

[melonjs]

for the performances, so far i'd say the same, but since all my demos are currently keyboard based games, i don't really have anything to really try it for now ...

that would be good for the code review, and that makes me think that I commented the polygon support in JSON :)
be sure to check branch 140, in case i did not merge it yet!

[parasyte]

Feature request for Tiled to support exporting JSON-format tilesets (TSX): mapeditor/tiled#381

[parasyte]

Done with quick review! :D Good work, I like what I saw. I will give it some testing tomorrow maybe.

[melonjs]

thanks! honestly it was not an easy task, and there is still some code that can be optimized (not to mention the weird stuff you saw that need fixing).

I'll keep testing it this evening and eventually merge it if I feel happy about it :)

[melonjs]

Branch 140 merged !

Current limitations :

• the backgroundcolor property is not currently exported by Tiled 0.9 (should be there in 0.9.1)
• TSX tileset file are not exported when using JSON, see Import/export tileset in any supported format mapeditor/tiled#381

Todo/known issues :

• fix the weird object issue when parsing tileset & layers (there is a workaround now that mask it)
• polygon/polyline support (currently disable)

[melonjs]

except from the two above limitations, JSON parsing should be complete now :)

[melonjs]

Closing the ticket, as everything seems to be working flawlessly :)