• 2D

  • Sprite image loses quality when running the game

Hello! The image I use for the character sprite loses quality when I run the game.

Here is the difference between the image quality before and after hitting 'Play the project':

The images I am using for the sprite character are in PNG format.

How to solve this problem so that the image doesn't lose its quality when running the project?

Zoom. If you scale 2D graphics, especially pixel art and it isn't precisely by very specific multiples(such as 2x, 4x, 6x, 8x) then you get some visible blurring. In a sense the picture elements(pixels) don't perfectly line up with the display.

4 days later

It is strange to me that the image has a good quality in the editor, and a bad quality in the game.

I changed the image format of the sprite to be SVG, and had the same result:

The image in the editor has a better quality than the same image in the game.

In my game, if I make the character bigger, it will be too big. So before zooming it, I want to try other alternatives.

The SVG gets imported and converted into bitmap data, so yeah the same still applies.

The reason is that you're using a hiDPI display. The Godot editor is DPI-aware, but Godot projects aren't by default. Try enabling Allow Hidpi in the Project Settings, then set the stretch mode to 2d and stretch aspect to expand in the Project Settings.

@Calinou said: The reason is that you're using a hiDPI display. The Godot editor is DPI-aware, but Godot projects aren't by default. Try enabling Allow Hidpi in the Project Settings, then set the stretch mode to 2d and stretch aspect to expand in the Project Settings.

I applied all these settings.

I zoomed the image for the sprite, in PNG format, but there is still a slight difference in quality:

If the image is smaller, the difference is more pronounced. The same is for the SVG image.

The game is not running at native resolution. I'm looking at your editor, it says 66% zoom. So if both those images are the same, then the actual sprite should be twice or four times the size as it is in the second shot. Because it is being scaled down, and filtering is enabled, it is resampling the image and you will always lose some quality and add blur. So figure out why the game is not native resolution. It has nothing to do with the sprite.

For reference, the editor reads 66.7% zoom because you're using the editor at 150% display scale, but the actual zoom in the 2D editor is 100% (in terms of logical size). The logical zoom is divided by the display scale, and 100.0/150.0 is approximately equal to 66.7.

This behavior is similar to what most image editors do (such as GIMP). Web browsers also behave like this with regards to the zoom percentage displayed when you use <kbd>Ctrl + Mouse wheel</kbd>.

Even so, the sprite in the editor is noticeably larger than in the play window. So something is off.

You might want to force application scaling in the Windows exe compatibility settings for the game. This should not be needed (I've never had to do it) but I think that is a reasonable explanation, since your settings in Godot look correct and I assume you are using a 4K or high resolution monitor. So it is probably a Windows issue.

Actually yes, I am using 150% scale on my Windows display, and also 150% scale on Godot. I am using a laptop, with high resolution: 1920x1080, but the diagonal of the display is 15.6 inch, so if I would use the original 100% scale, it would be too small.

I reduced the Windows display scale to 100%, and noticed that this time, the image in the game is displayed perfectly.

But I can't use the original Windows display scale, because it's far too small.

So there is going to be some scaling no matter what. You can either use filtering (which will blur the image but be smooth) or use a stretch shrink, which will blow up the pixels but they will still be sharp. What is the native resolution of the game? Probably your best bet is the shrink with a test resolution, at least for development. When you ship the game, you have no idea what resolution or size monitor people are playing with (or their OS scaling settings) so unfortunately you might have to live with filtering and blurring for the best compatibility.

Or introduce some settings for users to adjust this for themselves.

Also, my Godot Super Scaling add-on can super sample into 2D. But I'd need to know more about your project to let you know if it will work. What is the resolution of your character sprite and what is the native resolution of the game?

The resolution of the game is 1920 x 1080, but I put this resolution in order for me to be more comfortable to visualise the size of various elements on my screen, and to adjust them if necessary. I have not yet thought about the final resolution or resolutions that will be available. For now, I am focusing on the prototype.

The resolution of the frame that I'm using right now is 891 x 856 px. The thing is that different frames have different resolutions. This is because I adjusted the border squares of the frames, like in this video:

I chose to not use the same resolution for different frame, because the character in every frame needs to be in the center of the sprite, and there are frames like this, that have a very large width (the width of this frame is 2036 x 871 px): If honestly, I don't know how it's better, to put all frames to be of the same size, or to live them like that.

Also, this sprite is for the prototype, so after the prototype will be finished, and if it will be enjoyable to play, or if it will need some improvements to be enjoyable to play, in other words, the idea will have potential, I will change the character sprite.

You can try my Godot Super Scaling add-on, it's available in the AssetLib within Godot. It should be able to make it a little more clear.

I tried the Godot Super Scaling add-on. Unfortunately, in my game, there is no difference between the image after installing the add-on and the image before the installation.

I suspect that this blurring only affects how I see the sprite from my device, which is scaled at 150%. It doesn't affect the game, does it?

One trick you can do is basically super sample your Sprite. So let us say the Sprite is 128 x 256 in the image editor. Well export at 256 x 512 in your drawing program (if you have a higher quality source asset). Then in Godot set the Sprite scale to 0.5, 0.5. This will be the same size, but it will become a little more clear. You also want to make sure you have filtering enabled on the image import properties.

I tried super sampling and unfortunately I didn't notice any difference. Then I tried the opposite: to export the image to half its size in the drawing program, and then to scale it properly in Godot. This trick didn't work either.

Have you considered making the game for 1080p (as this is the most common monitor size)? Using lower resolution for the game and scaling is only useful for low resolution pixel art, like Celeste. Your game has detailed art, so you want to author it at 1080p to get the best quality. This is precisely your problem.