How do I avoid terrible quality on scaled objects?

Get help using Construct 2

Post » Tue Dec 30, 2014 1:37 pm

Hi, all. I have noticed that when an objects gets scaled to quite a bit smaller than its initial size it suddenly gets a terrible downgrade in visual quality. Here's an example:
Problems.png


On the right we have the original objects at full size (256x256 pixels) and on the left the terrible, jaggy scaled versions. I have set all the scaling options in view to high:
Capture.PNG


Is there any way around this?

Also, the 2nd problem is also visible there - the HLS adjustment effect produces some terrible results when near the limit of hue - what causes this, is there a workaround?
You do not have the required permissions to view the files attached to this post.
B
19
S
6
G
7
Posts: 1,101
Reputation: 6,146

Post » Wed Dec 31, 2014 7:13 pm

It only does it for me in the editor. When I preview it looks nice and crisp. Could be a driver issue or just some differences in the way the editor draws and how the browser draws.

Sorry I can't help with the second issue. My graphics card can't handle that shader.
B
92
S
32
G
109
Posts: 5,294
Reputation: 70,999

Post » Wed Dec 31, 2014 7:19 pm

Thanks for your input, @R0J0hound.

I have noticed that it happens when one side becomes smaller than a certain amount - then, sort of like mip mapping in 3D graphics, the whole texture gets a lower res version. So, if height goes down to 16 and it switches to a 16px version then so does width (even if it's big, say 256px).

I was just wondering if there is some option to force better processing - but suppose it's up to the browser.

Which is a shame, since I'm trying to make an object editor and sudden loss of quality is a real problem. You can see it on the "turrets" here, for example:
Image
B
19
S
6
G
7
Posts: 1,101
Reputation: 6,146

Post » Wed Dec 31, 2014 7:47 pm

Scaling, up or down, will always introduce some form or visual degradation. There's no easy way around it, and it's directly related to signal processing theories, with aliasing, interpolation, convolution kernels used for filtering, etc. Also, it seems you're using non-uniform scaling, i.e. stretching, which increases the loss of quality from a perception point of view.

The best working practice is to author resources at the scale they will be displayed at runtime, or close to it ; it's true in both 2D and 3D - there's no reason to have a 256x256 resource to display a 32x32 sprite (which will probably lose the noticeable features and would require pixel art), just like there's no reason to have a 64x64 texture to display a full-screen character 3D model that would require a set of 1024+ textures. Filtering will lose important details and introduce artefacts.

In cases where the asset needs to support wildly different resolutions, usually it is recommend to author multiple sets of resources manually (or using a process that requires human interaction, to control/tweak/maximise the quality). In professional 3D games, certain various mip-levels for important textures are authored by an artist, and not just computed.

It is always possible to scale resources using more complex algorithms (e.g. larger spline-based kernels, etc.), but it quickly becomes too intensive for runtime usage and should be kept an offline process.
Image
Game Producer & Independent Developer - http://raphaelgervaise.com
B
24
S
9
Posts: 237
Reputation: 2,232

Post » Wed Dec 31, 2014 8:03 pm

@Refeuh - I'm well aware of possible degradation as we resize diagonals and such, but in this case it is clearly the whole texture being brutally downgraded.

As for the rest - as was mentioned the project is basically an editor - performance is a very secondary concern - output quality is primary. If I'm unsure of the results on different browsers/devices it's a problem. Suppose I could prepare smaller textures and load them per object size, but that would make adding new textures a pain.

Made a quick demo so you can see a typical usage scenario:
Image

Preview edit: Looks like imgur corrupted the gif, but that's actually better - you can see the pixellated edges on resize quite well.

Real edit: Added a more visible version: https://somebody.tinytake.com/sf/MzAwMTFfMjYwMzkw
Last edited by Somebody on Wed Dec 31, 2014 8:46 pm, edited 1 time in total.
B
19
S
6
G
7
Posts: 1,101
Reputation: 6,146

Post » Wed Dec 31, 2014 8:46 pm

interesting . this is the same thing im posting about on my thread anti-aliasing_t121770

I bet if you ran your app on a mac it would look great :)
Made Cosmochoria - www.cosmochoria.com
Currently working on Slayaway Camp - www.slayawaycamp.com
B
27
S
8
G
3
Posts: 384
Reputation: 5,020

Post » Wed Dec 31, 2014 8:51 pm

@80bit - your sprite looks a lot more pixellated, though - is it highly decreased in size?

Btw, your game looks quite ambitious and impressive, how's C2 treating you for a project of such scale?
B
19
S
6
G
7
Posts: 1,101
Reputation: 6,146


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 23 guests