0 Favourites

How do I avoid terrible quality on scaled objects?

  • 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:

    [attachment=1:1cb2nnqe][/attachment:1cb2nnqe]

    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:

    [attachment=0:1cb2nnqe][/attachment:1cb2nnqe]

    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?

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • 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.

  • 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:

  • 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.

  • 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:

    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

  • interesting . this is the same thing im posting about on my thread

    I bet if you ran your app on a mac it would look great

  • 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?

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)
Similar Topics Posts Views Last Post
Unread hot topic
99 10,152
karshinkoff's avatar
karshinkoff
Unread hot topic
167 14,513
DMT2005's avatar
DMT2005
Unread hot topic
63 14,094
blackhornet's avatar
blackhornet