Question about scaling

Discussion and feedback on Construct 2

Post » Sat Dec 07, 2013 12:54 am

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!
My professional Royalty Free Music at Scirra Assets Store
--------------------------------
Specs: i5 2500, 16gb of ram, gtx 770, win 7, Focusrite Scarlett 8i6, Mackie mr8mk2, Alesis 320, browsing the net on chrome.
B
93
S
30
G
22
Posts: 1,987
Reputation: 20,203

Post » Sat Dec 07, 2013 2:03 am

They'll see the fullsize (128x128) in normal/full quality mode. The textures in memory don't change their size.
B
152
S
75
G
21
Posts: 1,795
Reputation: 23,285

Post » Sat Dec 07, 2013 2:04 am

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?megatronx2013-12-07 02:24:39
My professional Royalty Free Music at Scirra Assets Store
--------------------------------
Specs: i5 2500, 16gb of ram, gtx 770, win 7, Focusrite Scarlett 8i6, Mackie mr8mk2, Alesis 320, browsing the net on chrome.
B
93
S
30
G
22
Posts: 1,987
Reputation: 20,203

Post » Sat Dec 07, 2013 12:15 pm

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.
Scirra Founder
B
402
S
238
G
89
Posts: 24,613
Reputation: 195,993

Post » Sat Dec 07, 2013 8:59 pm

@Ashley Fantastic! Thanks!
My professional Royalty Free Music at Scirra Assets Store
--------------------------------
Specs: i5 2500, 16gb of ram, gtx 770, win 7, Focusrite Scarlett 8i6, Mackie mr8mk2, Alesis 320, browsing the net on chrome.
B
93
S
30
G
22
Posts: 1,987
Reputation: 20,203

Post » Sat Dec 07, 2013 9:33 pm

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).DrewMelton2013-12-07 21:36:09
B
82
S
30
G
35
Posts: 340
Reputation: 23,071

Post » Sat Dec 07, 2013 10:03 pm

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 )
My professional Royalty Free Music at Scirra Assets Store
--------------------------------
Specs: i5 2500, 16gb of ram, gtx 770, win 7, Focusrite Scarlett 8i6, Mackie mr8mk2, Alesis 320, browsing the net on chrome.
B
93
S
30
G
22
Posts: 1,987
Reputation: 20,203

Post » Sun Dec 08, 2013 7:23 am

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?
B
82
S
30
G
35
Posts: 340
Reputation: 23,071

Post » Sun Dec 08, 2013 8:15 am

@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.
B
40
S
16
G
6
Posts: 543
Reputation: 7,649

Post » Sun Dec 08, 2013 1:30 pm

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
Game design is all about decomposing the core of your game so it becomes simple instructions.
B
54
S
22
G
18
Posts: 2,123
Reputation: 17,150

Next

Return to Construct 2 General

Who is online

Users browsing this forum: sydtes and 1 guest