Crop graphics in bleed area above and below scrollView in letterbox 320x480

Solar2D General Questions/Discussion
#1

Screenshot speaks volumes.

On 16:9 format etc screens, what’s the easiest way to crop or cover the stuff you see sticking out above and below the “320x480” area?

This is my first app, so I’d like to keep it simple and have black borders above the top of the pinstripe background and below the tab bar.

I’d like to achieve this without adding black rectangles last in the createscene for each view. Is there a crop setting or a way to create rectangles once at the start in main.lua?

(p.s. Tried to upload my non-special config.lua, but I wasn’t allowed. Wouldn’t it be good to allow that?)

#2

Hi @henrik5,

Honestly, I would suggest that you use the entire screen instead of masking or filling the “empty” areas.

In fact, if you mask/hide the empty areas, Apple might reject your app entirely because it doesn’t utilize the entire iPhone5 screen. Since May 1, they are apparently being very strict about this, and other vendors like Amazon are doing the same (potentially rejecting apps that don’t use the entire screen on Kindle devices).

Corona makes it quite easy to manage different screen aspects. When you say that it “will not upload your non-special config.lua”, can you specify what is happening? The config file always gets bundled with the application build, and if you set it up correctly, it will work on the device(s) too.

Although there are various scale options for dynamic scaling in Corona, many users prefer the “letterbox” or “zoomEven” scale methods. You can use those, find the exact “empty space” outside the content area, and then push your content out to the very edge of the screen, no matter which device you’re running on… this would be ideal for the screenshot you exhibit, since logically your button bar should be flush against the screen’s bottom edge.

Hope this helps,

Brent

#3

The forum upload here for attaching files to posts doesn’t allow the .lua file suffix.

I haven’t found any scale methods except the two you mention. What others are there?

I didn’t find anything on why the image is centered vertically automatically in the “Content scaling made easy” tutorials, but I might have missed something. What should I have in config.lua instead to put the tab bar flush to the bottom, the rest of the content to start at the top and not vertically centered, with aspect ratio being preserved? Just a link to the correct scaling to get Iphone apps approved would do me. :slight_smile:

Is this a reliable way to make an exception for Iphone 5 in the config.lua? (I seem to have read there are sometimes problems with determining screen dimensions from device, but maybe that’s only outside config.lua?)

#4

Hi Henrik,

The available scale modes are: “letterbox”, “zoomEven”, and “zoomStretch”. Previously we allowed “none” but that was deprecated some time ago. I generally don’t recommend “zoomStretch”, but some people use it when the situation calls for it.

Everything is documented here:

http://docs.coronalabs.com/guide/basics/configSettings/index.html

Anyway, you can’t directly put some content top-aligned, other content bottom-aligned, etc… at least not in the config.lua file. When you want to position things flush against a screen side on all devices, you need to use “offset” values to accomplish it. Those numbers will vary depending on your scale selection and content size, but they can be dynamically calculated by Corona (you don’t need to put them in as static values).

In terms of the config.lua file, have you read this tutorial? If not, please read it and maybe it’ll help:

http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Regards,

Brent

#5

Hi @henrik5,

Honestly, I would suggest that you use the entire screen instead of masking or filling the “empty” areas.

In fact, if you mask/hide the empty areas, Apple might reject your app entirely because it doesn’t utilize the entire iPhone5 screen. Since May 1, they are apparently being very strict about this, and other vendors like Amazon are doing the same (potentially rejecting apps that don’t use the entire screen on Kindle devices).

Corona makes it quite easy to manage different screen aspects. When you say that it “will not upload your non-special config.lua”, can you specify what is happening? The config file always gets bundled with the application build, and if you set it up correctly, it will work on the device(s) too.

Although there are various scale options for dynamic scaling in Corona, many users prefer the “letterbox” or “zoomEven” scale methods. You can use those, find the exact “empty space” outside the content area, and then push your content out to the very edge of the screen, no matter which device you’re running on… this would be ideal for the screenshot you exhibit, since logically your button bar should be flush against the screen’s bottom edge.

Hope this helps,

Brent

#6

The forum upload here for attaching files to posts doesn’t allow the .lua file suffix.

I haven’t found any scale methods except the two you mention. What others are there?

I didn’t find anything on why the image is centered vertically automatically in the “Content scaling made easy” tutorials, but I might have missed something. What should I have in config.lua instead to put the tab bar flush to the bottom, the rest of the content to start at the top and not vertically centered, with aspect ratio being preserved? Just a link to the correct scaling to get Iphone apps approved would do me. :slight_smile:

Is this a reliable way to make an exception for Iphone 5 in the config.lua? (I seem to have read there are sometimes problems with determining screen dimensions from device, but maybe that’s only outside config.lua?)

#7

Hi Henrik,

The available scale modes are: “letterbox”, “zoomEven”, and “zoomStretch”. Previously we allowed “none” but that was deprecated some time ago. I generally don’t recommend “zoomStretch”, but some people use it when the situation calls for it.

Everything is documented here:

http://docs.coronalabs.com/guide/basics/configSettings/index.html

Anyway, you can’t directly put some content top-aligned, other content bottom-aligned, etc… at least not in the config.lua file. When you want to position things flush against a screen side on all devices, you need to use “offset” values to accomplish it. Those numbers will vary depending on your scale selection and content size, but they can be dynamically calculated by Corona (you don’t need to put them in as static values).

In terms of the config.lua file, have you read this tutorial? If not, please read it and maybe it’ll help:

http://www.coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Regards,

Brent