HTML5 scaling to full width regardless of height

[-AAG-]

Hello. I am trying to find a way to have my game scale to fit the width of the browser and then scale the height keeping the aspect ratio of the browser even if the height of the game ends up being bigger than the height of the browser.

Let me explain. My monitor is 1920x1080 and my game is 800x450. With a full-screen browser it fits perfectly because the aspect ratios match but because of the browser search bar etc. the size gets messed up and I end up with black bars on the sides of the game window. I really don't mind this too much but would like to solve it or hack around it. I was thinking of increasing the height of my game to maybe 600. That will give me 75 pixels above and below for padding and with the game centered even if some of it gets covered by the browser search bar I can still get a "full-screen".

I'm really not sure if I'm making any sense. My current scaling code consists of a script, a create event, and a step event. All copied and pasted from the official GM:S demo. The one for GM:S 2 is no different at all. They do offer an option for full-screen using views and cropping but even their own demo doesn't work. I tried altering what I'm using and while I got the width to adjust and the height to be bigger than the browser the aspect was wrong and there will be scroll bars on the browser too like the game ended up gigantic on the height or something. Any help or direction will be appreciated.

Here is my current scaling stuff:
Script:

aspect = argument0 / argument1 ;

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

if ( argument4 )
{
window_center();
}

surface_resize( application_surface, min( window_get_width(), argument0), min( window_get_height(), argument1) );
​

Create event:

base_width = room_width;
base_height = room_height;
width = base_width;
height = base_height;​

Step event:

if ( browser_width != width || browser_height != height )
{
width = browser_width;
height = browser_height;
scr_scaling( base_width, base_height, width, height, true );
}​

 

[SilentxxBunny]

I'm no programmer - but I think that I understand this in theory.

You'd want to set the width to 100% of the browser_width and set the browser_height automatically. So... Try to calculate your desired "aspect ratio" from your base_width and base_height, and set the height by multiplying the browser_width by the aspectRatio.

Pardon me, if that's what you're already doing. I'm really stupid, lol.

Regarding the black bars: You may not be able to avoid them... Unless you integrate a minimum_height (based on the browser_height) and then over-scale the width.

Edit: You can disable scroll bars with CSS.

Alternatively, you could stretch your game... but I imagine that would look sorta funny.

 

[-AAG-]

Thank you very much! I will give these a shot. I really appreciate the scroll bar removing code.

 

[SilentxxBunny]

Not a problem. I'm not very good with GML or JavaScript - but let me know if you need any help with your HTML or CSS.