Remove blurry png/svg inskape - Godot?

Archive
1
:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Pelli

Hi I have 2 years developing with Godot and I never achieved a good assets quality in my games. At first I tried making pngs whit Photoshop but the quality was not good when importing to Godot. Now I am trying Inskape but again, blurry images I got. Especially, border of images, I never could get a good smooth border like in any game. I make mobile games and if you look clearly to my games you can see pixelated borders, so I am trying to fix that.

Imgur

[Album] imgur.com

What I tried:

-Disabling filter: looks more awful without it.
-Disabling/Enabling Mipmaps: no visible change
-Disabling/Enabling Anisotropic: no visible change
-Changed from .svg to .png: no visible change.
-Changed compress mode: a little worst change
-In .svg I tried changing the scale property when importing it, it look better changing scale from 1 to 5, but only when the image is big, if I need a small image the borders are awful
-in .png options when exporting from inskape I tried changing resolution like my bubble is 100px * 100px and changing it to 1000px * 1000px, is the same that avobe.
-Exporting to iOS/Android looks always eequal that in the Godot Debugger.
-So I tried changing scale from import settings, from godot inspector settings and I have always the same results

¿So How I can make a simple small image smooth?

2
:bust_in_silhouette: Reply From: Calinou

When previewing in the 2D editor, you need to make sure you’re viewing the scene at 100% zoom. Otherwise, it’s expected that 2D assets will look pixelated or blurry unless they were scaled down (which is not recommended as it wastes memory).

If your artwork has thin borders, you need to make sure it doesn’t scaled down too much in Godot. Otherwise, the border will pretty much disappear, which looks bad. This is not exclusive to Godot – it’s general art design good practice to ensure your borders are always thick enough.

To avoid issues with rounded edges looking “wobbly”, you need to make sure your image’s transparent pixels have the same color values as the opaque pixels. For instance, if opaque pixels use the color #ffffffff (RGBA), transparent pixels should have the color #ffffff00 (RGBA), not #00000000 (RGBA). If you use a PNG optimizer, configure it to avoid discarding color values from fully transparent pixels.

Thanks for the info! I will check it.

Pelli | 2021-07-29 01:42