Loading a Tiled Map Breaks Most Everything

[Monjhall]

Hello,

Super glad this forum is a thing because I've never been more confused about an issue in my life. To provide a little background, the project I'm working on is a turn-based battle simulator, similar to Advance Wars, but uses unique characters instead of the typical war machines. Each player is intended to have their own unique maps, but loading these maps has become an issue recently.

My project partner and I planned to have maps that vary in size and including the map in question, where tiles are 64 pixels by 64 pixels and the map is 15 tiles by 21 tiles. Uploading placeholder maps of different sizes didn't seem to affect anything, but now we're getting some ridiculous issues.

I've uploaded an example in which 3 clear issues can be seen. First, the mouse cursor and where the engine thinks the mouse cursor are about 2.5 tiles off from each other. Second, the animations for the characters are all over the place. Every one of those images are in their sprite sheets, but the frames are appearing at incorrect times, unlike when on the test map. Lastly, the map obviously turn completely black after extending past a specific point.

The only issue I could solve was that by expanding the map to the screen size (1280 pixels, or 20 tiles) the mouse cursor is once again where it needs to be, however this causes even more ridiculous bugs when moving on the map (Animations not being removed, new characters appearing in random locations, etc).

Has anyone seen anything like this before, and if so, how should I address it?

Thanks,

Monjhall

 

[obiot]

do you have any message in the console ? when these issues are happening?

also, i'm not sure I'm getting what you mean by " Uploading placeholder maps of different sizes", can you further describe it ? upload where and which placeholder, and how are these things used by melonJS.

I'm clueless about the pointer issue though, but we have know issue with anchor point and GUI element, where the only way to properly fix it is to set a [0, 0] anchor point (this will be fixed in the next 5.0 version)

[Parasyte]

13 hours ago, Monjhall said:

I've uploaded an example

Where did you upload the example? Do you mean the gif? It's going to be hard to debug this problem just by looking at a gif or video. Show us some code.

If I had to guess (and let's face it, I do have to guess; I haven't seen any code on which to base these suggestions) you may have some unusual DOM hierarchy and/or CSS that is conflicting with the auto-scaling code in melonJS. It works best if you are either using a static size without scaling, or suggesting a size and using one of the flex methods to take up all of the available screen real estate. This article goes into detail about all of the different scaling methods: http://blog.melonjs.org/2015/02/shine-get-resolution-independence.html

Apart from that, I'm at a loss. You don't get the same crazy behavior with any of the examples, though, right? Especially the shapes example, which uses PointerEvents. If this example is broken, then the problem is related to your User Agent or environment. If it works, then it's just something in your code (but we won't know what it is, yadda yadda, share the code).

[ForgeableSum]

> Second, the animations for the characters are all over the place. Every one of those images are in their sprite sheets, but the frames are appearing at incorrect times, unlike when on the test map.

Are you using texture packer? Make sure the frame names are in alphabetic order when you publish the sheet. This has messed me up a few time, use 01, 02, 03 instead of 1 2 3 for file names. 

[Parasyte]

The frame names shouldn't matter, since animations are built by specifying each by name in an array. So you are guaranteed an ordered list of animation frames at runtime.

If you use the "default" animation primarily, you're missing out on a lot of really great animation management tools.