Why do my 2D graphics and fonts look so awful?

Help
,
1

Godot Version

4.6

Question

I’m using some simple 2D graphics as a gauge in my HUD. The original graphic is Illustrator vector, exported to png at ~550px square. After importing to Godot, it is then scaled down to 0.25%.
I’ve also tried scaling the original down prior to importing and get the same result.

It looks pretty bad:

image
image326×214 18.8 KB

The text is a 2D label added in Godot and it also looks awful.
I’m using a ttf font, 60px. unscaled.

I’m planning on several graphics for my HUD, so I need to get a handle on how to do this properly.

I’ve tried setting MSAA 2D to 4x but it doesn’t really help.

Surely this is something that I’m doing wrong - can someone enlighten me?

2

They will work better if you export your PNG to the same size as you want in-game, otherwise you can enable mipmaps and a mipmap sampling technique. The way GPUs sample small textures will produce grainy artifacts, mipmaps will pre-generate smaller versions of your texture with better blending.

1 Like
3

Experiment with these settings in the Sprite2D inspector:

image
image615×204 3.71 KB

4

While some made the image worse, none looked better.

Maybe I need to change my design so there’s less contrast, i.e. no white against black particularly when a circle is used.

5

I’ve tried scaling down prior to importing (mentioned in my op) but the results are essentially the same.

6

they look fine to me i suppose, however, from the image it seems like the sprites were exported at a low resolution, and the fonts seem to be shrunk down, creating the blur effect.
What are the resolutions of the sprites and the actual project?

1 Like
7

Have you tried the other half of my message, enabling mipmaps for your texture and assinging “linear mipmap” to the node’s texture filter?

1 Like
8

Yes - I tried each of the Texture Filter and Repeat settings - some made the image worse, none looked better.

9

MSAA works only on polygon edges. It doesn’t smooth your gauge textures.

Avoid doing scaling in Godot without a very good reason. If you need 140x140 px texture in Godot, make a 140x140 px texture in whatever graphics editor you use. Don’t make overly large textures and then scale them down. You don’t get any extra details that way, you only get scaling artifacts.

10

Thanks - I’ve tried that (see op) and it makes no difference.

11

What are you window settings in Project Settings? Stretch mode, aspect, scale and scale mode? Are you sure you are not scaling everything to your window size? What happens when you resize the window?

12

the sprite res looks lower than the resolution of the text displayed, it seems the sprite resolution may be the issue; upscaling pixels doesnt make them smoother.

13

I see a lot of aliasing while the original is very smooth.

The image is 429x429, and is unscaled in Godot.
The project res is 1152x648

Here’s a couple screenshots from Godot.
This is the image scaled prior to importing to Godot and zoomed in showing smooth lines and clean fonts:

Snap1
Snap1581×475 40.7 KB

Here is the same image at 100%:

Snap4
Snap4378×316 34.7 KB

And here it is in the game preview mode (cropped from 1152x648):

Snap3
Snap3486×387 85.2 KB

Note that the fonts are particularly bad.

14

What does your scene tree look like?

15

For me it is still unclear where the image scaling is done. Show what the gauge texture looks in inspector. I’d like to see this view:

image
image590×437 17.6 KB

16

Here you go:

image
image408×312 14.2 KB

And for comparison, here it is in Photoshop and another image viewer, all at full size:

image
image999×518 32.3 KB

17

You are scaling the texture in Godot. Don’t do that. Resize that 429x429 px texture in Photoshop to the final size, which I guess is about 150x150 px. Or export the vector image from Illustrator using the final size.

18

Thanks, but I have done all of that and explained in this post.

Here’s another screenshot

image
image570×256 16.1 KB

19

Also, here’s one more showing how bad the fonts get.

Look at the numbers in particular:

image
image271×247 33.8 KB

Note: I’ve thickened the black outline, and changed the needle which helps a bit.

20

If you aren’t using a sub viewport/canvas group then that is the solution- match resolutions, do not scale. If you need to scale images down below half-resolution you should make use of mipmaps.

If you are using “Viewport” window settings that may prevent some solutions from working, same with a SubViewport.

What does your scene tree look like? Where does the scaling happen?

Here’s another topic on shrinking textures resulting in artifacts, the solution being mipmaps.

1 Like