SOLVED with update: Image Quality for large images in app

Edit: Wow. The latest stable release of Gdevelop really fixed the image problem. I can put in large and small size images, png or jpeg and they look 100 times better than they used to. Thanks.

Hi. I’m still having troubles with image quality.

The reason is because I’m using large images (200x200 px) that are really used in a static context rather than sprites.
I’m having trouble getting consistent clarity.
I’ve followed many of the tips from the forum but because I want a larger image rather than a sprite I’m wondering if there is something else I can try, whether it be some JavaScript or something else.

Do I need to tweak DPI?
Does the ratio really matter?
Do I need to make the camera respond to different screen sizes?

Cheers
Mikey

I don’t think so, I want to believe PIXI handles it :neutral_face:

Yes, a lot!, If you make your screen size 800x100 (very width), and try to render it in a (non-existing) 100x800 screen phone you’ll get the graphics stretched horizontally with factor 1:8, and stretched vertically with a factor 8:1, and that’s just awful.

Yes and no, you “have” to do it but GD gives you a big hand, check the project settings, you can set if the game should be played in landscape or portrait (avoiding the previous error), also you can set the camera size to adapt to the device size, this way your camera will change its aspect ratio (and you can decide if it will modify the width or height) to display your graphics in fullscreen without stretching at all :slight_smile:

You can use big images, 4ian recommends not to use images bigger than 2048, smaller than 1024 is ideal, and if you need big images for background chunk the big image into smaller ones.

Thanks Lizard.

With ratio, I meant the ratio of the image. So should it be something like 64x64?’

When you say it is best for images to be smaller than 1024, do you mean under 1024 x 1024?

And for screen ratio, if I’m designing for a phone that is 1440 x 2560, should I not create a camera size that big, but make it smaller first and then let it stretch bigger?

Thanks so much for your help. I’m doing a lot of trial and error it is so helpful when people like you tell me what’s what.

Cheers

You can use any size / aspect ratio, people say that pow-of-2 textures will work faster (because GPU things) but I guess it won’t be noticeable in small 2D games.

Aha :slight_smile:

A bigger camera size may help to get more definition, but not sure. 1440x2560 is 9:16, which is very common, you could set the project size to 1080x1920 and it will render without stretching or changing size, because 1080x1920 is 9:16 too. But if you run this game in 3:4 screen phones the camera will change the size a bit, it will pass from 9:16 to 3:4, and to do it it will have to reduce the width or increase the height:


Here, the blue rectangle is the original 16:9 camera, if you render it in a 16:9 screen phone the user will see this area. But if you play it in a 4:3 you’ve three options:

  • Don’t change camera size > The visible area will be the same, but you’ll get blank borders in the top and bottom, the borders would be the difference between the green and blue rectangles, these borders at the top and bottom.
  • Change camera width > Decrease the camera width to get a 4:3 ratio, the red rectangle
  • Change camera height > Increase the camera height to get a 4:3 ratio, the green rectangle

If you change the camera size, which is the area the user will see, you have to take that visible area into account, look at the image, if you change the camera width the 4:3 user will have the horizontal vision decreased, in this example he/she won’t be able to see an enemy that should be visible, it’s a big disadvantage. If you change the camera height the user will have an advantage, he/she will have an increased vertical visibility, in the example able to see others part of the map (underground), maybe discovering secrets, etc.

Of course, you always have the option to stretch the graphics, in this case it will stretch the game vertically, the image inside the blue rectangle is stretched to fill the green one, the same visible are to the user but a bit ugly.

Hope that helps :slight_smile:

Thank you, Lizard. So helpful.

I think after testing everything out, I think GDevelop scales images up (on larger screens) better than it scales images down.