Page zoom breaks inventory

[PLAYERKILLERS]

Players who have zoomed/scaled their browser tab have been experiencing difficulty using my inventory panel. Should I be detecting page zoom before the user enters the game? Wondering if there is a user friendly solution for this.

[obiot]

Hi, sorry for the long delay in replying, did you fix your issue ?

there are actually 3 events you could subscribe to (also triggered  in the following sequence):

1. WINDOW_ONRESIZE : http://melonjs.github.io/melonJS/docs/me.event.html#.VIEWPORT_ONRESIZE (that actually follow the standard "DOM" size/orientation change event)
2. VIEWPORT_ONRESIZE : http://melonjs.github.io/melonJS/docs/me.event.html#.VIEWPORT_ONRESIZE
3. CANVAS_ONRESIZE : http://melonjs.github.io/melonJS/docs/me.event.html#.CANVAS_ONRESIZE

so assuming all you "need to know" is when the window is being resize, you can then do :

me.event.subscribe(
    me.event.WINDOW_ONRESIZE_CHANGE,
    function resizeMyUI() {
        // do something amazing
    }
);

 

[obiot]

Hi, did it help ?

[PLAYERKILLERS]

The entire UI is designed to fit in a 800x600 iframe if necessary, but resizes to whichever resolution. I do appreciate the work you have done with the 'scaleMethod' option.

I am already using WINDOW_ONRESIZE to position items on the screen. I haven't tried the other events, but I can say that the error occurs for users who keep their browser zoomed in or out. In these cases there would be no actual change event fired. 

The position of the elements is fine, but the mouse position is reported off center. I think if you take a second at https://playerkillers.exchange with your browser zoomed in or out you will see what I mean. The inventory opens from the 'I' key, but all of the clickable elements are off center while the browser is zoomed.

Not sure how to handle these cases. I did see some snippets on stackoverflow about detecting if the page has been zoomed, but nothing seemed reliable.

Thanks again.

[obiot]

so I tried this morning,  but I'm not getting how to actually zoom in or out the browser   with the game going fullscreen when starting, and the browser switching back to the main screen (score/$ dashboard, screen "return to game/how to play/etc...), how do you actually zoom ?

 

 

[obiot]

the other issue with browser zooming is that it does not trigger any event and that melonJS is "caching" the parent relative position, see below and only recalculate it on a resize event   :

https://github.com/melonjs/melonJS/blob/master/src/video/video.js#L358-L367

therefore when one zoom in or out pointer coordinates are thereof off as the cached value is not correct anymore.....  

a quick way around it for now could be for you to set canvasOffset to null when the end user opens the UI, by doing " me.video._canvasOffset = null; "

this is certainly a bit hackish, and I will probably rather add a method like "updateBoundingClientRect()" or something (that can be called from somewhere we can detect a zoom), but at least it can help validate my assumptions (if you don't mind testing it)

[PLAYERKILLERS]

I think these users surf around the web with their browser zoomed and are unaware. They are not actively zooming the page according to the reports I have. Although I can see how the page layout I used might encourage that. For me, throwing a warning before allowing them to enter would be enough. Like in the case of "please rotate your device" for mobile users.

ctrl+mouse wheel zooms the page for me.

Setting 

me.video._canvasOffset = null

On the console didn't seem to do anything while the game was active or the menu was opened.

Thanks again!

[obiot]

that's disappointing....

Would you mind trying with the the latest 7.0 build ? https://melonjs-builds.s3.amazonaws.com/index.html?prefix=artifacts/master/2503/build/ there is no api change between 6.4 and 7.0 that will impact you (so except maybe from the plugin it should work out of the box)

also I added a me.video.renderer.updateBounds() function that you can call yourself (cleaner than a private variable) and that will update the internal cache position on the parent container. if just replacing the lib does not do anything, try calling the function from the console before/when opening the UI