Understanding Letterbox Scalling

Solar2D General Questions/Discussion
#21

Regarding letterbox scaling - if you move stuff in and out of the area you define and there are borders, you may not want them to be visible. A quick hack I did to hide this is a function located here:

You call it (passing a { r=, g=, b= } table should you wish to set hte colour) and it will return either false (which means no borders were needed) or a display group containing bars that block the area you wouldn’t normally see.

http://pastebin.com/w2x90vUT [import]uid: 46639 topic_id: 23200 reply_id: 111447[/import]

#22

So for a all around iOS and Android build, the aspect ratio of 360 x 570 is correct? I read on the old “Content Scaling Made Easy” post to do 380 x 570. Which do you guys suggest?

http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/ [import]uid: 19620 topic_id: 23200 reply_id: 113948[/import]

#23

If you follow the instructions on this post 360x570 is all that is needed. If you make your images 380x570 you will never see those extra pixels in any device available today. There’s no harm in using it, it’s just wasted work. [import]uid: 61899 topic_id: 23200 reply_id: 113952[/import]

#24

Ok thank you for the reply, just trying to wrap my head around this for my new app i’m working on. So if I am only wanting to really do image resolutions for iphone 4 and above… would you think that doing a set of 720x1140(for iphone 4 and ipad) and 1440x2280 (for ipad 3) would be good? [import]uid: 19620 topic_id: 23200 reply_id: 113953[/import]

#25

If you don’t plan on supporting 16:9 or 16:10 resolutions you can make your images 360x480 or multiples of that. That’s all that’s needed for all the current iOS devices available. Note that the rumors say the next iPhone will have a 16:9 aspect ratio so if you plan on supporting it you should use the recommended image sizes. The benefit of that is that you will gain almost automatic Android support. If you only plan to support high resolution devices you can do as you say and make the base resolution 720x1140. [import]uid: 61899 topic_id: 23200 reply_id: 113957[/import]

#26

Ok, so I DO want to support 16:9 resolutions. My app is landscape so lets say I do 1140x720, what I don’t understand is that according to an aspect ratio calculator, that is a 19:12 aspect ratio. Is that the same ultimately as 16:9?

http://andrew.hedges.name/experiments/aspect_ratio/ [import]uid: 19620 topic_id: 23200 reply_id: 113960[/import]

#27

Don’t worry about calculating exact aspect ratios. There is no need, but if you do it’s best to use the division result to visualize the aspect ratio e.g. 16:9 = 1.77777, 4:3 = 1.3333. The great thing about this technique is that you will never see black bars no matter what the actual aspect ratio of the device is. One very important part of this is that you MUST use 480x320 (or multiples of it) as the display with and height in your config.lua. When I have time I’ll make a detailed blog post explaining exactly what’s going on.

PS: There are actually some limitations on what aspect ratios are supported with the recommended 1140x720 resolution, but anything whose aspect ratio is between 1.333 and 1.78 will work perfectly.

PS2: You never see the whole (fullscreen background) image on any device available today so calculating the image’s aspect ratio won’t do anything for you. On devices with wider screens you won’t see the bottom and top parts of the images, and on devices with shorter screens (3:2, 4:3) you won’t see the sides of the image. [import]uid: 61899 topic_id: 23200 reply_id: 113964[/import]

#28

Ok I think I understand, I am just having hard time deciding the resolutions of my images that I should do. I am creating a storybook app, so the majority of the images are images that will cover the entire screen all the time. Isn’t there a way to do this so that only the sides of the image gets cut off depending on the device? (Rather than what you said in PS2 about how sometimes the top and bottom might get cut off, other times the sides might)

So according to what you are saying, if I want to support all devices, then I will need some “bleed out” areas both on the sides of my image and on the top and bottom as well? [import]uid: 19620 topic_id: 23200 reply_id: 113967[/import]

#29

You understood correctly. There is no way around the fact that you need to fill all the bleed out areas with non-important parts of the image. Don’t worry that you won’t lose all that much although it may seem like it judging by the numbers. Just setup a basic work image with some guides so you can visualize your safe area. If you’re using 720x1140 that means 40 pixels both on top and on the bottom and 90 pixels on the sides.
Your other option to make sure that there is no bleed area is making sets of images for different screen aspect ratios and all the associated code, but that would mean a lot of work, not to mention the maintenance work would also increase exponentially. If you find a better solution let me know because I would really like to see it :slight_smile: [import]uid: 61899 topic_id: 23200 reply_id: 113968[/import]

#30

I see, I think it finally clicked in my head. Just curious, does corona even support the older iphones now? Just wondering if I really should consider creating images for a really low resolution such as 480x320? Seems like hardly anyone has the older iphones now… Would 1140x720 run well on the iphone 4? or should i try to get a resolution that is more exact to what it displays?

EDIT: haha sorry I just realized… its exactly what you said. 90 from each side and 40 from top and bottom would put 1140x720 at 960x640… BING!

PS: Although I want the app to ultimately be for iOS and Android. For the iOS build only, couldn’t I then export all my images from illustrator at 960x640? (leaving behind the bleed area) and for the Android build I would use the full 1140x720? [import]uid: 19620 topic_id: 23200 reply_id: 113971[/import]

#31

:wink: Great! It’s much easier to visualize once you set it up!

I think you may have a point with the older iPhones. Right now the only one supported is the 3GS (and iPod touch 3G maybe?), but it won’t be upgraded to iOS 6, so the last supported version will be 5.1.1, although Corona itself supports down to 4.3. The low resolution images don’t add all that much to the final package size, but it all depends on how much potential customers you are willing to lose. If you find that the number of active 3GS devices is low enough to not worry you then go for it.

Answer to PS: No because you would lose iPad and (possibly) next iPhone support. [import]uid: 61899 topic_id: 23200 reply_id: 113973[/import]

#32

Ah thats right… Sorry to take so much of your time, you have been of great help! Now to get to work, I for sure have a ‘better’ understanding of this now. Might be worth while for someone to create a sample project that has the correct config as well as correct example code with correctly sized image files. Maybe I will do that if I can get this figured out tonight… [import]uid: 19620 topic_id: 23200 reply_id: 113976[/import]

#33

@rxmarccall - If you do the “sample” you said above, I will say WOW for you! :slight_smile:

PS: Sincerely that would be of so much help (for me and others here in the community for sure).
Thanks anyway!

Cheers,
Rodrigo. [import]uid: 89165 topic_id: 23200 reply_id: 113990[/import]

#34

Alright so I finally started to get his figured out, I made a quick demo app for anyone that is interested, it is extremely simple but it at least shows how it should be setup and includes some demo images to help you understand what corona is doing. Here is a download link:

https://www.dropbox.com/s/mmlfxont1uo5oqj/UniversalBuildSkeleton.zip

I was going to add it to GitHub, but I couldn’t figure out how to set it up… I’m a noob with it.
Let me know if thats helpful at all. [import]uid: 19620 topic_id: 23200 reply_id: 114147[/import]

#35

@rxmarccall ,

Hey mate, a word for you: WOW!

I highly appreciate your effort and sure your time on making this sample code real! :wink:

PS: What a nice community we have here isn`t it? Look the team: @CluelessIdeas first wrote an amazing Forum Post about the “Letterbox Scalling” and @rxmarccall after brainstorming at it, just built an great sample code for all of us - The CoronaSDK Community - understand it even better e use it widely!

+1 for you guys!
Cheers,
Rodrigo. [import]uid: 89165 topic_id: 23200 reply_id: 114162[/import]

#36

No problem, it took me just a few minutes to put together. Yea the Corona community is a good one, there has always been helpful people around since day one for me. [import]uid: 19620 topic_id: 23200 reply_id: 114199[/import]

#37

Perfect. That’s exactly it.

As a small optimization you might try to squash or resize your images to the nearest power of two dimensions after exporting them to png or jpg. Usually doesn’t impact image quality all that much and could save a lot of ram. Since you’re using newImageRect they will be expanded to fill the rect dimensions. This is most effective on images that are less important like a background that is covered in some areas by other images.

Example:
resize 570x360 to 512x360 - will save 256KB of texture memory (1MB on @2 images, 4MB on @4) [import]uid: 61899 topic_id: 23200 reply_id: 114203[/import]

#38

hi
[text] i creaded app in corona for iphone in that app i worte some like that[/text]

imageSuffix = { ["-x2"] = 2, ["-x4"] = 4,--ipad3 }
[text] for dynamic image Resulation and like that i want to know what procedure for android build the same project and i want know one more thing that is we mention any premission in build.settings file any thing for android did u explain to me[/text] [import]uid: 91542 topic_id: 23200 reply_id: 115139[/import]

#39

hi peach pellen
[text] i creaded app in corona for iphone in that app i worte some like that[/text]

imageSuffix = { ["-x2"] = 2, ["-x4"] = 4,--ipad3 }
[text] for dynamic image Resulation and like that i want to know what procedure for android build the same project and i want know one more thing that is we mention any premission in build.settings file any thing for android did u explain to me[/text] [import]uid: 91542 topic_id: 23200 reply_id: 115140[/import]

#40

You should post about this in the Android sub forum, this thread is about understanding letterbox scaling.

There is a blog post about suffixes and sizes too.

You shouldn’t need to add any permissions to build.settings for Android. [import]uid: 52491 topic_id: 23200 reply_id: 115347[/import]