HTML5 Scaling & Mouse Position Issue


Librarian Polecat


I have a game I had developed for Desktop and started with my rooms in 1600:900. Now, I've been converting it to the HTML5 target and have gotten most of the scaling issues resolved. I've followed the YoYo blog on how to scale the game to the browser window and it visually looks fine. The only issue is that the mouse position seems to be off. I have a mouse-over effect for the menu buttons which is triggering when my mouse is not visually on the button.

I've read around the forums a bit and noticed that there were some possible bugs related to this issue, but it wasn't clear. Anyone have any further advice on this matter?

To be more specific, I'm using a persistent object called in an initializing room which has the following code:

Create Event
///outside the scaling script
base_width = room_width;
base_height = room_height;
width = base_width;
height = base_height;
Step Event
///Run Script for Scaling
if (browser_width != width || browser_height != height)
    width = min(base_width, browser_width);
    height = min(base_height, browser_height);
    scr_html_scale(base_width, base_height, width, height, true);
Scaling Script
///Scale HTML Window
///scale_canvas(base width, base height, current width, current height, center);
//argument0 = base width;
//argument1 = base height;
//argument2 = current width
//argument3 = current height
//argument4 = center window (true, false);

var aspect = (argument0 / argument1);

if ((argument2 / aspect) > argument3)
    window_set_size((argument3 * aspect), argument3);
    window_set_size(argument2, (argument2 / aspect));

if (argument4) window_center();
surface_resize(application_surface, min(window_get_width(), argument0), min(window_get_height(), argument1));

Librarian Polecat

Ha! Ok, I figured it out.

I needed to set up views for all the rooms and then set those views to match the window size. /Derp