HTML5 SOLVED My game is not scaling in the browser

M

Mobie

Guest
I got my educational game running online using the HTML5 module and it works pretty good. One problem is that the window does not scale in a browser, it's too big on some computers and too small on others. It's also pushed completely to the left of the screen. Are there settings for that in the camera view settings or maybe somewhere else?
 

rIKmAN

Member
I think I fixed it. Sorry for the unnecessary post
For the benefit of others searching for a solution to this / a similar problem if they might come across this thread in future:

What did you do to fix it?
 
M

Mobie

Guest
For the benefit of others searching for a solution to this / a similar problem if they might come across this thread in future:

What did you do to fix it?
Ends up that I didn't fix it after all. I found the settings in the HTML options for GMS2 that told it to scale and center the browser window, but they don't seem to do anything. Looks like I'm going to have to attempt to hand edit the HTML5 code. As usual, I have no idea of what I'm doing, but it's another opportunity to learn.
 
Last edited by a moderator:

True Valhalla

Full-Time Developer
GMC Elder
Centrally aligning your HTML5 game is a good first step...but there's so much more you should do. You may want to consider using the Mobility Engine (GMS2 support is coming soon).
 
M

Mobie

Guest
Centrally aligning your HTML5 game is a good first step...but there's so much more you should do. You may want to consider using the Mobility Engine (GMS2 support is coming soon).
That might be exactly what I need. Will it make my game be centered in the browser window? How about making it scale with browser windows?
 

True Valhalla

Full-Time Developer
GMC Elder
That might be exactly what I need. Will it make my game be centered in the browser window? How about making it scale with browser windows?
Yes, it does both of those things and much more. Here's one of my games using the engine: https://games.truevalhalla.com/battleships/

Please note that I intentionally limit the upscaling on desktop in my games, because I don't like them getting too big on high-resolution displays. This is a configurable option within the engine.
 
M

Mobie

Guest
Yes, it does both of those things and much more. Here's one of my games using the engine: https://games.truevalhalla.com/battleships/

Please note that I intentionally limit the upscaling on desktop in my games, because I don't like them getting too big on high-resolution displays. This is a configurable option within the engine.
Is the centering and scaling in HTML5 a typical issue with games made in GMS2. I put in a tech support request about it but haven't heard back yet.
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
Is the centering and scaling in HTML5 a typical issue with games made in GMS2. I put in a tech support request about it but haven't heard back yet.
If you only need to center the game on desktop, you can do so using window_ and display_ functions - e.g. window_set_rectangle will reposition/rescale the canvas, and display_get_width/display_get_height will return you the dimensions of the page. Hiding address bar on mobile is trickier and is the point where you need extensions.

In light of existing extensions not offering as much flexibility as there should be I'm considering to write one in the next few weeks.
 
M

Mobie

Guest
If you only need to center the game on desktop, you can do so using window_ and display_ functions - e.g. window_set_rectangle will reposition/rescale the canvas, and display_get_width/display_get_height will return you the dimensions of the page. Hiding address bar on mobile is trickier and is the point where you need extensions.

In light of existing extensions not offering as much flexibility as there should be I'm considering to write one in the next few weeks.
That worked except for one thing. I put the code below in the room's creation code and the canvas was perfectly matched to the screen. Unfortunately, the clickable area of the buttons stayed in the original position on the left of the screen. It's weird because the visual part of the buttons followed the room, but the clickable area did not. Also tried putting it in the Step code, with the same results.

How do I make the clickable area of the buttons stretch with the room size?

Code:
window_set_rectangle(0, 0, display_get_width(), display_get_height());
 
Last edited by a moderator:
M

Mobie

Guest
For the benefit of others searching for a solution to this / a similar problem if they might come across this thread in future:

What did you do to fix it?
If you only need to center the game on desktop, you can do so using window_ and display_ functions - e.g. window_set_rectangle will reposition/rescale the canvas, and display_get_width/display_get_height will return you the dimensions of the page. Hiding address bar on mobile is trickier and is the point where you need extensions.

In light of existing extensions not offering as much flexibility as there should be I'm considering to write one in the next few weeks.
Yes, it does both of those things and much more. Here's one of my games using the engine: https://games.truevalhalla.com/battleships/

Please note that I intentionally limit the upscaling on desktop in my games, because I don't like them getting too big on high-resolution displays. This is a configurable option within the engine.
I fixed it with the code below. Seems kind of kludgy, but it works. Thank you all for the help.
Code:
dh = display_get_height();
window_set_size(1024,dh);

window_center();
window_set_fullscreen(true);
 
Top