SOLVED Error Scaling HTML5

[Kendar]

I am using the example tells us to scale in HTML5 that YOYO , it gives me a problem. The case is that depending on how you move the browser window, sometimes it scales well and sometimes it multiplies the image. Here is an image of the failure.

Example YOYO: https://www.yoyogames.com/blog/67/the-basics-of-scaling-html5

My code is:

Script "scale_canvas"

/// @function scale_canvas(base width, base height, current width, current height, center);
/// @param {int} base width The base width for the game room
/// @param {int} base height The base height for the game room
/// @param {int} current width The current width of the game canvas
/// @param {int} current height The current height of the game canvas
/// @param {bool} center Set whether to center the game window on the canvas or not

function scale_canvas(argument0, argument1, argument2, argument3, argument4){

var _bw = argument0;
var _bh = argument1;
var _cw = argument2;
var _ch = argument3;
var _center = argument4;
var _aspect = (_bw / _bh);

if ((_cw / _aspect) > _ch)
{
window_set_size((_ch *_aspect), _ch);
}
else
{
window_set_size(_cw, (_cw / _aspect));
}
if (_center)
{
window_center();
}

surface_resize(application_surface, min(window_get_width(), _bw), min(window_get_height(), _bh));


Object "Scaling"

- 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 = min(base_width, browser_width);
height = min(base_height, browser_height);
scale_canvas(base_width, base_height, width, height, true);
}



Image Room:

Image Error Scaling



In the image of the error, you can see that when I scale the browser, the same image I have in the background appears duplicated and enlarged.

I hope you can help me.

Regards

 

[tadashibashi]

I am using the example tells us to scale in HTML5 that YOYO , it gives me a problem. The case is that depending on how you move the browser window, sometimes it scales well and sometimes it multiplies the image. Here is an image of the failure.

Example YOYO: https://www.yoyogames.com/blog/67/the-basics-of-scaling-html5

My code is:

Script "scale_canvas"

/// @function scale_canvas(base width, base height, current width, current height, center);
/// @param {int} base width The base width for the game room
/// @param {int} base height The base height for the game room
/// @param {int} current width The current width of the game canvas
/// @param {int} current height The current height of the game canvas
/// @param {bool} center Set whether to center the game window on the canvas or not

function scale_canvas(argument0, argument1, argument2, argument3, argument4){

var _bw = argument0;
var _bh = argument1;
var _cw = argument2;
var _ch = argument3;
var _center = argument4;
var _aspect = (_bw / _bh);

if ((_cw / _aspect) > _ch)
{
window_set_size((_ch *_aspect), _ch);
}
else
{
window_set_size(_cw, (_cw / _aspect));
}
if (_center)
{
window_center();
}

surface_resize(application_surface, min(window_get_width(), _bw), min(window_get_height(), _bh));


Object "Scaling"

- 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 = min(base_width, browser_width);
height = min(base_height, browser_height);
scale_canvas(base_width, base_height, width, height, true);
}



Image Room:

Image Error Scaling

View attachment 38784

In the image of the error, you can see that when I scale the browser, the same image I have in the background appears duplicated and enlarged.

I hope you can help me.

Regards

Hello, I've run this on both Chrome and Edge, and can't seem to reproduce the problem.
Can you share how you're drawing the images?

By the way, I didn't realize you can resize the canvas this way, thanks for sharing the tutorial.

 

[Kendar]

Hello tadashibashi!

First of all, thank you very much for answering. I'll give you a ".gift" of what happens to me.

By the way I leave you a link to my project in case I missed something, I'm a new user in gamemaker and maybe I'm lost in some nonsense.


Link Video Gift

ProjectTestScaling


By the way, I'm glad you found the tutorial useful!

Regards

 

[tadashibashi]

Hello tadashibashi!

First of all, thank you very much for answering. I'll give you a ".gift" of what happens to me.

By the way I leave you a link to my project in case I missed something, I'm a new user in gamemaker and maybe I'm lost in some nonsense.


Link Video Gift

ProjectTestScaling


By the way, I'm glad you found the tutorial useful!

Regards

You're welcome. Thank you for sending the project file and gif, I'm pretty sure I found what's causing that behavior. For some reason not having viewports enabled causes this. If you check "Enable Viewports" in the Room Editor -> Properties, then under "Viewport 0" check "Visible". Here's a screenshot of where that is. Hope this solves the issue.

 

[Kendar]

You're welcome. Thank you for sending the project file and gif, I'm pretty sure I found what's causing that behavior. For some reason not having viewports enabled causes this. If you check "Enable Viewports" in the Room Editor -> Properties, then under "Viewport 0" check "Visible". Here's a screenshot of where that is. Hope this solves the issue.

Ohhh Yeaah ! thank you so much, now it works perfectly!

Thank you very much for responding so quickly, today I already have a happy day, I hope you have it too!

Best regards