Image resolution for Android devices.

Hi, all. :smiley:

I’ve already read the topics
http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/
and
http://www.coronalabs.com/blog/2011/01/27/dynamic-image-resolution-made-easy/
but I still don’t understand how to make my images fit to the different sizes of Android devices.

For now, I just want to develop apps for Android devices. Which size do I have to put on my images and what shall I do to make Corona fit my images automatically?

Thanks. [import]uid: 162818 topic_id: 32120 reply_id: 332120[/import]

Corona should fit them automatically for you already, the idea is that you just add additional images in higher/lower resolutions with a configured tag ie (background.png, background-x2.png) and my understanding and experience is that it will pick the best applicable resolution file for each phone.

Then all you do is just build for your default resolution, which I think is default 320x480, as long as you fit it in that resolution, all the other resolutions will work theirselves out.

To modify the defaults and configure the tags, I think its either in the configure.lua or build.lua file, theres usually a bit there thats commented out which should give a good start on how to go forward with it.

Jessica Newton
Lead Developer - Rose Covenant [import]uid: 168562 topic_id: 32120 reply_id: 127965[/import]

To also add a bit to my previous post, with the different resolutions it stretches the images to match. So, if your original resolution is 320x480 and you have a picture that is 50x50 in that screen, then going to a phone where the resolution is 640x960 your picture will automatically be stretched to 100x100.

This does mean that you experience a loss of precision though, so the idea is that you add multiple versions of your picture in say, 50x50, 100x100, 250x250. That way, when you go to the higher resolutions it’ll pick the most optimal image to stretch, thus the least amount of precision loss.

To achieve this, in the build/configure(can’t remember and not near my work comp at the moment), you set up the different size tags, which can pretty much be anything, so you could say @medium, @large etc I believe, then as long as you append those tags to the end of the filename and set the multiplication amount (theres a correlating number there).

Code would look something like this

imageSuffix =
{
["@medium"] = 2,
["@large"] = 5,
}

file names would be img.png, img@medium.png, img@large.png

To make clear those numbers, original image: 50pixels
img@medium.png: 100 pixels (2 x original)
img@large.png: 250 pixels (5 x original)

As you can see, the numbers are the multiplications from the original image.

I think that covers everything, hopefully it helps.

Jessica Newton
Lead Developer - Rose Covenant [import]uid: 168562 topic_id: 32120 reply_id: 127968[/import]

Ah! I think I got it. As soon as I build my app, I’ll take a look what the automatically “resizer” does. I’ve not built my app for testing yet, so I haven’t experienced that feature of Corona as well.
My doubt came when I saw that when I change the iPhone 4 simulator (320x480) to Nexus One, the black bars let my app so ugly. :stuck_out_tongue:

Thanks, @jessxgirl. I’ll try that. :smiley: [import]uid: 162818 topic_id: 32120 reply_id: 128017[/import]

Corona should fit them automatically for you already, the idea is that you just add additional images in higher/lower resolutions with a configured tag ie (background.png, background-x2.png) and my understanding and experience is that it will pick the best applicable resolution file for each phone.

Then all you do is just build for your default resolution, which I think is default 320x480, as long as you fit it in that resolution, all the other resolutions will work theirselves out.

To modify the defaults and configure the tags, I think its either in the configure.lua or build.lua file, theres usually a bit there thats commented out which should give a good start on how to go forward with it.

Jessica Newton
Lead Developer - Rose Covenant [import]uid: 168562 topic_id: 32120 reply_id: 127965[/import]

To also add a bit to my previous post, with the different resolutions it stretches the images to match. So, if your original resolution is 320x480 and you have a picture that is 50x50 in that screen, then going to a phone where the resolution is 640x960 your picture will automatically be stretched to 100x100.

This does mean that you experience a loss of precision though, so the idea is that you add multiple versions of your picture in say, 50x50, 100x100, 250x250. That way, when you go to the higher resolutions it’ll pick the most optimal image to stretch, thus the least amount of precision loss.

To achieve this, in the build/configure(can’t remember and not near my work comp at the moment), you set up the different size tags, which can pretty much be anything, so you could say @medium, @large etc I believe, then as long as you append those tags to the end of the filename and set the multiplication amount (theres a correlating number there).

Code would look something like this

imageSuffix =
{
["@medium"] = 2,
["@large"] = 5,
}

file names would be img.png, img@medium.png, img@large.png

To make clear those numbers, original image: 50pixels
img@medium.png: 100 pixels (2 x original)
img@large.png: 250 pixels (5 x original)

As you can see, the numbers are the multiplications from the original image.

I think that covers everything, hopefully it helps.

Jessica Newton
Lead Developer - Rose Covenant [import]uid: 168562 topic_id: 32120 reply_id: 127968[/import]

Ah! I think I got it. As soon as I build my app, I’ll take a look what the automatically “resizer” does. I’ve not built my app for testing yet, so I haven’t experienced that feature of Corona as well.
My doubt came when I saw that when I change the iPhone 4 simulator (320x480) to Nexus One, the black bars let my app so ugly. :stuck_out_tongue:

Thanks, @jessxgirl. I’ll try that. :smiley: [import]uid: 162818 topic_id: 32120 reply_id: 128017[/import]