Sign in to follow this  
PLAYERKILLERS

Page zoom breaks inventory

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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
    }
);

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

so I tried this morning,  but I'm not getting how to actually zoom in or out the browser :P  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 ?

 

 

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.