GX Games Scaling Issues

[XorDev]

Description

I've noticed the scaling seems odd in all the GX games I've created and others that I've tested. It appears to be scaled by 1.5 times or renders at 2/3 resolution no matter what I do. At first I thought it was an issue with my camera, view or application surface, but it happens even in the Draw GUI event where no such scaling should be taking place. I've attached two comparison images with the left side being Windows export and the right being GX games. These use fragment (screen) coordinates and should not be scaled in anyway. I've also taken some screenshots from various games and mods. It's especially visible wherever there are hard diagonal edges or rotated sprites.

Steps To Reproduce

To recreate this, I simply draw the screen coordinates directly to the screen and it's being scaled on GX games. You can compare with Windows for context

Which version of GameMaker are you reporting this issue for?

IDE v2024.4.1.152 Runtime v2024.4.1.201

Which operating system(s) are you seeing the problem on?

Windows 10.0.19045.0

Which platform(s) are you seeing the problem on?

GX.games

4857a431-70f5-4fae-be45-dc15c4359dee

[XorDev]

I first tested by simply displaying an alternating pattern every other row and column of pixels: gl_FragColor = vec4(mod(gl_FragCoord.xyz,2.0),1); On the Windows (left) we get the correct results, but it looks odd on GX: I also tested using a repeating circles pattern, and you can see that the odd scaling creates unintended patterns and distorts the shapes. It's especially noticeable with rotating sprites. I've tested a variety of games and mods and saw the same issue. Antialiasing can mask some of it, but it's still there. I picked some examples where it's more visible Somewhere in the code, there must be a 2/3 resolution factor. 1/2 wouldn't be so disruptive, but the odd fraction messes with shapes and patterns

[DragoniteSpam]

this is the main thing that keeps me from attempting to use gx to distribute stuff

[GameDevTosh]

I believe this is one of the main reasons I've been unable to update my GX game, which originally had only pixel art but now uses HD sprites as well. Anything that isn't pixel art looks horrible on GX due to the scaling when tested via the IDE, but it looks perfect in fullscreen mode. I can't ask users to go into fullscreen mode though, so I've opted to just not update the project at all if it'll look horrible without fullscreening it.

[stuckie]

Along with the usual option in Game Options for interpolate pixels

This is an additional one on GX.Games itself under your games Meta Data page

You may want to check to ensure that they are both set the same way, as that may be the issue.

[rwkay]

This is an issue with the handling of the game on the GX.games platform and not really a GM issue - we have alerted the GX.games team, but they need to address the issue within the styling and handling on the website itself.

GM is handling the game and the rendering to the canvas but the presentation of that canvas component is handled by the website itself.

I have asked the GX.games team to update this issue though.

[XorDev]

The issue still occurs even when testing the game in your browser (I've tested with Edge also), not just on GX.games. I have traced it down to this part of the runner.HTML file. It seems the window.innerWidth and height is about 2/3 what it should be, consistently. Perhaps the window is being scaled in some unintended way?

[DragoniteSpam]

I'm pretty sure this is a general web problem. Getting UI scaling to work properly with HTML5 is also a royal pain.

At any rate, it would be the bees' knees if at least one of these values could return the correct answer (pixel counting tells me the correct answer is 1727 x 971):

draw_clear(c_blue);
draw_text(32, 16, $"Window: {window_get_width()} x {window_get_height()}");
draw_text(32, 32, $"Display: {display_get_width()} x {display_get_height()}");
draw_text(32, 48, $"GUI: {display_get_gui_width()} x {display_get_gui_height()}");
draw_text(32, 64, $"Browser: {browser_width} x {browser_height}");

[andrewcirel]

windows_set_size also doesn't work properly when compiling for gx.games regardless of browser used. I usually choose "full scale" and then set windows_set_size. maxWidth and maxHeight seems to pick up the browser window Width and Height, instead of the values set by window_set_size (that are startingWidth, startingHeight). My games work properly for other platforms including HTML5. Not sure if it is the same issue, but sounds like it.

[gnysek]

Remember that Interpolation doesn't work on local test: https://github.com/YoYoGames/GameMaker-Bugs/issues/5840 (it doesn't interpolates canvas, GM game is interpolated, but not being 1:1 looks... strange).

[opera-douglasm]

I first tested by simply displaying an alternating pattern every other row and column of pixels: gl_FragColor = vec4(mod(gl_FragCoord.xyz,2.0),1); On the Windows (left) we get the correct results, but it looks odd on GX: I also tested using a repeating circles pattern, and you can see that the odd scaling creates unintended patterns and distorts the shapes. It's especially noticeable with rotating sprites. I've tested a variety of games and mods and saw the same issue. Antialiasing can mask some of it, but it's still there. I picked some examples where it's more visible Somewhere in the code, there must be a 2/3 resolution factor. 1/2 wouldn't be so disruptive, but the odd fraction messes with shapes and patterns

Hi! @XorDev would you be able to share the project files used for the grid and circle images? And also upload the game(s) in GX.games and share the link to the private track?

[XorDev]

Thanks for getting back, @opera-douglasm. Here's the project in zip: GX_Scaling.zip

And here's a GX demo: https://gx.games/games/6q022g/gx-scaling/tracks/93c67a05-c395-4499-808e-96b642032302

[opera-douglasm]

Thanks for getting back, @opera-douglasm. Here's the project in zip: GX_Scaling.zip

And here's a GX demo: https://gx.games/games/6q022g/gx-scaling/tracks/93c67a05-c395-4499-808e-96b642032302

Thanks for sharing the project, @XorDev! We tried here and it was visible mostly when there's some zoom applied to the page. Is this the same for? Are you using some system wide zoom or some zoom in the browser window?

Could you also please open the development tools tab in your browser, and in the console type window.devicePixelRatio and let us know the value that is being returned?

[XorDev]

I've tested in both Opera GX and Opera at 100% scale (Ctrl+0), but I still get some odd fraction scaling which distorts pixels in the middle of the screen. Some zoom levels like 67% or 200% appear to have integer scales and look fine for this demo.

Interestingly, window.devicePixelRatio returns 1.5, when is the same scaling factor I stumbled upon

[opera-douglasm]

I've tested in both Opera GX and Opera at 100% scale (Ctrl+0), but I still get some odd fraction scaling which distorts pixels in the middle of the screen. Some zoom levels like 67% or 200% appear to have integer scales and look fine for this demo.

Interestingly, window.devicePixelRatio returns 1.5, when is the same scaling factor I stumbled upon

If window.devicePixelRatio is returning 1.5, then there's some multiplier used for each pixel rendered on the screen. For example, 1.5 could mean that the scale display setting in Windows is set to 150% (other OSes have a similar setting as well).

Anyway, thanks again for helping us on this issue. We will keep investigating here and see if we can fix it.

[XorDev]

So it must be this setting which is the default for my 4k monitor. I hope it can be resolved internally because I imagine this affects an increasing number of users

[opera-douglasm]

So, after some investigation on our side, unfortunately we are not sure if we can fix this at the moment. The issue seems to be when we try to render subpixels and how the browser canvas deals with it. Ideally, we would always multiply the game window size to an integer value, so the canvas would not round any value, but each game uses its own resolution, so we will almost always need to rescale the game to fit the allocated space, which will result in subpixels. When scaling up, if we know the game resolution, we could have fixed steps to ensure that we would always multiply it by an integer (so no subpixels), but we need to scale down as well most of the times, so the issue would still be there (as when dividing, we could end up with subpixels).

We will keep an eye on it to see if something new could help with this though (like https://developer.mozilla.org/en-US/docs/Web/CSS/image-resolution#snap). Also, as it was mentioned before, enabling anti-aliasing might help (via Interpolate colors between pixels option in GX.create) some games to make this less noticeable.