Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Understanding Letterbox Scalling
Started by RicardoGraca Mar 12 2012 03:03 AM

- - - - -
91 replies to this topic
[TOPIC CONTROLS]
Page 2 of 4 1 2 3 4
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#26

rxmarccall

[GLOBAL: userInfoPane.html]
rxmarccall
  • Contributor

  • 751 posts
  • Corona SDK

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/
uid: 19620 topic_id: 23200 reply_id: 113960


[TOPIC: post.html]
#27

RicardoGraca

[GLOBAL: userInfoPane.html]
RicardoGraca
  • Contributor

  • 190 posts
  • Corona SDK

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.
uid: 61899 topic_id: 23200 reply_id: 113964


[TOPIC: post.html]
#28

rxmarccall

[GLOBAL: userInfoPane.html]
rxmarccall
  • Contributor

  • 751 posts
  • Corona SDK

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?
uid: 19620 topic_id: 23200 reply_id: 113967


[TOPIC: post.html]
#29

RicardoGraca

[GLOBAL: userInfoPane.html]
RicardoGraca
  • Contributor

  • 190 posts
  • Corona SDK

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 :)
uid: 61899 topic_id: 23200 reply_id: 113968

  • elifares likes this

[TOPIC: post.html]
#30

rxmarccall

[GLOBAL: userInfoPane.html]
rxmarccall
  • Contributor

  • 751 posts
  • Corona SDK

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?
uid: 19620 topic_id: 23200 reply_id: 113971


[TOPIC: post.html]
#31

RicardoGraca

[GLOBAL: userInfoPane.html]
RicardoGraca
  • Contributor

  • 190 posts
  • Corona SDK

;) 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.
uid: 61899 topic_id: 23200 reply_id: 113973


[TOPIC: post.html]
#32

rxmarccall

[GLOBAL: userInfoPane.html]
rxmarccall
  • Contributor

  • 751 posts
  • Corona SDK

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...
uid: 19620 topic_id: 23200 reply_id: 113976


[TOPIC: post.html]
#33

@RSCdev

[GLOBAL: userInfoPane.html]
@RSCdev
  • Corona Geek

  • 1,489 posts
  • Corona SDK

@rxmarccall - If you do the "sample" you said above, I will say WOW for you! :)

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

Cheers,
Rodrigo.
uid: 89165 topic_id: 23200 reply_id: 113990


[TOPIC: post.html]
#34

rxmarccall

[GLOBAL: userInfoPane.html]
rxmarccall
  • Contributor

  • 751 posts
  • Corona SDK

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.
uid: 19620 topic_id: 23200 reply_id: 114147


[TOPIC: post.html]
#35

@RSCdev

[GLOBAL: userInfoPane.html]
@RSCdev
  • Corona Geek

  • 1,489 posts
  • Corona SDK

@rxmarccall,

Hey mate, a word for you: WOW!

I highly appreciate your effort and sure your time on making this sample code real! ;)

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.
uid: 89165 topic_id: 23200 reply_id: 114162


[TOPIC: post.html]
#36

rxmarccall

[GLOBAL: userInfoPane.html]
rxmarccall
  • Contributor

  • 751 posts
  • Corona SDK

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.
uid: 19620 topic_id: 23200 reply_id: 114199


[TOPIC: post.html]
#37

RicardoGraca

[GLOBAL: userInfoPane.html]
RicardoGraca
  • Contributor

  • 190 posts
  • Corona SDK

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)
uid: 61899 topic_id: 23200 reply_id: 114203


[TOPIC: post.html]
#38

saravanan.vbe

[GLOBAL: userInfoPane.html]
saravanan.vbe
  • Observer

  • 6 posts
  • Corona SDK

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]
uid: 91542 topic_id: 23200 reply_id: 115139


[TOPIC: post.html]
#39

saravanan.vbe

[GLOBAL: userInfoPane.html]
saravanan.vbe
  • Observer

  • 6 posts
  • Corona SDK

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]
uid: 91542 topic_id: 23200 reply_id: 115140


[TOPIC: post.html]
#40

peach pellen

[GLOBAL: userInfoPane.html]
peach pellen
  • Corona Geek

  • 8,866 posts
  • Alumni

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.
uid: 52491 topic_id: 23200 reply_id: 115347


[TOPIC: post.html]
#41

dkmac79

[GLOBAL: userInfoPane.html]
dkmac79
  • Observer

  • 9 posts
  • Guests

this is interesting but a bit outdated?

has anyone an update for this including the new high res devices like galaxy s3, galaxy nexus, ipad(3) etc.
uid: 12368 topic_id: 23200 reply_id: 116075


[TOPIC: post.html]
#42

chris.l.frederick

[GLOBAL: userInfoPane.html]
chris.l.frederick
  • Enthusiast

  • 35 posts
  • Corona SDK

I am using this setup see a strange bug(?) in the simulator on landscape oriented projects; pick a device like the droid or kindle, then attempt to "tap" on an object to trigger an event. When the object is located in the "non-safe" zone on the right hand side the event won't fire. Seems to work on the left non-safe side...

config.lua
application =
	{
		content =
		{
			--zoom
			width =  320,
			height = 480,
			scale = "letterbox",
			xAlign = "center",
			yAlign = "center",
			fps = 60,
			imageSuffix = {
				["@2x"] = 1.5, 
			}
		},
	}	

build.settings
settings = {
	orientation = {
		default = "landscapeRight", 
		supported = { "landscapeRight","landscapeLeft", "landscape"},
	},

	iphone =
	{
		plist =
		{
	        CFBundleIconFile = "Icon.png",
	        CFBundleIconFiles = {
	           "Icon.png", 
	           "Icon@2x.png", 
	           "Icon-72.png", 
	        },
		},
	}
}
uid: 60707 topic_id: 23200 reply_id: 116399


[TOPIC: post.html]
#43

RicardoGraca

[GLOBAL: userInfoPane.html]
RicardoGraca
  • Contributor

  • 190 posts
  • Corona SDK

@dkmac79 It isn't outdated. The fundamental principle of this approach will never be outdated unless something changes in Corona in regards to content scaling. If you aren't going to develop for lower resolution devices you can change the base resolution specified in config.lua if you want, as long as you understand how and why change it.

@chris.l.frederick You are correct and it appears to be a bug. AFAIK this has been present for a very long time. I still haven't investigated fully if it's possible to develop a workaround because I usually don't need to catch touch events in the affected area.
uid: 61899 topic_id: 23200 reply_id: 116491


[TOPIC: post.html]
#44

dkmac79

[GLOBAL: userInfoPane.html]
dkmac79
  • Observer

  • 9 posts
  • Guests

of course the principle is not "wrong" just wanted to know if someone has an update that includes newly introduced devices.

for example i have difficulty to get 1280res devices into the equation because the base size of the would then be 640*380 which is a lot bigger than 480*320 and there fore worries me a bit that the sd devices have to load a lot bigger textures than their screen size and the correlated memory usage.. especially since those SD devices usually come with lower ram amounts than newer devices
uid: 12368 topic_id: 23200 reply_id: 116508


[TOPIC: post.html]
#45

RicardoGraca

[GLOBAL: userInfoPane.html]
RicardoGraca
  • Contributor

  • 190 posts
  • Corona SDK

If you want to target mainly 16:9 devices with a display width of 1280 then you have to change the base resolution to an appropriate value, but I'm assuming by your questions that you still don't fully understand what's going on here. You don't need to change anything to support newer higher resolution devices unless these devices are your main target for development in detriment of other devices. You always have to make a choice of what will be your central device resolution and aspect ratio, and that's why the standard 3:2 aspect ratio of the iPhone was chosen. First it sits right in the middle of the other more common aspect ratios (4:3 and 16:9 or 10, or whereabouts) and second it is a very popular aspect ratio. You really have to forget about resolutions and start thinking in terms of aspect ratios. It appears that you are mixing content scaling and dynamic image resolution which is achieved by having different assets for different content scales (the @2 suffix stuff).
rxmarccall did a great job deconstructing all of this and creating a working example to start developing from. See his comments above.
uid: 61899 topic_id: 23200 reply_id: 116510


[TOPIC: post.html]
#46

dkmac79

[GLOBAL: userInfoPane.html]
dkmac79
  • Observer

  • 9 posts
  • Guests

i fully understand the principle.. and of course i am mixing scaling and dynamic image resolution because you surely won't want to have an sd bg full blown (put perfectly scaled) onto the ipad3.. because that would look horrible..

so its a mix between the principle of letterbox scaling in sync with offering the best texture sets for each "resolution" range

since you want to reach optimal image quality for as much devices as possible.. from sd iphone, to retina iphone over to similar resoluted android devices over to high-res retina like 1280 devices over to the ipad3 with its extremely high resolution..

and its not as trivial as it sounds to get the optimal solution here, because scaling an item only based on resolution ignores the size of the screen and therefore the actual dpi used.. which can easily lead to micro "button" or huge "buttons" or game elements or whatever you use..

especially considering all the rumors that the iphone 5 might be a 16:9 device (which would very well in most uikit based app) its not that easy..

of course this is also heavily dependent of the game.. knifflig :)

since you don't want to scale your sd assets up to the full hd and beyond.. you would want to have texture sets who take over at certain resolutions/ content scales to offer the best image quality
uid: 12368 topic_id: 23200 reply_id: 116514


[TOPIC: post.html]
#47

rxmarccall

[GLOBAL: userInfoPane.html]
rxmarccall
  • Contributor

  • 751 posts
  • Corona SDK

@dkmac79
You will not see "micro" or "huge" buttons when trying to support device resolutions across the board. When you create an image with "display.newImageRect", you set the width and height of the image to be displayed. No matter what size the true resolution is of the image file in your project directory, it will be forced to display at the width and height you specify with "display.newImageRect". Have you read this blog post really well? http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/
uid: 19620 topic_id: 23200 reply_id: 116524


[TOPIC: post.html]
#48

dkmac79

[GLOBAL: userInfoPane.html]
dkmac79
  • Observer

  • 9 posts
  • Guests

of course the dpi of the screen plays a vital role how "big" an actual pixel is and therefore how big an image is shown.. for example a button..

an tablet with a resolution of 1280*800 and a phone with the same resolution would load the same assets and use the same scaling factor which therefore would end up with either small or huge buttons , elements etc.

not?

uid: 12368 topic_id: 23200 reply_id: 116545


[TOPIC: post.html]
#49

RicardoGraca

[GLOBAL: userInfoPane.html]
RicardoGraca
  • Contributor

  • 190 posts
  • Corona SDK

Correct. This has been asked before and I think it's a known feature request. So far the only way of knowing the actual screen size of a device is with a table of devices with the required information. I have a table with some of the more important ones, but of course it isn't as accurate as having that information being read from the actual device. I have a lot more devices to add to that list but I haven't had the time to do it.

Here are some resources related to the issue you mention:
http://developer.coronalabs.com/code/device-metrics-scaling-based-screen-size
http://developer.coronalabs.com/code/android-screen-sizes-and-names-list
https://github.com/cluelessideas/Android-devices-list
uid: 61899 topic_id: 23200 reply_id: 116602


[TOPIC: post.html]
#50

chris.l.frederick

[GLOBAL: userInfoPane.html]
chris.l.frederick
  • Enthusiast

  • 35 posts
  • Corona SDK

@CluelessIdeas
Thanks for confirming I'm not crazy. It is a pretty frustrating bug. I'm hoping it does not occur on the actual device, but I'm not optimistic. I do use all the touch surface I can get in several of my apps...

@Ansca / Peach is there anything we can do to help get this issue fixed? Maybe some sample code that reproduces the issue?
uid: 60707 topic_id: 23200 reply_id: 116629



[topic_controls]
Page 2 of 4 1 2 3 4
 
[/topic_controls]