Dynamic scaling with new devices - iphone 6 etc

[alan73]

Hi there,

So I havent been using Corona for a while and am working on a business app at the minute. I downloaded the business app template from the Corona website and am using it as base.

Currently my config file looks like this.

My image is 320x480 and then 640x960 for the @2x

--calculate the aspect ratio of the device: local aspectRatio = display.pixelHeight / display.pixelWidth application = { content = { width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ), height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ), scale = "letterBox", fps = 60, imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }

When I look at the app in the simulator though on different devices I can see the image isnt scaling fully to fit the screen. I have a red background behind the image and you can see in the screenshot that its showing underneath.

Am i using the wrong image sizes or is the config wrong?

[roaminggamer]

@alan73,

Hi.  This may spark some debate, but I have to say that I’m not a fan of the dynamically scaled config file.  

If you’re willing to write code that takes into account not knowing the actual width and height until the app runs, thats fine, but for me this just seems too hard and dangerous.

I’d suggest this:

1. In main.lua print out the display.contentWidth and display.contentHeight.  i.e. Check to see what the config file is calculating for your device.

My guess is, the value is probably something unexpected or odd.

2. Try setting up a fixed resolution config file and see if that resolves the issue.

   application = { content = { width = 320, height = 480, scale = “letterBox”, fps = 60, imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }

3. If you’re comfortable adding a few global into your work space, I have this function that I use in all my projects to give me useful globals (w, h, top, left, right, unusedWidth, etc.).  

   local mFloor = math.floor local function round(val, n) if (n) then return mFloor( (val * 10^n) + 0.5) / (10^n) else return mFloor(val+0.5) end end local function calcMeasurementSpacing( debugEn ) _G.w = display.contentWidth _G.h = display.contentHeight _G.centerX = display.contentCenterX _G.centerY = display.contentCenterY _G.fullw = display.actualContentWidth _G.fullh = display.actualContentHeight _G.unusedWidth = _G.fullw - _G.w _G.unusedHeight = _G.fullh - _G.h _G.deviceWidth = math.floor((fullw/display.contentScaleX) + 0.5) _G.deviceHeight = math.floor((fullh/display.contentScaleY) + 0.5) _G.left = 0 - unusedWidth/2 _G.top = 0 - unusedHeight/2 _G.right = w + unusedWidth/2 _G.bottom = h + unusedHeight/2 _G.w = round(w) _G.h = round(h) _G.left = round(left) _G.top = round(top) _G.right = round(right) _G.bottom = round(bottom) _G.fullw = round(fullw) _G.fullh = round(fullh) _G.orientation = ( w > h ) and “landscape” or “portrait” _G.isLandscape = ( w > h ) _G.isPortrait = ( h > w ) _G.left = (left>=0) and math.abs(left) or left _G.top = (top>=0) and math.abs(top) or top if( debugEn ) then print("\n---------- calcMeasurementSpacing() @ " … system.getTimer() ) print( "w = " … w ) print( "h = " … h ) print( "centerX = " … centerX ) print( "centerY = " … centerY ) print( "fullw = " … fullw ) print( "fullh = " … fullh ) print( "left = " … left ) print( "right = " … right ) print( “top = " … top ) print( “bottom = " … bottom ) print(”---------------\n\n”) end end calcMeasurementSpacing()

Between a fixed resolution and my helper variables, I’m able to place with confidence while still able to find the edges of the screen for cases when I need to align to the edges or to fill in unused space.

I hope this helps.

PS - This code is very old, so it may seem a little redundant now, but when I first wrote it, not all of the display.* fields we have today existed.  I continue to use it out of familiarity, but I can see it being easily trimmed to left,right,…, and perhaps the unused* globals only.   The rest are all available via longer to type names like display.contentCenterX (vs my centerX)

[alan73]

@roaminggamer

Thanks for this, I changed it to a fixed resolution and that solves the issue apart from on some larger devices where there is black padding on the sides but I can live with that.

I have watched your stuff on Corona Geek - great work by the way and downloaded some of your content so I will take a look at the code above and may implement this too.

Thanks for the reply.

Alan

[roaminggamer]

@alan73,

Hi.  This may spark some debate, but I have to say that I’m not a fan of the dynamically scaled config file.  

If you’re willing to write code that takes into account not knowing the actual width and height until the app runs, thats fine, but for me this just seems too hard and dangerous.

I’d suggest this:

1. In main.lua print out the display.contentWidth and display.contentHeight.  i.e. Check to see what the config file is calculating for your device.

My guess is, the value is probably something unexpected or odd.

2. Try setting up a fixed resolution config file and see if that resolves the issue.

   application = { content = { width = 320, height = 480, scale = “letterBox”, fps = 60, imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }

3. If you’re comfortable adding a few global into your work space, I have this function that I use in all my projects to give me useful globals (w, h, top, left, right, unusedWidth, etc.).  

   local mFloor = math.floor local function round(val, n) if (n) then return mFloor( (val * 10^n) + 0.5) / (10^n) else return mFloor(val+0.5) end end local function calcMeasurementSpacing( debugEn ) _G.w = display.contentWidth _G.h = display.contentHeight _G.centerX = display.contentCenterX _G.centerY = display.contentCenterY _G.fullw = display.actualContentWidth _G.fullh = display.actualContentHeight _G.unusedWidth = _G.fullw - _G.w _G.unusedHeight = _G.fullh - _G.h _G.deviceWidth = math.floor((fullw/display.contentScaleX) + 0.5) _G.deviceHeight = math.floor((fullh/display.contentScaleY) + 0.5) _G.left = 0 - unusedWidth/2 _G.top = 0 - unusedHeight/2 _G.right = w + unusedWidth/2 _G.bottom = h + unusedHeight/2 _G.w = round(w) _G.h = round(h) _G.left = round(left) _G.top = round(top) _G.right = round(right) _G.bottom = round(bottom) _G.fullw = round(fullw) _G.fullh = round(fullh) _G.orientation = ( w > h ) and “landscape” or “portrait” _G.isLandscape = ( w > h ) _G.isPortrait = ( h > w ) _G.left = (left>=0) and math.abs(left) or left _G.top = (top>=0) and math.abs(top) or top if( debugEn ) then print("\n---------- calcMeasurementSpacing() @ " … system.getTimer() ) print( "w = " … w ) print( "h = " … h ) print( "centerX = " … centerX ) print( "centerY = " … centerY ) print( "fullw = " … fullw ) print( "fullh = " … fullh ) print( "left = " … left ) print( "right = " … right ) print( “top = " … top ) print( “bottom = " … bottom ) print(”---------------\n\n”) end end calcMeasurementSpacing()

Between a fixed resolution and my helper variables, I’m able to place with confidence while still able to find the edges of the screen for cases when I need to align to the edges or to fill in unused space.

I hope this helps.

PS - This code is very old, so it may seem a little redundant now, but when I first wrote it, not all of the display.* fields we have today existed.  I continue to use it out of familiarity, but I can see it being easily trimmed to left,right,…, and perhaps the unused* globals only.   The rest are all available via longer to type names like display.contentCenterX (vs my centerX)

[alan73]

@roaminggamer

Thanks for this, I changed it to a fixed resolution and that solves the issue apart from on some larger devices where there is black padding on the sides but I can live with that.

I have watched your stuff on Corona Geek - great work by the way and downloaded some of your content so I will take a look at the code above and may implement this too.

Thanks for the reply.

Alan