Trouble using a Tiled map

[jumpjack]

I am not able to use this map, created with Tiled 1.9:

https://github.com/jumpjack/isometric-game-js-test/blob/master/Jerry-isometric-rpg/data/map/map-level0-embedded-v02.tmx

I would just need an "hello world" game: my map, a single-framed sprite, collisions enabled on one tile, then I will do the remaining part...

I made dozens of attempts without success.

[obiot]

thanks of the feedback, I'll look into it.

what version of melonJS are you using ? there were some changes/addition made to the 13.x branch wrt Tiled.

[jumpjack]

I am experimenting both with pre-13 and post-13 versions.
I eventually succeeded in loading the map, now I am struggling to figure out how to implement collisions; is it possibile to automatically set collisions active for all tiles, rather than drawing by hand all the collision areas? And then manually editing collision property only for some specific tiles such as doors?

[obiot]

We used to have per tile collision in the early days of melonJS, but it was terrible in terms of performances, and with the current SAT implementation, it's easier to actually define large(r) collision zone.

Just add an object layer to your map called "collision" and then you can use polygon and polyline to define your collision are. You do not have to just do it per tile, you can just draw a big rectangle that englobes anything you want.

[jumpjack]

I see, but I am not working at my own game, I am trying to port to javascript an ancient game, which was based on tile collisions, and I don't want to do all the drawing job from scratch...
I'll see if I can write a tiles-to-shapes converter. Would MelonJS work if I create one square per each tile, or would this destroy performances?

[obiot]

it would work for sure, it would just be un-optimized as multiple tiles can definitely be grouped under/within one bigger shape that is easier to check against

[obiot]

also, you should really join our discord channel, at least you'd get faster answers :)

https://discord.gg/aur7JMk

[jumpjack]

I eventually succeded in enabling debug panel but I add to manually add debugPanel.js from another repository and load it in index.js.

Anyway now I have visual confirmation of my suspects: all collision areas are shifted down-right by one position w.r.t what I see in Tiled!

Tiled:

MelonJS:

Additionally, only first layer of the tilemap is loaded; how do I display all layers? The isometric example uses only one layer. :-(

[obiot]

if you manually add the debug Panel, make sure to use the latest one from the boilerplate: https://github.com/melonjs/es6-boilerplate

also, about the layers, I'm not sure what you mean, if the layer is set as visible in Tiled, then it will be loaded/displayed in your game.

[obiot]

also, please come and discuss it on discord : https://discord.gg/aur7JMk

beside me, not sure who is coming here to be honest.

[jumpjack]

Nobody replies on discord...

About the layers, i think I found a bug: parameter "offsety" of TMX file is ignored, hence all levels are put at same height.

About the occlusions: where exactly should I put me.game.world.sortOn = "y" ? I placed it everywhere, without success.