[SOLVED](Aspect ratio/image quality) avoiding pixelized images

Hello everyone,
I am having a hard time understanding why my image are pixelized.
I need to admit I have little understanding of aspect ratio and pixel density.
aspect ratio, litterally is the ratio of width/height (FYI as I like to work in portrait the ratio would be height/width).
ok so what? that doesn’t change the fact images made for 160x100p screen will be pixelized and look awful on a 1600x1000p screens.
the other concept I read about, but I still don’t seem to understand is the pixel density. I just don’t understand how to make use of the informations on for images not being pixelized on any kind of screen.
And I refuse to believe that it is not possible to have sexy pictures on any screens with openfl, this API is just well too awesome not to.
I know you guys might have read about those things and being practicing for like 10 years,
but I just wanted to make games as I have been a gamer whole my life. and I started learning almost 10 months ago with Openfl.
so there are plenty of things I have no clues about.

now it is the quality of the images are bugging me more and more, I can’t barely look at my games.

Any help will be welcomed really.

If you scale your image by 10, to get from 160x100 to 1600x100, then each pixel will become 10x10 pixels. Which is why you get a really pixelized look.

Even with a non-naive scaling algorithm getting a good result at 2x is not easy, so 10x is not possible.

You should do the art for the maximum resolution you want to support, and scale down if the screen is smaller.

Or you could go with vector graphics, which don’t have these problems.
https://github.com/openfl/swf

1 Like

You can also use the “smoothing” Bitmap property, which can make things look better (though it may still look pixelly if you upscale much)

thanks @ibilon for your fast response:

I have an app based for a 600x800 that looks neat on galaxy trend plus(galaxy gt s7580) which has a size of 480x800(~233 ppi pixel density) but on galaxy note 10.1, it is all pixelized while the tablet has a size of 800x1280(~149 ppi pixel density), and I don’t even want to think about a galaxy s6 users

the reason I gave the example of scaling 10 times is because of the samsung galaxy s6, 1440x2560(~577 ppi pixel density). Like my Gosh, why do we even need that much pixels for anyway!

thus, I had resorted on using svg files a while ago. I am making my svg with inkscape but unfortunately the images are not being reproduced as they are in inkscape.

So If I get it right having many pictures for different screen size is the thing to do.

Having images grouped according to ratio, and have sub categories which depends on the screen size itself.
In order for the app to check which is the mobile screen ratio or closest ratio, and under it look for the closest screen sizes.
And if the images size is just close and not exactly equal, we use a smoothing like @singmajesty said.
Furthermore to avoid useless memory use,(for the app not to load the other assets), a load request to a server is the thing to do.
Is that right?

If files are included in your project, they are not automatically loaded into memory, but it will increase the download size of your project. Including local assets is certainly simpler than downloading. It’s really up to you :slight_smile:

1 Like

Oops I thought, they were automatically loaded into memory, my bad…
Thanks you guys like a lot.