How do I size images?

You use a text editor to open your main.lua.  Depending on what platform you are on, there are pre-installed options, and you can get other 3rd party editors.

If you’re on Windows, the default is Notepad.  If your on a Mac, its TextEdit for the built in free option.  There are other options like Notepad++ for Windows or TextWrangler for the Mac that are free.  Then there are some for-pay options that work on both platforms like Sublime Text 2 and are highly recommended.

Rob

Thanks man, it helped me a lot  :smiley:

Can I ask why you use those resolutions for your images? I made some 360x 480, 640x960 & 1280,1920

Hi Mark.

When you are trying to build for Android, you will quickly find that a) they don’t use any Apple screen sizes for the most part.  You will also find that Android device makers don’t maintain any sense of resolution or even aspect ratio.  They kinda get close with something close to 16:9, but they are all off just a hair.   Most developers want apps to fit perfectly.

But if you think in generalities, there are four common shapes.  The more square/wide iPads with an aspect ratio of 4:3 (1.33:1).  The traditional iPhone at 3:2 (1.5:1), the 7" Android tablets at 1.6:1 and the tall 16:9’ish devices.  If you want a single background image that works on all shaped devices, it has to be tall enough to cover the tall devices and wide enough to cover the wide devices.

If you use the in-the-middle 4:3 as your base, like many people do (i.e. 320x480), then the 4:3 at the same scale is 360x480.  Then if you think about what is needed for the 16:9’s, to keep the scale the same as the 320x480 size, then you need a 320x570.  So to have one image to rule them all:  360x570.  Then for larger screens like the iPad 2, iPhone 4, Kindle Fires, etc. you want a bigger image, many people chose to double that to 720x1440.  Then for the Retina iPads, and high def android devices, people will double that again to 1440x2880.

But the key thing is a term called “bleed”.  Part of the background will be off screen depending on the device, but it will fully fill the screen.

Hi Rob,

Thanks a lot for your reply, been trying to find an answer I follow on that subject for ages.

Just a few more questions though if that’s okay.

With the bleed effect then I assume its best not to put any specific graphics down the side of the images, because on some phones they will show proplery and others they will not?

Also just so I can get my head round the idea completely. My phone is the HTC One which I believe has a 1136x640 (or 1920x1080??) (16:9) resolution. So the program uses the config file width and height calculation to choose which image to display. Is there info on what resolution the corona simulator uses? I see the Droid version is quite a low 320x570 but the device I test on is higher. I assume that even if the config file detects a higher reso on your device, but only the low res images are included in the build, it will default to those?

Thanks again for your feedback

The Corona simulator screen size is based on the skin you choose.  If you want a 1920x1080 skin, you can pick one of the GameStick or Ouya skins.  Those are as generic as you can get for that size.  And they also have a 1280x720 version too.  You can use the iPhone 5 skin to simulate the 1136x640 size.

Yes, with a background that bleeds,  you have to assume that some of the top and bottom edges may get trimmed on some devices and on some other’s its the left and right sides that get trimmed off.  Look at this image:

bleedarea.png

On an iPad you will get the blue and yellow areas.  The red and green will be cut off.

On a 16:9 device you will get the Red and Blue area and the yellow and green will be cut off.

On a 3:2 device like the old iPhones and other 320x480 shapes you get the blue area only.

Assuming your background is centered of course.

hey how would I do this on iPad RJ??

the code I posted at the top works on all iOS devices, if you have those 3 images at those sizes it will work on iPhone 4 or 5, or iPad/iPad Retina

YO WASUP I’m back after forever I did that built it on my device and black bars bottom and top

what device is it that your getting it on? iPhone 5 by any chance??

Yeah I am putting it on my iphone 5 and the black bars are on top and bottom

make sure you have a Default-568h@2x.png splash file so that you ios knows to use the iphone5’s “tall mode”

have a read of point 3 on this page http://coronalabs.com/blog/2012/09/19/faq-wednesday-iphone-5-and-ios-6/

Where do I put that??

Oh never mind ok I’ll try that when I’m home from school looks like it should work thanks!

Noob, help another noob out, please. 

I cannot even open my main.lua file.

What program do you open it in?

You use a text editor to open your main.lua.  Depending on what platform you are on, there are pre-installed options, and you can get other 3rd party editors.

If you’re on Windows, the default is Notepad.  If your on a Mac, its TextEdit for the built in free option.  There are other options like Notepad++ for Windows or TextWrangler for the Mac that are free.  Then there are some for-pay options that work on both platforms like Sublime Text 2 and are highly recommended.

Rob

Thanks man, it helped me a lot  :smiley:

Can I ask why you use those resolutions for your images? I made some 360x 480, 640x960 & 1280,1920

Hi Mark.

When you are trying to build for Android, you will quickly find that a) they don’t use any Apple screen sizes for the most part.  You will also find that Android device makers don’t maintain any sense of resolution or even aspect ratio.  They kinda get close with something close to 16:9, but they are all off just a hair.   Most developers want apps to fit perfectly.

But if you think in generalities, there are four common shapes.  The more square/wide iPads with an aspect ratio of 4:3 (1.33:1).  The traditional iPhone at 3:2 (1.5:1), the 7" Android tablets at 1.6:1 and the tall 16:9’ish devices.  If you want a single background image that works on all shaped devices, it has to be tall enough to cover the tall devices and wide enough to cover the wide devices.

If you use the in-the-middle 4:3 as your base, like many people do (i.e. 320x480), then the 4:3 at the same scale is 360x480.  Then if you think about what is needed for the 16:9’s, to keep the scale the same as the 320x480 size, then you need a 320x570.  So to have one image to rule them all:  360x570.  Then for larger screens like the iPad 2, iPhone 4, Kindle Fires, etc. you want a bigger image, many people chose to double that to 720x1440.  Then for the Retina iPads, and high def android devices, people will double that again to 1440x2880.

But the key thing is a term called “bleed”.  Part of the background will be off screen depending on the device, but it will fully fill the screen.

Hi Rob,

Thanks a lot for your reply, been trying to find an answer I follow on that subject for ages.

Just a few more questions though if that’s okay.

With the bleed effect then I assume its best not to put any specific graphics down the side of the images, because on some phones they will show proplery and others they will not?

Also just so I can get my head round the idea completely. My phone is the HTC One which I believe has a 1136x640 (or 1920x1080??) (16:9) resolution. So the program uses the config file width and height calculation to choose which image to display. Is there info on what resolution the corona simulator uses? I see the Droid version is quite a low 320x570 but the device I test on is higher. I assume that even if the config file detects a higher reso on your device, but only the low res images are included in the build, it will default to those?

Thanks again for your feedback