HTML5 HTML5 game does not adjust when I resize web browser window

B

bluesky5

Guest
Hi,
My HTML5 game does not adjust when I resize web browser window. There is something strange going on from beginning of all this story with scaling of HTML5 game.
In my code and now in your code, NazGhuL, when I start game by pressing of little green arrow (button) in upper left corner of GMS GUI to see game as it is already online...and game appears and starts in Google Chrome everything goes smoothly. Game (with your code and with my code) is scaling perfectly with changing size of web browser....but when I create application (as HTML5, of course), and then I get link over Google disc and then I insert this link in small piece of HTML code (look below, please) and embed it on my Weebly page ... scaling with changing of size of web browser window is gone (sometimes all game appears on web page in small window, maybe 3 inch width and 2 inch of height) ....all what stays is just that objects in game fits better on the edges of window/game but only within 288 (width) x 480 (height) room/window.

This is code for embedding on web page:

<iframe src="https://b624ec0fac9882c4b0ab52d2a8ba7ab223edab33.googledrive.com/host/0BwyOcOy36CmeLTRYZ0tUakZFa2M/" scrolling="no" title="Tropical pond 0i1 edu"></iframe>

Is it here maybe, in HTML code something wrong what cause losing of scaling with resizing of web browser window ?

I try to make HTML5 game which will adjust to as many as possible (web browsers on displays on) mobile phones, tablets etc. I am working in GMS 1.4.1474, HTML5 module. My game have few rooms. All rooms are 288 (width) x 480 (height). Already tried several changes in code, also tried with views, but nothing works. I wish to set scaling properly, so, please, help.

This was game before adding code for scaling: http://alanbgames.weebly.com/neskalir.html

This is how it looks now: http://alanbgames.weebly.com/ after I add next code in first room in obj_controller :

in Create event:

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

in Step event (of same obj_controller):

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

and in above mentioned script, scr_HTML5_Scale_Canvas :

aspect = argument0 / argument1;
if argument2 / aspect > argument3
{
window_set_size(argument3 * aspect, argument3);
}
else
{
window_set_size(argument2, argument2 / aspect);
}
if argument4
{
window_center();
}


With upper code, I achieved that game scales properly but only inside 288 x 480 room (I tried to enlarge room but game is not scaling right and visible is just smaller part of game) and I wish to get scaling of game accordingly to size of web browser (acctualy approximately accordingly to size of display on smartphone, tablet, laptop or computer - game is mainly for mobile phones).

Sorry, for long post and....please, help.
 
Last edited by a moderator:

Roa

Member
I dont think window set size will do anything in html5. What you need to do is resize the main draw surface.
Code:
surface_resize(application_surface browser_width, browser_height);
 
B

bluesky5

Guest
I dont think window set size will do anything in html5. What you need to do is resize the main draw surface.
Code:
surface_resize(application_surface browser_width, browser_height);
I will try it right away, thank you Roa.
 
B

bluesky5

Guest
In fact, you have to use both. here is what I use in one game of mine (On banner, MTMAPO):

Code:
window_set_size(round(Game_Width*Ratio), round(Game_Height*Ratio));

surface_resize(application_surface, round(Game_Width*Ratio), round(Game_Height*Ratio));
Here is some reading:
http://www.yoyogames.com/blog/65
http://www.yoyogames.com/blog/66
http://www.yoyogames.com/blog/67

(Round, floor or ceil values is a great habit with HTML5)
THank you NazGhuL.

I read those blogs already....few times :) My code is, acctualy, out of GMS tutorial about HTML5 scaling.
So, if I understood good I should replace in my script windows_set_size part with:

window_set_size(round(Game_Width*Ratio), round(Game_Height*Ratio));

surface_resize(application_surface, round(Game_Width*Ratio), round(Game_Height*Ratio));[/CODE]

Your Game_Widht is my room-.width or my browser_width ?
 

NazGhuL

NazTaiL
First:
Code:
application_surface_draw_enable(0);
then on post_draw
Code:
if (surface_exists(application_surface))
{
draw_surface(application_surface, 0, 0)
}
My game is 960x640 and it adjusts to fit the height, not the width. (that's why the black border)
 
B

bluesky5

Guest
First:
Code:
application_surface_draw_enable(0);
then on post_draw
Code:
if (surface_exists(application_surface))
{
draw_surface(application_surface, 0, 0)
}
My game is 960x640 and it adjusts to fit the height, not the width. (that's why the black border)
NazGhuL .....I it not...
First:
Code:
application_surface_draw_enable(0);
then on post_draw
Code:
if (surface_exists(application_surface))
{
draw_surface(application_surface, 0, 0)
}
My game is 960x640 and it adjusts to fit the height, not the width. (that's why the black border)
Thank you NazGhuL....but.....I do not know what to do exactly because
- in your first post you wrote another code (different from code in second post)
- what post_draw means ?

I will really, really appreaciate if you can be more specific.
On beginning of this thread I wrote my exact code which is placed in three places (Create and Step events of obj_controller and third part of code in script), can you please write what to replace with which code ?
 

NazGhuL

NazTaiL
I like to have an object that control the display: obj_display

First you need to disable the application surface on the create event:
Code:
application_surface_draw_enable(0);
That means that you'll have to manually draw it later, on the post_draw event:

Code:
if (surface_exists(application_surface))
{
draw_surface(application_surface, 0, 0)
}
That's the basics.

Now you have to figure out HOW do you want your room to be stretch.
Because you can simply adjust the final application surface to the size of the browser...but it can look ugly.
A good option is to show more of the room by expanding the views according to the browser width and height.
On my game MTMAPO, I choose to stretch the height of the application surface to fit the browser.
If that stretch was 140% the original height, then I stretch the width by 140% too, leaving black borders.
On another HTML5 game I made, I adjust the view: Linko-D
(I don't want to advertise my games here... ;) Just want you to see the difference)

So what do you think will suits best your game?
 
B

bluesky5

Guest
Thank you, NazGhuL, now it`s a bit clearer.

288 is basic width and 480 is basic height in my game. This is, let say, smallest dimension and I wish to build up accordingly to display (size of web browser) on smartphones, tablets.... On the computers (or laptops etc.) would be best way to fit, without distortion, (multiply 288 x 1,6 and 480 x 1,6) something like 460 (max. width) x 770 (max. height).
What to do next ?
 

NazGhuL

NazTaiL
So you want to fit the height to the browser and adjust width accordingly? With black borders in some occasions?
 

NazGhuL

NazTaiL
This is how I managed my game:

Code:
//obj_display - create event
Browser_W = browser_width;
Browser_H = browser_height;
Ratio = 1;
Fullscreen = 0;

scr_display_resize();
application_surface_draw_enable(0);
window_set_colour(c_black);

//obj_display - step event
if (browser_width != Browser_W || Browser_H != browser_height)
{
scr_display_resize();
Browser_W = browser_width;
Browser_H = browser_height;
}

//obj_display - post draw event
if (surface_exists(application_surface))
{
draw_surface(application_surface, 0, 0)
}


//The script - scr_display_resize();
//scr_display_resize()
Ratio = 1;
if (obj_display.Fullscreen || browser_height < Game_Height)
{
Ratio = browser_height/Game_Height;
}

Ratio = max(Ratio, 0.5);

window_set_size(round(Game_Width*Ratio), round(Game_Height*Ratio));

surface_resize(application_surface, round(Game_Width*Ratio), round(Game_Height*Ratio));


alarm[0] = 1;

//obj_display - alarm[0]  event
window_center();
Know that Game_Width and Game_Height are macro.
 
B

bluesky5

Guest
Thank you NazGhuL, but it is not working. I wrote everything carefully from your post, I tried twice.
In my obj_display I have: Create, Step, Alarm 0 and PostDraw events + script.
But, when I start game by clicking little green arrow (button in upper left corner of GUI) in GMS I can see loading bar progress but afterwards is everything black and I can just hear sound of my game. I tried few adjustments but it did not work. Maybe is due to the different versions of GMS we are using......I don`t know.

So, I am looking for a solution to accomplish next:

288 is basic width and 480 is basic height in my HTML5 game. This is, let say, smallest (basic) dimension and I wish to build up accordingly to display (size of web browser) on smartphones, tablets.... On the computers (or laptops etc.) would be best way to fit, without distortion, (multiply 288 x 1,6 and 480 x 1,6) something like 460 (max. width) x 770 (max. height).

Please, is there a solution to do this ?
 

NazGhuL

NazTaiL
Sorry, I forget something... If you want to put it fullscreen you have to run those codes:
Code:
Fullscreen = !Fullscreen;
scr_display_resize();
Browser_W = browser_width;
Browser_H = browser_height;
Here is a GMZ: HTML5_stretch.zip
 
B

bluesky5

Guest
Really, thank you very much for addition of code and your file, NazGhuL (still, I would like that it scales automatically accordingly to size of display/web browser on smartphones and tablets etc. like I mentioned in my post before: from 288 (width) x 480 (height) to max. 460 x 770). But, now when I see your code and my code.....
There is something strange going on from beginning of all this story with scaling of HTML5 game.
In my code and now in your code, NazGhuL, when I start game by pressing of little green arrow (button) in upper left corner of GMS GUI to see game as it is already online...and game appears and starts in Google Chrome everything goes smoothly. Game (with your code and with my code) is scaling perfectly with changing size of web browser....but when I create application (as HTML5, of course), and then I get link over Google disc and then I insert this link in small piece of HTML code (look below, please) and embed it on my Weebly page ... scaling with changing of size of web browser window is gone (sometimes all game appears on web page in small window, maybe 3 inch width and 2 inch of height) ....all what stays is just that objects in game fits better on the edges of window/game but only within 288 (width) x 480 (height) room/window.

This is code for embedding on web page:

<iframe src="https://b624ec0fac9882c4b0ab52d2a8ba7ab223edab33.googledrive.com/host/0BwyOcOy36CmeLTRYZ0tUakZFa2M/" scrolling="no" title="Tropical pond 0i1 edu"></iframe>

Is it here maybe, in HTML code, something wrong what cause losing of scaling with resizing of web browser window ?
 

NazGhuL

NazTaiL
If you want to set it fullscreen all the time, set Fullscreen to 1.
For the embedding on web page, I can't help you.
 
B

bluesky5

Guest
If you want to set it fullscreen all the time, set Fullscreen to 1.
For the embedding on web page, I can't help you.
I changed Fullscreen to 1, but, as before (with your and with my code), testing within GMS gives fine scaling when resize web browser. Issue starts when I embed it on my web page (with Fulscreen = 1 and, also, with Fullscreen=0 is game now about just 2 inch wide and about 3 inch high).
NazGhuL, thank you, anyway, for your good will, for your time and for your patiente with me.

So, for now this stays unsloved and I still ask for help.
 
B

bluesky5

Guest
So, no one had this situation when HTML5 game within GMS (HTML5 module, of course) runs good (in Google Chrome) and scaling of game follows resizing of web browser window but after embedding of HTML5 game into (Weebly) web page (game is still working good but) scaling is lost, game does not follows resizing of web browser window any more ?

Any advice ?
 
Top