Floating object position incorrect when map is smaller than screen

[parasyte]

Discovered this bug during the game jam this weekend: With a map smaller than the screen, floating objects will not be drawn at screen coordinates, and the rectangle for clicks also has an improper offset. Related to #33 and #119.

[melonjs]

Actually, there is one thing that I wanted to change in a previous patch, on how we draw non-floating objects, and that will help to make with this.

Right now in the main loop we parse the object list, and if the object is non –floating object, we translate the canvas.
Considering that in a regular game, most of the objects are non-floating I wanted to do the opposite, for better performances.

So : before the main loop translate the canvas, and then translate back if it’s floating object. First it will be better in terms of performances (because of the ratio between floating and non-floating objects), but then when initially translating the canvas, we can then add the corresponding offset if the level is smaller.

[melonjs]

@parasyte
Hi Jason, actually, I cannot reproduce your issue, as on my side if a make the canvas bigger than any level, the floating object (HUD in my case) are properly displayed. Could you share an example ?

(note the above change does not change anything for this, it's just a small optimization)

[parasyte]

@obiot
Hi, there were two changes I had to make to get this working yesterday:

1. The melonJS patch for click events: https://bitbucket.org/parasyte/coffeeciv/changeset/4b64e46b39cf0fcc033f71b3d6d624f86271ad06#Llib/melonJS-0.9.5.jsF7813 (Just this one line changed, ignore all the whitespace in the diff) It's this line in melonJS src: https://github.com/obiot/melonJS/blob/master/src/input/input.js#L177
2. Adding the map offset to get it to draw correctly: https://bitbucket.org/parasyte/coffeeciv/src/d4650e4c7cd12d93da3a2173fa5ba4fc1a428100/js/objects/GUI.js?at=master#cl-42

It looks like the HUD_Item drawing position worked great (didn't try clicks on it), but drawing position for floating SpriteObject did not work without the map position offset, and the click location did not work without the patch in dispatchMouseEvent. I can maybe do a more minimal example later if necessary, but the demo (which source I've linked to) can be tried here: http://coffee.kodewerx.org/ You will need to select one of the six colored squares with at least three devices or browser tabs simultaneously to get to the point with the panel (the object with the issue); it's supposed to be attached to the right side of the screen, no matter how large the screen is.

[melonjs]

Ooh ok I got it now :)

For the HUD I think that following the recent changes, it’s working because of a wrong implementation now (it should not remove the map offset), see here :
https://github.com/obiot/melonJS/blob/master/src/GUI/HUD.js#L358

And when dealing with floating object, the engine should then as well take this in account when translating back (+viewportPos – mapOffset):
https://github.com/obiot/melonJS/blob/master/src/core.js#L1012

[parasyte]

Cool, cool. We also need to verify the click region works correctly with the map position offset.

[melonjs]

@parasyte
I think that should do it, I tested it ok on my side with my small examples.

Could you give it a try ? ( I will let it open until we both "approve" the fix)

[parasyte]

Interesting! Now that the drawing position has been fixed, the patch to input.js is no longer necessary, so that single change should be reverted and everything just works.

With that, it passes my tests, too.

[melonjs]

you mean this fix is not required ?
https://github.com/obiot/melonJS/commit/e37d8818ee3fd18d935ab6064e06f2ef06378e10#L2R177

hmm... either I misunderstood you, or I need more testing on my side,but with with the current code base (no further change) and my basic tests I have both floating and non floating object being draw correctly, and clickable with the mouse.

[melonjs]

ah ah, my bad, wrong testing on my side ... :(

I confirm that the patch to input is not required anymore ! I commit the change and close both tickets :)

[parasyte]

Hooray! 👯

[melonjs]

👍