Help with Dynamic Scaling and Content Pane

[Robert_Burns]

So no matter what I try, I cannot seem to figure out the content pane and dynamic scaling. I’ve tried the codes from both turotials supplied on the website and other tricks to get it to work. I just can’t seem to find the resolution I need for all sizes. Either my picture gets cut off and so do my buttons, or there is a black box above and below my images on the tablets. I can get my images to work with a few of the phone settings, but not all of them. Can anyone tell me what I’m doing wrong? I’ll provide sample code below.

-- calculate device aspect ratio local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 400 or math.ceil( 600 / aspectRatio ), height = aspectRatio \< 1.5 and 600 or math.ceil( 400 \* aspectRatio ), scale = "letterbox", fps = 30, -- image size would be 400x600, 800x1200, and 1600x2400 imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 4.0, } }, } print( aspectRatio, application.content.width, application.content.height )

and here is code from my main:

local sFooter1 = display.newImageRect("mainMenu/homebutton\_hudleft.png", 713, 450) local sFooter2 = display.newImageRect("mainMenu/homebutton\_hudright.png", 713, 450) sFooter1.x = 50 sFooter2.x = 550 sFooter1.y = 220 sFooter2.y = 220 sFooter1.alpha = 0 sFooter2.alpha = 0 transition.to(sFooter1, {time = 2000, alpha = 1, x = 355}) transition.to(sFooter2, {time = 2000, alpha = 1, x = 355, onComplete = uiLock})

Can anyone tell what I’m doing wrong?

[rob]

In your config.lua you are creating a content area that is 400 points wide and 600 points tall.  If your app is landscape, then your content area is going to be 600 x 400.

Regardless of your @2x, @4x or base images, you are loading sFooter1 by creating an image that is 713 points wide and 450 points high.  If your app is landscape, this image is bigger than your entire content area.  Now of course, depending on the device, it’s likely going to either be wider or taller than your content area, but without knowing  what device you’re emulating on, it’s just speculation.  Also you’re creating sFooter2 at the same size.

Then you center each of them, one at x = 50 and the other at x = 550.  Both are positioned 220 points from the top of the content area.  Given the size of the image, its likely the image’s are too big for what you want to do.

Rob

[Robert_Burns]

Arent the images required to be bigger than the content area to count act the bleed affect when switching to different devices? I’ve tried images smaller than the content area and it still doesn’t scale properly. It was doing it on all devices so I agree with you that they are too big. So I guess a better question is if the image is smaller than the content pane, can it be scaled to all devices? If it fits on a Galaxy S3, is it possible for it to fit on ipad?

[bjsorrentino]

Hi @rburns629,

With the “letterbox” scale setting, there will be no bleeding… the content area will be confined to the screen, and the letterbox bars will represent the space outside of the content area. As such, you’d need to either make the images larger or find some other way to fill the letterbox regions with visual content.

Bleeding will occur if you use the “zoomEven” scale mode, so in that case, you wouldn’t need to make the images larger.

The following guide has a useful diagram on what each scale mode does, and how it affects bleeding:

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

Hope this helps,

Brent

[rob]

In your config.lua you are creating a content area that is 400 points wide and 600 points tall.  If your app is landscape, then your content area is going to be 600 x 400.

Regardless of your @2x, @4x or base images, you are loading sFooter1 by creating an image that is 713 points wide and 450 points high.  If your app is landscape, this image is bigger than your entire content area.  Now of course, depending on the device, it’s likely going to either be wider or taller than your content area, but without knowing  what device you’re emulating on, it’s just speculation.  Also you’re creating sFooter2 at the same size.

Then you center each of them, one at x = 50 and the other at x = 550.  Both are positioned 220 points from the top of the content area.  Given the size of the image, its likely the image’s are too big for what you want to do.

Rob

[Robert_Burns]

Arent the images required to be bigger than the content area to count act the bleed affect when switching to different devices? I’ve tried images smaller than the content area and it still doesn’t scale properly. It was doing it on all devices so I agree with you that they are too big. So I guess a better question is if the image is smaller than the content pane, can it be scaled to all devices? If it fits on a Galaxy S3, is it possible for it to fit on ipad?

[bjsorrentino]

Hi @rburns629,

With the “letterbox” scale setting, there will be no bleeding… the content area will be confined to the screen, and the letterbox bars will represent the space outside of the content area. As such, you’d need to either make the images larger or find some other way to fill the letterbox regions with visual content.

Bleeding will occur if you use the “zoomEven” scale mode, so in that case, you wouldn’t need to make the images larger.

The following guide has a useful diagram on what each scale mode does, and how it affects bleeding:

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

Hope this helps,

Brent