examples icon indicating copy to clipboard operation
examples copied to clipboard

Trouble using a Tiled map

Open jumpjack opened this issue 3 years ago • 10 comments

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.

jumpjack avatar Nov 22 '22 09:11 jumpjack

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.

obiot avatar Nov 24 '22 06:11 obiot

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?

jumpjack avatar Nov 24 '22 08:11 jumpjack

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.

obiot avatar Nov 24 '22 08:11 obiot

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?

jumpjack avatar Nov 24 '22 09:11 jumpjack

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 avatar Nov 27 '22 00:11 obiot

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

https://discord.gg/aur7JMk

obiot avatar Nov 27 '22 00:11 obiot

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:

image

MelonJS:

image

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

jumpjack avatar Nov 27 '22 11:11 jumpjack

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 avatar Dec 02 '22 01:12 obiot

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

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

obiot avatar Dec 02 '22 01:12 obiot

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.

image

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

jumpjack avatar Dec 14 '22 08:12 jumpjack