Godot pixelated image

user_1591222 0
Viewed 59

Godot 2d project, I created at 640 640 png using Gimp. Imported those PNG's to Godot as texture(2d). After setting scale to 0.1, I resized those images to 64 x 64 in godot scene.

Image in my godot editor

When I initiate this image in my main scene, I get this pixelated disgusting result.

Initiatd Scene

Edit : Dont be confused with rotated red wings, I did it at runtime. Its not part of the question.

My window size is 1270 x 780 Stretch Mode is viewport.

I tried changing import settings etc.

I wonder is it not possible to have a sleek image in this sizes?

godot
2 Answers

Disclaimer: I haven’t bothered to fire up Godot to reproduce your problem.

I suspect you are shooting yourself in the foot by that scale 0.1 bit. Remember, every time you resample (scale) an image there is loss.

There are three things to do:

  1. Prepare your image(s) to have the same size (resolution) as your intended target display. In other words, if your image is going to display at 64×64 pixels, then your source image should be 64×64 pixels.

  2. When importing images, make sure that Filter is set to ☑ On. If your image contains alpha, you may also wish to check the Fix Alpha Border flag.

  3. Perform as few resampling operations as possible to display the image. In your particular case, you are resampling it to a tenth of its size before again resampling it up to the displayed size. Don’t do that. (This is probably the main cause of your problem.) Just make your sprite have the natural size of the image, and scale the sprite only if necessary.

It is also possible that you are applying some other filter or that your renderer has a bad resampler attached to it, but your problem description does not lead me to think either of these are likely.

user_27067070

A warning ahead: I'm not into godot at all, but I have some experience with image resizing.

Your problem looks totally related to pure image resizing. If you scale down an image in one go by any factor smaller than 0.5 (this means make it smaller than half its original size), you will face this effect of an ugly small image.

To get a nice and smooth result, you have to resize it multiple times: Always reduce the image size by half, until the next necessary step is bigger than scaling by 0.5. For your case (640x640 to 64x64) it would need these steps:

  • 640 * 0.5 => 320
  • 320 * 0.5 => 160
  • 160 * 0.5 => 80
  • 80 * 0.8 => 64

You can either start with a much smaller image - if you never need it with that big size in your code, or you add multiple scaled resolutions to your resources, or you precalculate the halfed steps before you start using them and then just pick the right image to scale down by the final factor.

user_28461380
Related