Pixelart distortion when zoomed into largened resolution

VALO · August 29, 2023, 5:28pm

Hi! I already asked this in a previous topic long time ago but I’m still struggling with this. I’m asking why the distortion seen in the pictures below happens, so what causes it, and how exactly can it be avoided?

My game is set to 640x360 resolution in the game properties.

Here are my events:

When I start the game, the game window is small. Resolution is set to 1920x1080 by an event because it could grant me:

Smoother camera movement
Smoother object rotation
More positions for smoother tweened animations.

Here the distortion is horrible as seen here. Some “pixel rows” are ridiculously thick:

.

When I press F5, an event is triggered and the game goes fullscreen (aspect ratio is kept). Here the distortion is still clearly visible but it’s not as bad.

.

In these pictures, the objects are actually twice their apparent size. I resized the room in Piskel so every pixel is actually 4 pixels. Personally I don’t think it matters at all. I’m pointing it out just in case.

This distortion is mainly just a windowed problem. In fullscreen it looks right:

Lastly, I have noticed that the distortion doesn’t seem to happen if my zoom is set to 3 (instead of 2 like it shows in my events-screenshot). The same applies to 6 and 9… (all divisible by 3.) 640x3 is 1920, so there is probably a connection.

Please, help!

ZeroX4 · August 29, 2023, 5:43pm

I am not 100% sure and i can be 100%

But worth a try

Check box here and try different options
(I always go with fit to width)

I think when i disabled it i seen something similar
Well more or less

VALO · August 29, 2023, 6:53pm

I tried all options both with check-mark and without it. The problem persists. Thanks for trying.

ZeroX4 · August 29, 2023, 7:55pm

Then maybe round pixels?
Idk i am out of ideas

Silver-Streak · August 29, 2023, 8:25pm

I believe what you are experiencing is correct.

You are going from 1080p to 720p, which is a noninteger downscale, then just fullscreening that 720p canvas.

Remove or disable your event that changes to 720p window size and see how it behaves after you fullscreen it.

VALO · August 29, 2023, 9:56pm

Hi! Sorry but I’m having hard time trying to understand what you mean.

What do you mean by correct?

What do you mean by “going from 1080 to 720”?

Silver-Streak · August 29, 2023, 10:12pm

You’re setting your game resolution to 1920x1080 in your first event.

You are then setting the game canvas (not resolution) to 1280x720

This is 0.75x the game resolution, so what was originally 1 pixel at 640x360, now scaled up to 2 pixels at 1920x1080, must now be scaled to 1.5 pixels at 1280x720, which isn’t possible, so it has to do some estimation. Some pixels become 2 pixels, some pixels become 1 pixel, etc.

So the distortion you see when windowed is expected and correct based on the math you’re doing.

You will never be able to go from a 1080p resolution to a 720p resolution without distortion.

If you’re wanting to keep your aspect and pixel ratios accurate, you need to base everything (including zooming) off your native resolution. So you start at 640x360 and go up to 1920x1080, you need to zoom 3x (360x3=1080). If you change the screen to 720p, you need to change your resolution to 720 (not just the window) AND zoom to 2x (360x2=720). Etc.

VALO · August 30, 2023, 5:17am

Thank you for replying. I guess that could explain a part of the problem. But as I demonstrated, the distortion happens even when I never press F1. In fact, the distortion is much worse before pressing it.

But I’m not currently changing the resolution am I? I’m just changing the window size?

Also, the F1 set window size to 1280x720 works fine and doesn’t cause distortion as long as my zoom amount is divisible by 3:

So it sure seems like having 1080p resolution with 720 game window size can work (as long as the zoom amount is 3,6,9…)

I’m still very confused.
I’ll keep testing though. And I’ll experiment with this. Thanks

Silver-Streak · August 30, 2023, 6:49pm

Window size impacts canvas resolution (different than your native/internal and your rendered resolution) so scaling still happens and will have the same issues. Physically impossible to render 1080 width of pixels in a 720 pixel wide box, so the scaling math still has to happen.

This is also partially because you are using a non native scaling from native resolution to your new rendered resolution.

The distortions will still happen when you resize your game from 1080p to 720p, but as I mentioned you can avoid most of this by updating your zoom and resolution when you change the window size.

640x360 project resolution (we’ll call this native)in 640x360 window= native resolution, no zoom.

640x360 native resolution changed to 1080p resolution via events= your zoom should be 3x to match the pixel scaling you are doing on the native resolution. (1080/360=3)

640x360 native resolution changed to 720p resolution via events= your zoom should be 2x (720/360=2).

The pixels will appear to be the same size in all 3 scenarios if you were to display them on monitor that actual size, and any distortion should be eliminated.

Note: all of the above mean change the internal resolution via events to that. Not just the window size.

VALO · September 4, 2023, 3:21pm

Sorry I’ve been busy. I just read your explanation. Thank you for explaining these thing for me. I think I’m slowly starting to get it but there are still few things that I don’t fully understand.
_ _

How many different types of resolutions are there? Window resolution, canvas resolution, native resolution, internal resolution, rendered resolution, project resolution, game resolution. Which ones mean the same thing and what are they referring to (in simple terms)?
_ _

This part still confuses me. I understand that 720p is 75% of the 1080p size. But where does the 2 from “now scaled up to 2 pixels” come from? It’s because of the “2” zoom amount, right? Does zooming with for example the amount “3” then mean that each original pixel is made to be 3 pixels high and 3 pixels wide?
_ _

Here you mean that I can’t have my game resolution be 1080p and try to fit it in 720p game window without zooming, right? However I can go from game resolution 1080p to 720p game window if I zoom the correct amount (3) or if I change game resolution to be compatible with 720p window, right?
_ _

Lastly, what should I do if I think that my sprites are just a little too big in the game? I previously had my zoom to be 3, but later decided that the spires look too big and I need them to be just a little smaller (so the player can see more of the background at all times). That’s when I changed the zoom amount to be 2 and the distortion hit like a truck. I now understand that I can’t just simply zoom a little less…

You once said that having higher internal resolution should grant me “Smoother camera movement, Smoother object rotation and More positions for smoother tweened animations.” I’d like to keep those if possible…

Silver-Streak · September 9, 2023, 1:01am

I’ve been away at PAX and other obligations, but will give my best answer that I can.

“Resolution” types. Know that in most engines these are general terms and not “official”, so that’ll be true here. The below is all generalized so if people know the deeper GD5 technical impacts behind this feel free to chime in.

Project resolution - The resolution you set in your project properties.
Internal Resolution (sometimes also camera resolution) - The resolution actually being rendered by the engine. The amount of full pixel position coordinates it has available for calculations for like position, movement, rotation, etc. The higher the resolution here the smoother the movement will be because it has more positions to move to. This defaults to the project resolution above, unless you have the “Update resolution during the game to fit screen or window size” option checked, or you’ve changed the resolution via events. This limits your asset size/resolution visible on the screen, but does not guarantee how the graphics are displayed on your monitor.
Canvas Resolution (sometimes also windows resolution) - The resolution of the actually rendered graphics within the window. This is still true even when fullscreen. No matter what the above two res types are set to, this resolution is capped by your monitor and/or the size of the window.

Let’s ignore zoom for right now:
Even if your project and internal resolution are set to 1080p (1920x1080), if you have it in a window that is smaller than that, your graphics are scaled to fit that window. You still have 1920x1080 positions available for movement, but now your graphics are limited by whatever canvas/window resolution your window is set to.

Let’s talk about zoom:
When you zoom in on something, you’re simply scaling it upwards. It doesn’t make more details or modify the original assets, it just takes what was there and scales it by whatever zoom factor you have. This means if your original asset is 32x32 pixels, and you zoom 2x, those assets are now rendered at 64x64 pixels.

Let’s talk about combining the above:

You have your game assets designed to look a certain way at 640x360 and have your project resolution set to this. If you fullscreen this on a 1080p monitor, it scales up the canvas resolution 1:1 to fit, which is 3x larger. Your assets is now rendered as 96x96 pixels on your screen but takes up the same space as it would if you took a screenshot and then rescaled it to 1920x1080 in an image editor. Your internal resolution is still 640x360 so you do not have the additional coordinate positions you would get by changing to 1080p.

In your case, you instead are changing your internal resolution to 1920x1080 when fullscreened (so no scaling is happening to the canvas resolution). If you do not zoom at all, your asset now takes up a much smaller portion of the screen (because your canvas resolution has increased AND your internal resolution has increased, so the camera resolution is much further pulled out). You are only zooming in by 2x. This means the asset is now 64x64, which is an integer scale meaning that every 1 pixel is now zoomed to take up 2 pixels of space and visually looks appropriate.

You then change from fullscreen to a 720p window. Your internal resolution is unchanged, your zoom is unchanged. Your window resolution has changed to 1280x720, but the internal resolution is still 1920x1080, as is the zoom factor and graphical rendering. This means you’ve gone from 1x size at 640x360 to 2x size assets at 1920x1080, Now you’re asking it to take that 1080p asset and make it fit a 720p window (75% of 1080p). The only way for it to do that is take that 64x64 asset and try to render it as 48x48 (75% size) pixels (or inversely, take a 32x32 asset and make it 48x48), which is impossible to do since there’s no way for a monitor to render 2 pixels into 1.5 pixels. So the engine and your monitor try to do the closest it can by merging some pixels or stretching others. This leads to the distortion. If you had your zoom to 3x (96x96) when at 1080p, going to 75% size is 2x (64x64) which it can do as that’s a direct integer scale and no half pixels are needed.

If your graphics are not the size you want with direct integer scaling (3x zoom at 1080p, 2x at 720p), the only options would be: Redo your assets, live with the pixel distortion, or try to use linear scaling (which will cause a softening effect and still have distortion but less visible due to the softening)