Random beginner-question: scaling PNGs better bigger or smaller?

This site is currently in read-only mode during migration to a new platform.
You cannot post questions, answers or comments, as they would be lost during the migration otherwise.
+1 vote

Hi everyone,

I drew a circle in Paint and saved it as PNG. Looking good in Godot on 100% scale.

As I want to animate the thing including scaling smaller and bigger, I wonder if it's better to have the original generally loaded as asset at maximum size or on minimum.
It appears that scaling my circle smaller shows some ugly jittering whereas scaling bigger looks good (just a tiny little bit blurry at 2.0 - please see the attached picture).

scaling comparison
https://we.tl/t-opT29RfcnI

There are not too many of such little graphics in my mobile-project, so memory shouldn't be an issue, but I guess opting for the smallest versions would generally be favourable in that regard. Still, in my mind, scaling more pixel-material smaller rather than less bigger should lead to a better effect, shouldn't it? But my test obviously doesn't confirm that theory...

Can anyone tell me why Godot seems to scale bigger better than smaller? And should I really opt for the small original graphics?

Godot version 3.3
in Engine by (525 points)

1 Answer

+1 vote
Best answer

Select the texture in the FIleSystem dock, then go to the Import dock, enable Mipmaps and click Reimport to avoid aliasing when downscaling the image. This increases the memory cost by about 33%, but unless your texture is very large, it should be fine.

by (12,908 points)
selected by

Thanks for your input!

Diving deeper into this, I got intrigued by possible SVG supprt – real vector-scaling would be neat.

So I experimented, imported the same graphics both as PNG and SVG and set them side to site on display, both in those three scale-versions (original, 0.5 and 2.0). Then re-imported in all kinds of Filter/Mipmaps on/off combinations and compared both on monitor- as well as on mobile-screen.

With 1080x1920px the overall project-resolution generally is bigger than both displays – it's upright format, so not "turned 90°" on PC-monitor and the old phone isn't "Full HD".
However, my Test Width and – Height is exactly 50% of the project-resolution, which appears to lead to some smoothing and general "better looking" on display. With Test Resolution turned off I can obviously only see half of the project, but the test-results come "unconcealed". That's how I chose to test (while the automatic down-scaling on the phone-display always looks a bit better in that regard – I'm checking with a magnifying glass... ; ).

One thing is clear from the start: SVG doesn't import gradients, only one-colored fills, leaving any gradient-filled plane completely transparent.

  • Both Filter and Mipmaps off looks rather bad in all versions.
  • Mipmaps only on: no obvious change, still bad (although the non-scaled versions appear nice on the phone!).
  • Filter only on: much better for original- and upscaled-size, still bad for downscaled.
  • Both turned on: looking rather good in all versions, especially on the phone. On the 100% PC-screen there's an ever so slight blurriness in all versions though. I think the amount of blurriness is about the same in the upscaled and the downscaled versions, but it appears stronger on the small one, probably because, well, because it's smaller...

I couldn't make out any differences between PNG and SVG though.
(But I hear that graphics-import will be reworked in Godot 4.0, did I get this right?)

I think depending on the graphics to import it's always good to test case by case, but overall turning on both Filter and Mipmap seems like the way to go. Too bad SVG doesn't seem to offer any advantages (yet?).

by (525 points)

Think the trade off with SVG's are the size compared to PNG's because I've also noticed no significant differences and in some cases on mobile the PNG looked better during downscaling

by (6,942 points)

I thought so too, but in my tests the Import-filesize of both was exactly (!) the same, although the PNG was about four times more than the SVG.

by (525 points)

EDIT:

It may be worth mentioning that scaling the versions without Mipmaps (only Filter) a tiny little bit, say, 1.05, makes them appear smoother without appearing blurry.

This is, of course, no elegant workaround... but it reminds me of the strange problem I encountered with fonts: they sometimes appear weirdly jittered, but scaling them (even only 0.001) makes them look perfect.

I have no idea why these things behave that way.

by (525 points)

Interesting discovery. Very unusual but I confirmed your assumptions especially with SVG's

by (6,942 points)
Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.