Proof of concept : Using Tiled as a Box2D editor

[Ezelia]

I think everyone knows what's Tiled Map editor, I use it a lot in my game project.

 

here is a poc of an engine I'm writing that loads maps from Tiled Map Editor but with Box2D physics support.

 

 

 

What do you think ?

[Ezelia]

another video demonstrating how to make a platformer in 15minutes and 15 lines of code (final code at minute 14:54)

 

 

 

still a proof of concept, but I'll try to release a first alpha as soon as possible.

 

I didn't reinvented the wheel, I just mixedTiled editor json format, and an abstraction layer on top of box2d.

 

PlatformHandler class is a custom configuration of box2d and events handling that makes a body behaves like a platformer player.

we can define other environments the same way, for example an angry-birds like, a space game ...etc

[benny!]

Wow ... looks very promising.

 

Is this project something you are going to release publically ?

[Ezelia]

yes I'll put it on github as soon as I get something stable, since
the concept is already used by a lot of free/commercial engines

 

hopefully, the community can help me make it better

[Chris]

I like the idea to use tiled as a general map editor, even for HTML5 games. The only problem I have is the point that tiled map files tend to get very big in size, very quickly. The loading times for web applications would explode. Did you think about any solution for this, yet? Maybe loading game maps in chunks, like google does in google maps, or something like that?

 

Also, I am very interested about the redering performance when drawing tilebased maps to a screen. About two years or so ago I did a test run drawing a field of 32x32px tiles to a canvas with the size of 1024x768px and was very disappointed of the performance. Maybe it got better since then, but do you know of any tricks to speed up rendering those tilemaps?

[Ezelia]

I'm working on another project where I faced all those problems with Tiled editor and "almost" solved them

 

the project I'm speaking about is an isometric MMORPG (still in early stage hah but a prototype can be tested here : http://demo.ezelia.com/ )

 

this proto is a world of 50maps of 32x32 tile for each map and 92x46px per tile... as you can see if you test the game, It's a 2D isometric with continious scrolling, on modern browsers it runs very smooth and you never notice that you moved from one map to another (I have a better version that I didn't released yer).

what I do here is that I load all adjacent maps data (Noth, North-East, South ...etc) but only render tiles on the current viewport ... I didn't find another type of optimisation to do here since isometric rendering need to calculate z-indexes for each frame, si I clear/redraw canvas 60 times per second ... this is the part I'm trying to optimise more.

now for maps size, I don't use native TMX format but a slightly modified json format. in general, the big part in JSON format is the description of all tilesets, but since most of my maps share the same tilesets, I wrote a simple tool that compiles all shared tilesets in an external JSON file witch is referenced by maps JSON files. and here is the resulting 32x32 maps : http://demo.ezelia.com/data/maps/base1.json  (about 17k).

give a try to the isometric demo and tell me how it performs (I tested it on Chrome, Firefox and IE9+  ... on safari it's slow)

[Chris]

Yeah, I already know your iso game over from facebooks HTML5 group - I think you are doing a good job there

 

I did a posting some time ago over at gamedev.net about compressing and storing map-data inside of PNG images. There were some interesting responses and I will try this idea some day to see if its usable in a real world example. You can read about it in my post on gamedev.net

 

I would like to know what you think about it.

[Ezelia]

I already tester the png trick some months ago it worked just fine but I encountered a problem on some computers (actually, users reported it).

some antiviruses block the page claiming there is a bad behaving script.

but in my case I was not storing data, I was storing script that I evaled after PNG decompression ... I suspect that this is what antivirus complained about...

I thought about another idea to optimize Tiled maps

Json map data looks like this [0,0,0,0,1,1,1,2,2,0,0,0,0,0,1,1,5,5,5,5,5,5,3,3,3,3,3,3 ...etc]

one dumb compression algorithm would be to use two integers to store each data and the number of its occurences (you'll loose space for data occuring once)

for example this data [0,0,0,0,1,1,1,2,2,0,0,0,0,0,1,1,5,5,5,5,5,5,3,3,3,3,3,3]

become [0,4,1,3,2,2,0,5,1,2,5,6,3,6]
here I gained 50% with simple algorithm.


also, if you have your own server, you can use the server side compression using gzip witch will compress you file seamlessly, if active, you'll not see any gain with PNG compression since it's using pretty similar algorithm.

btw, I forget to tell you that my isometric maps are using 5 layers of 32x32 tiles with no compression.

[Chris]

Yes, GZIP will help a lot for compressing your map-data over the wire (when its textbased).

 

Another idea would be to ditch the JSON syntax and encode your indexes as UTF8 characters. The range of UTF8 has 1.111.998 characters and you simply arrange your characters straight away behind eachother, where each character stands for a single field on the map.

 

This would reduce the file-size again since no commas and brackets for JSON would have to be used. After that, the GZIP compression reduces the filesize again.

 

But this is only an idea I just had - I didn't test this out.