Question about scaling

Hi,

I already know how low-quality scaling works. But I would like to ask how screen scaling at high quality exactly works? Let's say i set windows size to 1280x720, but I know that many people will play full screen at 1080. So if I add a sprite, lets say 128x128 in dimensions, and on the layout I will scale it down to 64x64, when full-screened in high quality letterbox scale at 1080, is it first rendered at 64x64 and then upscale or is it scaled back to around its original dimension (128x128)? I'm asking about this because I would want to know how to approach to images quality.

Thanks!

They'll see the fullsize (128x128) in normal/full quality mode. The textures in memory don't change their size.

Cool! Thanks! So that means that in 1080 the sprite will be it's original size, so it remain as sharp as it was originally made out to be, but in 720 which is going to be game window it will remain scaled down. Is that right?

For easy description let's say the window size is 500x500 and you run in a browser window sized to 1000x1000. Low quality mode is simple enough: it renders at 500x500 then stretches the final result up to 1000x1000. If you add a sprite with a 128x128 image and scale it down to 64x64 in the layout, it will have lost detail, since it rendered at 64x64 to the unscaled canvas (at 500x500), which loses some of the image quality, then just stretches the result up.

High quality mode (i.e. what it's always done before r153) renders directly at the larger size (1000x1000). Since the view is now twice as big, if you draw the downscaled 64x64 sprite, it actually appears on the screen twice as big (at 128x128 again). Since it's rendering directly using the full resolution available, this means all the pixels of the original 128x128 sprite image appear with full detail. In other words, if you scale objects down in the layout then scale the view back up with a fullscreen mode, you get the detail back. In low-quality mode you lose the detail. Some types of games use a lot of downscaled sprites, so this can make a big difference to the visual appearance.

Ashley Fantastic! Thanks!

Here is a test I did with beta 153.

As a professional artist, I am extremely picky about how my images look. In fact, if one pixel is out of place, it bothers me. While it is not so big of deal on a rock or something, on a very small face it could be huge.

So, here is a comparison of pixel art I am working on for my first game. This is for a health bar and power-up.

I have labeled everything. On the left is low quality, and on the right is high quality.

Both are set to scale inner in Chrome using point sampling. Resolution is 540x960px. Low quality is fullscreen low quality and high dpi set to no. High quality is fullscreen quality to high and high dpi to yes.

I am using a 23" 1080p monitor with a nice, sharp picture. You may need to save the image and zoom in if you can't see the details.

A. This skull is full size, and is about 21x26px. As you can see, they are both the same either way.

B. Perfectly round objects are a bit of a problem when resized. This image has been downscaled from 40x40px to 32x32px in C2. Low quality has rougher edges and missing pixels. However, even in high quality mode the edges are rough and the pixels are squished.

The small square shows some missing pixel data and "squished" pixels for comparison.

C. This is a different image entirely with transparent edges to make it smoother. Again, the image was resized in C2. Low quality is obviously worse and has missing pixels as well, but even high quality suffers from squished pixels even though the edges are nicer.

D. This is the ball at full size. There is really no difference in either.

In conclusion, the only "safe" way I see to render pixel art is to keep everything at full size and simply draw it the correct size in your art program (I use photoshop cs5).

That's great example.

You know you could always do a couple of versions of your sprites: high res and lo res, yourself, and put them in to different animation frames, or use load image form url action to replace the sprites depending on resolution ( thought not sure if it would work since I've never used it yet )

Hmm, after doing another test with a couple more objects, it looks like there is still some distortion no matter what. It was more apparent with certain patterns.

Letterbox integer scale was the only option that was true to the pixel art with no distortion. But unfortunately, it is not really "full" screen since it has black bars at the top, bottom, and sides.

Every other way produced distortion to some degree. Pixels are either getting squished or stretched slightly. The effect is hard to notice, but it does look nicer without it.

Is there really no way to resize pixel art to full screen without distorting it?

DrewMelton

Unfortunately no. You can't get pixel-perfect upscaling without scaling to integer values. That's just the way LCD screen technology and C2 works. Sucks for pixel art because it tends to look cack with any distortion/interpolation going on.

The low quality mode should be settable by the user I think, so he only uses it when needed.

I think It is possible With the "Crop" fullscreen setting, and some events,to scale yourself only by integer values while having a "Scale outer" type of logic, but I am not sure how to do it exactly

After some experimenting, I have found out a few things.

The only way way to scale pixel art with no distortion is to scale it using a value of 2x, 3x, etc. also called an "integer" as ErekT said.

So, I tried this manually. I turned off full screen mode, set my window size to 740x416 (which is widescreen), and then on start of layout > set canvas size to 1480x832 (or 3x= 2220x1248).

That produced the same effect as letterbox integer scale, albeit with a gray box around the layout. The pixels looked perfect though.

Unfortunately, doing this does not allow for much play. It does not adjust to a screen size automatically. And since 2x is the lowest you can go, it does not have many uses. 3x is too big even for a 1080p monitor.

I don't think it'd be worth it since the result would not be different than letterbox integer scale anyway. Unless I'm wrong, of course.

I will do another quick test of letterbox integer scale on my laptop which is a lower res than my desktop, but ultimately, I think we will just end up using scale inner or some other mode that fits better to our monitor's resolution.

Letterbox integer scaling on my desktop looks okay, but the black bars all around are a bit blagging. I don't know if it's worth the trade off.

I guess at normal viewing distance, and with everything in motion, it would not be so big of a deal having some slight distortion. The picture is mostly intact, just with a few areas being a bit different. It's disappointing, but I guess there's nothing that can be done.

DrewMelton :

I tried something to have an "Integer scale outer" sort of thing in event, it need the Crop mode to be set for "fullscreen in browser", and to set the "Window Size" propriety into variables

This mode will scale only on integers values, a,d will display everything on screen instead of the black bars, not every game will be good with this, since this has the same drawback as scale outer (aka showing maybe more that what you want to show)

https://www.dropbox.com/s/ee55wideywbx5ch/Integer%20Scale%20Outer.capx?dl=0

Aphrodite

That's interesting. I'm going to play around with that a bit when I get some time.