Why is there always black spaces?

http://prntscr.com/cf2x8m

 local right = display.newRect(sceneGroup,display.contentWidth,display.contentCenterY,1,display.contentHeight) local left = display.newRect(sceneGroup,0,display.contentCenterY,1,display.contentHeight) local top = display.newRect(sceneGroup,display.contentCenterX,0,display.contentWidth,1) local bottem = display.newRect(sceneGroup,display.contentCenterX,display.contentHeight,display.contentWidth,1)

This should cover the entire screen but it always have a black box on the sides

I assume it has to to with my letterbox scaling?
How do other people deal with this?

display.actualContentWidth and display.actualContentHeight are the width and height of the actual screen in letterbox mode.

display.contentWidth, display.contentHeight return the values you set in config.lua. Nothing more. It has nothing to do with the actual screen shape.  As @steve262 points out, display.actualContentWidth, display.actualContentHeight get you the real values for your screen.

The default is that the 320x480 content area (3:2 or 1.5:1 aspect ratio) fits on all screens. Most all phones today are 16:9 (1.7777778:1) aspect ratio where an iPad is a 4:3 (1.25:1).  The result is the 320x480 content area will have some extra space beyond the 480 pixels. These are the black bars you’re seeing. A 16:9 screen translates to an actual area of 320x570 (568 on iPhone 5’s). This gives you 45 pixels of extra space on either side of the content area.  The default for config.lua is to center this 320x480 box inside of the 320x570 box (or for an iPad a 320x480 box inside a 360x480 box). 

The typical solution is to create a background larger than the defined content area and large enough to fill the screens regardless of their shape. There are very few screens thinner and narrower that 16:9 phones. There are no devices more square than the iPad. So if you consider that works out to 570 and 360, if you build your backgrounds to that size and load it using display.newImageRect( filename, 570, 360), depending on the device some of it will be off screen, but on all devices the black area will be filled.

Then you can use various techniques to position things. Your background cannot have any artwork on it critical to the UI around the edges since it might not be on screen. You have to have things like the background for the score as separate art pieces positioned based on the screen shape.

Rob

How could I find the actual 0,0 location?

On a phone using 320x480 landscape, 0, 0 is 45 points (44 points on the iPhone 5, 6) in from the left edge and flush with the top.  On an iPad 0, 0 would be flush left with the screen but be 20 points down from the top.

But that’s what display.screenOriginX and display.screenOriginY give you.

Rob

I assume it has to to with my letterbox scaling?
How do other people deal with this?

display.actualContentWidth and display.actualContentHeight are the width and height of the actual screen in letterbox mode.

display.contentWidth, display.contentHeight return the values you set in config.lua. Nothing more. It has nothing to do with the actual screen shape.  As @steve262 points out, display.actualContentWidth, display.actualContentHeight get you the real values for your screen.

The default is that the 320x480 content area (3:2 or 1.5:1 aspect ratio) fits on all screens. Most all phones today are 16:9 (1.7777778:1) aspect ratio where an iPad is a 4:3 (1.25:1).  The result is the 320x480 content area will have some extra space beyond the 480 pixels. These are the black bars you’re seeing. A 16:9 screen translates to an actual area of 320x570 (568 on iPhone 5’s). This gives you 45 pixels of extra space on either side of the content area.  The default for config.lua is to center this 320x480 box inside of the 320x570 box (or for an iPad a 320x480 box inside a 360x480 box). 

The typical solution is to create a background larger than the defined content area and large enough to fill the screens regardless of their shape. There are very few screens thinner and narrower that 16:9 phones. There are no devices more square than the iPad. So if you consider that works out to 570 and 360, if you build your backgrounds to that size and load it using display.newImageRect( filename, 570, 360), depending on the device some of it will be off screen, but on all devices the black area will be filled.

Then you can use various techniques to position things. Your background cannot have any artwork on it critical to the UI around the edges since it might not be on screen. You have to have things like the background for the score as separate art pieces positioned based on the screen shape.

Rob

How could I find the actual 0,0 location?

On a phone using 320x480 landscape, 0, 0 is 45 points (44 points on the iPhone 5, 6) in from the left edge and flush with the top.  On an iPad 0, 0 would be flush left with the screen but be 20 points down from the top.

But that’s what display.screenOriginX and display.screenOriginY give you.

Rob