actualContentWidth and actualContentHeight Problem

[jake72]

Hey guys, so I’m trying to write my app so that is is screen size independent, but am running into a problem. On the iPad I’m having trouble positioning things. I’ve noticed if I create a square that is 45x45 and put it at (display.actualContentWidth, 0), it is not there. But if I do display.actualContentWidth - 45, it does not show the full square. Additionally, if I print out display.actualContentWidth, it gives me 360. But as I knew it, the iPad is 768px wide. When I position things with display.screenOriginX + 45 it works fine, but when I add it to a scroll view with these options, it is not positioned correctly.

local scrollView = widget.newScrollView     {         left = display.screenOriginX,         top = display.screenOriginY,         width = display.actualContentWidth,         height = display.actualContentHeight,         bottomPadding = 95,         id = "onBottom",         horizontalScrollDisabled = true,         verticalScrollDisabled = false,         isLocked = false,         backgroundColor = {255, 255, 255, 0},     }

What am I missing?

[jake72]

Also, as far as I can tell, 340px seems to be the very edge of the display.

[roaminggamer]

Hi.  What kind of setup do you have in config.lua?

If you want your app to look the same on all devices and to fit all devices I’d use the “magic recipe” or derivative from this (old) article: http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/

** UPDATE **

Also, if you use letter box scaling, you may find this code useful:

\_G.w = display.contentWidth \_G.h = display.contentHeight \_G.centerX = w/2 \_G.centerY = h/2 \_G.displayWidth        = (display.contentWidth - display.screenOriginX\*2) \_G.displayHeight       = (display.contentHeight - display.screenOriginY\*2) \_G.unusedWidth    = \_G.displayWidth - \_G.w \_G.unusedHeight   = \_G.displayHeight - \_G.h 

I use the last two variables (unusedWidth/Height) to tell me how many extra pixels I have on the edges of the design space.  

For example if I design to 320x480, but the device is actually 640x1200, I will get these values:

unusedWidth == 0

unusedHeight == ( (1200/2) - 480 ) == 120

i.e. I have 120 extra pixels on the y-axis at my original design resolution.  I can then move objects up or down beyond the original y edges of 0 or 480 by as much as 60-pixels and they will still be visible.

[jake72]

@roaminggamer

Hi.  What kind of setup do you have in config.lua?

If you want your app to look the same on all devices and to fit all devices I’d use the “magic recipe” or derivative from this (old) article: http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/

** UPDATE **

Also, if you use letter box scaling, you may find this code useful:

\_G.w = display.contentWidth \_G.h = display.contentHeight \_G.centerX = w/2 \_G.centerY = h/2 \_G.displayWidth        = (display.contentWidth - display.screenOriginX\*2) \_G.displayHeight       = (display.contentHeight - display.screenOriginY\*2) \_G.unusedWidth    = \_G.displayWidth - \_G.w \_G.unusedHeight   = \_G.displayHeight - \_G.h 

I use the last two variables (unusedWidth/Height) to tell me how many extra pixels I have on the edges of the design space.  

For example if I design to 320x480, but the device is actually 640x1200, I will get these values:

unusedWidth == 0

unusedHeight == ( (1200/2) - 480 ) == 120

i.e. I have 120 extra pixels on the y-axis at my original design resolution.  I can then move objects up or down beyond the original y edges of 0 or 480 by as much as 60-pixels and they will still be visible.

I just have the default 320x480 with letterbox scaling. What I can’t figure out is why the actualContentWidth is 360, when the display cuts off at 340. Thanks for the code, looks useful.

[jake72]

By the way, corona now has it’s own content center constants. display.contentCenterX, display.contentCenterY.

[Joshua_Quick]

Everyone,
 
The properties display.actualContentWidth and Height return different values depending on the content scaling that you use.

• zoomEven: Returns the same values as display.viewableContentWidth and display.viewableContentHeight.  Note that one of these lengths can extend beyond the bounds of the screen.
• zoomStretch: Returns the same values as display.contentWidth and display.contentHeight.
• letterbox: Returns the content width and height, including the letterbox area.
• none: Returns the pixel width and height of the screen.

Note that the display.actualContentWidth and Height values are relative to portrait orientation and will not match the orientation of your app.  Our display.pixelWidth and Height properties are relative to portrait as well.

[roaminggamer]

@jake72,

1. I think Joshua’s last post answered the question behind the mystery value of 360

2. Thanks re: centers  I’ve been using the same code base for about 1.5 years now and never bothered to see if Corona had added any new display related variables.

3. I use the following very simple setup:

   application = {     content = {         width = 320,         height = 480,          scale = “letterBox”,         fps = 60,     }, } 

@Joshua,

Thanks for the extra details!

[jake72]

Also, as far as I can tell, 340px seems to be the very edge of the display.

[roaminggamer]

Hi.  What kind of setup do you have in config.lua?

If you want your app to look the same on all devices and to fit all devices I’d use the “magic recipe” or derivative from this (old) article: http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/

** UPDATE **

Also, if you use letter box scaling, you may find this code useful:

\_G.w = display.contentWidth \_G.h = display.contentHeight \_G.centerX = w/2 \_G.centerY = h/2 \_G.displayWidth        = (display.contentWidth - display.screenOriginX\*2) \_G.displayHeight       = (display.contentHeight - display.screenOriginY\*2) \_G.unusedWidth    = \_G.displayWidth - \_G.w \_G.unusedHeight   = \_G.displayHeight - \_G.h 

I use the last two variables (unusedWidth/Height) to tell me how many extra pixels I have on the edges of the design space.  

For example if I design to 320x480, but the device is actually 640x1200, I will get these values:

unusedWidth == 0

unusedHeight == ( (1200/2) - 480 ) == 120

i.e. I have 120 extra pixels on the y-axis at my original design resolution.  I can then move objects up or down beyond the original y edges of 0 or 480 by as much as 60-pixels and they will still be visible.

[jake72]

@roaminggamer

Hi.  What kind of setup do you have in config.lua?

If you want your app to look the same on all devices and to fit all devices I’d use the “magic recipe” or derivative from this (old) article: http://www.coronalabs.com/blog/2010/11/20/content-scaling-made-easy/

** UPDATE **

Also, if you use letter box scaling, you may find this code useful:

\_G.w = display.contentWidth \_G.h = display.contentHeight \_G.centerX = w/2 \_G.centerY = h/2 \_G.displayWidth        = (display.contentWidth - display.screenOriginX\*2) \_G.displayHeight       = (display.contentHeight - display.screenOriginY\*2) \_G.unusedWidth    = \_G.displayWidth - \_G.w \_G.unusedHeight   = \_G.displayHeight - \_G.h 

I use the last two variables (unusedWidth/Height) to tell me how many extra pixels I have on the edges of the design space.  

For example if I design to 320x480, but the device is actually 640x1200, I will get these values:

unusedWidth == 0

unusedHeight == ( (1200/2) - 480 ) == 120

i.e. I have 120 extra pixels on the y-axis at my original design resolution.  I can then move objects up or down beyond the original y edges of 0 or 480 by as much as 60-pixels and they will still be visible.

I just have the default 320x480 with letterbox scaling. What I can’t figure out is why the actualContentWidth is 360, when the display cuts off at 340. Thanks for the code, looks useful.

[jake72]

By the way, corona now has it’s own content center constants. display.contentCenterX, display.contentCenterY.

[Joshua_Quick]

Everyone,
 
The properties display.actualContentWidth and Height return different values depending on the content scaling that you use.

• zoomEven: Returns the same values as display.viewableContentWidth and display.viewableContentHeight.  Note that one of these lengths can extend beyond the bounds of the screen.
• zoomStretch: Returns the same values as display.contentWidth and display.contentHeight.
• letterbox: Returns the content width and height, including the letterbox area.
• none: Returns the pixel width and height of the screen.

Note that the display.actualContentWidth and Height values are relative to portrait orientation and will not match the orientation of your app.  Our display.pixelWidth and Height properties are relative to portrait as well.

[roaminggamer]

@jake72,

1. I think Joshua’s last post answered the question behind the mystery value of 360

2. Thanks re: centers  I’ve been using the same code base for about 1.5 years now and never bothered to see if Corona had added any new display related variables.

3. I use the following very simple setup:

   application = {     content = {         width = 320,         height = 480,          scale = “letterBox”,         fps = 60,     }, } 

@Joshua,

Thanks for the extra details!