Remove blurry png/svg inskape - Godot?

0 votes

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.

https://imgur.com/C68s1mJ

https://imgur.com/a/N674WkL

https://imgur.com/mDApXk0

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?

Godot version 3.3.2
in Engine by (156 points)

1 Answer

+1 vote
Best answer

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.

by (12,835 points)
selected by

Thanks for the info! I will check it.

by (156 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.