[Solved] Image resolution

I am trying to improve the resolution of my game objects and am currently struggling with strange pixalation of image.

To understand the issue better, I used the game icons used in the game example: Platformer. Ensured that the project settings, including resolution etc. are same.

Then I insert the same joystick image used in the game to my game, changed all properties to match the object in the example game, but the difference is evident as below:

Left image is from my project, right one is from the example game (platformer). I verified that the properties for both objects are similar, yet I am not able to achieve the image smoothness/sharpness/clarity available with the example game.

I am clueless as to how to fix this issue. Any help is appreciated.

There’s an option for this for each image under Game Settings > Resources. Click on the image in the list, and make sure the “Smooth the image” option is set.

Yes, tried that too! Doesn’t seems to make any difference to the image.

Did you change the image at some point using piskel? Because if so, piskel does not support alpha and therefore it will disappear from your image if you save it. The result is this pixelation around the image.

TrinityNeo, complementing @MrMen answer, see in the properties the option in Scale mode if the Linear (antialiased rendering, good for most games) option is chosen

1 Like

@Rasterisko: I investigated the issues from this angle too. To remove any chances of image distortion, I used the exact same image from Platformer example WITHOUT changing anything. In fact I have not edited the image outside/inside GDevelop. I have tried deleting the object completely, creating a new one with the exact same image, but the issue remains unresolved.

The game properties for both the games are exactly same. Please see the below screenshot. Left image is of my game property; right one is of Platformer game property.

I did some tests here using the Platformer example. I can only reproduce this pixeled button like yours if I save the image using Piskel. In my printscreen are two different objects with different images. The left object saved using piskel (without any change, I just opened the image and saved), and the right object the original image:
image

I think you could try to copy the image from Platformer example and save over the button image that is in your game. My suspicion is that at some point you opened piskel, clicked save to exit, and you don’t remember. :thinking:

Phew! I tried that too. If opening the image in Piskel is causing the issue, why the image in the Platformer example is not getting pixelated when I open/save it using Piskel?

I noticed that when you open the button from the Platformer example, it is set as 1x for original size preview. See below:

I tried changing my image to to the same setting, but it is not at all clear compared to what we have in Platformer example. Not sure what secret ingredient GDeveloper team has used to create that icon that I still have to discover :slight_smile:

It is pixelated in your printscreen. Piskel removed the alpha around your button, but inside it doesn’t look pixelated because the image doesn’t have those pixels from inside with altered alpha. It’s just pixels with different colors doing the antialising effect. Your image with button opened with piskel looks exactly the same compared to your first image of the button in your game. It is more difficult to perceive in the piskel because the background is also gray like the button, whereas in your game the background is dark green (or blue).

Edit:
For you see the pixelated after open and save with piskel in Platformer Example you need preview the game. It’s because Gdevelop don’t upload the images in animation tab or in the scene editor If you change them and save over. They will upload in animation tab and scene editor just if you close and reopen Gdevelop.

You could make what I oriented. Just open a new Platformer Example, save the project, go to the files and copy the image button and paste to your game and remove the old pixelated image.

Thank you @Rasterisko: That worked for me perfectly! I closed GDevelop, did the image replacement via Windows explorer and then opened the project. However, I am still not convinced that such changes should be done OUTSIDE Gdevelop.