soft_fullscreen, aspect ratio and mouse coordinates

[Scott Newby]

Hello

I've hit a problem with my game and fullscreen on browsers and mobiles.  I'm using SDL and sdl-gpu and everything works fine in the browser normally but when I go soft fullscreen using...

EMSCRIPTEN_FULLSCREEN_SCALE_ASPECT

EMSCRIPTEN_FULLSCREEN_CANVAS_SCALE_NONE

EMSCRIPTEN_FULLSCREEN_FILTERING_DEFAULT

It looks ok but mouse coords are all off.  My game has a virtual resolution of 768x1024, I create my SDL window at 50% of that and sdl-gpu will scale coordinates to fit.  I've output the html5.h callback for mousemove and I can see the coords look correct normally - if I move the mouse to the top left of the canvas I get 0,0.  If I move off the canvas to the left I get -100,0, etc.  This is great.

When I go full screen my aspect ratio is preserved but the x coordinate comes back with 0 being the left edge of the browser window even though my game window now starts centered.  The end result is the X coordinate of the mouse is offset by a certain amount.  I can adjust for that but I can't figure out how to calculate that value.  I'm drowning in coordinates and pixels.

In the above screenshot my mouse is at the top left of the game window but the coordinate I get back via SDL is 123,0.  The other params on the page are...

MainWindow = my virtual resolution
CSSWindow = the result of emscripten_get_element_css_size in the html5.h callback for canvasResizedCallback.
CanvasWindow = the result of emscripten_get_canvas_element_size

the ones starting me... are the results from the html5.h mousemove callback.

The last two are from doing the same bit of code as the SDL_MouseMove messaage stuff.

Basically, is there anyway to get my mouse coord back so 0,0 is always the top left of the game window?

Thanks!

Scott

[Jukka Jylänki]

The padding is implemented by adding CSS styles .paddingLeft/Right/Top/Bottom on the canvas.

you can try querying them e.g. with

double paddingLeft = EM_ASM_DOUBLE(return parseFloat(document.querySelector('canvas').style.paddingLeft));

those values will be in CSS pixel units, so scale with window.devicePixelRatio if you are computing in WebGL native pixel units.

--
You received this message because you are subscribed to the Google Groups "emscripten-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to emscripten-disc...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/d7d9881f-a6cc-4ee5-99ee-6871a9c15fe7%40googlegroups.com.