'Adaptive' content with backgrounds

[carloscosta]

hi, i never used ‘adaptive’ content in config.lua

i was playing around with it, and i liked the way the icons are with the same size independence of the size of the device.

the problem is that my backgrounds (2280x1440@4x / 1140/ 720@2x / 570/360@1x) that had bleed before with “letterbox” and dynamic images worked flawless. 

now with adaptive content the background is always in the middle with ‘half’ the size it should be,

i changed my config to:

application = { content = { scale = "adaptive", fps = 60, imageSuffix = { ["@2x"] = 1.5, ["@3x"] = 2.5, } } }

changed images to background.jpg / background@2x.jpg / background@3x.jpg

changed resolution of those images to 320x480 / 640*960 (2x) / 960*1440 (3x)

i’ve all launch images in my base directory changed build.settings includding “UILaunchImages = …”

still my background is always the same size. how can i have same effect with bleed like i had with letterbox but with adaptive content turned on? only for my backgrounds ofc.

do i need to multiply the size of the image myself depending of the screen resolution / ratio? anyone had this problem and resolved it that can share how did you resolve it?

regards,

Carlos

[rob]

Backgrounds with “adaptive” can be a bit tricky. Consider the following content areas:

iPhone 4:  320 x 480  – Uses @2x assets

iPhone 5:  320 x 568  – Uses @2x assets

iPhone 6:  375 x 667  – Uses @2x assets

iPhone 6 plus: 414 x 736 – Uses @3x assets

iPads: 768 x 1024 – Uses @1x assets on non-retina models, @2x assets on retina models

iPad Pro: 1024 x 1366 - Uses @2x assets

It would take a really long time to chart out Android like this but basically its going to give you a 160 dot per inch of screen width. Most phones are in the 2-3" width and most phones are 16:9 aspect ratio so multiple the new device with * 1.77777778. Thus a 2" Android phone would be 2" * 160 = 320. The height on a 16:9 phone would be 570.  Of course newer model devices have a higher DPI, which throws the math off a bit but it’s basically DPI * width and DPI * height.

Any way the gist of this is tablets will have a significantly larger usable screen size and you will need a background accordingly.

This is one reason we do not recommend adaptive for games. Adaptive is great for business apps where you tend to have solid backgrounds and you can just use a display.newRect() to fill it. Widgets stay the same size between phones and tablets. This lets you give different layouts for tablet vs. phone. Games you generally want to provide the user the same information regardless of the screen size.

Rob

[carloscosta]

hi Rob, thanks for the fast reply.

i only do business apps, that doesnt mean they need to be all the same and bland ;). in this case i use background images.

so if i understood it right, the trick here is to determine the DPI of a device and his actuall real size? seams mission impossible to me…

i found an old post to determine dpi but the list would take forever…

local function getDeviceMetrics( ) -- See: http://en.wikipedia.org/wiki/List\_of\_displays\_by\_pixel\_density local corona\_width = -display.screenOriginX \* 2 + display.contentWidth local corona\_height = -display.screenOriginY \* 2 + display.contentHeight --print("Corona unit width: " .. corona\_width .. ", height: " .. corona\_height) -- I was rounding these, on the theory that they would always round to the correct integer pixel -- size, but I noticed that in practice it rounded to an incorrect size sometimes, so I think it's -- better to use the computed fractional values instead of possibly introducing more error. -- local pixel\_width = corona\_width / display.contentScaleX local pixel\_height = corona\_height / display.contentScaleY --print("Pixel width: " .. pixel\_width .. ", height: " .. pixel\_height) local model = system.getInfo("model") local default\_device = { model = model, inchesDiagonal = 4.0, } -- Approximation (assumes average sized phone) local devices = { { model = "iPhone", inchesDiagonal = 3.5, }, { model = "iPad", inchesDiagonal = 9.7, }, { model = "iPod touch", inchesDiagonal = 3.5, }, { model = "Nexus One", inchesDiagonal = 3.7, }, { model = "Nexus S", inchesDiagonal = 4.0, }, -- Unverified model value { model = "Droid", inchesDiagonal = 3.7, }, { model = "Droid X", inchesDiagonal = 4.3, }, -- Unverified model value { model = "Galaxy Tab", inchesDiagonal = 7.0, }, { model = "Galaxy Tab X", inchesDiagonal = 10.1, }, -- Unverified model value { model = "Kindle Fire", inchesDiagonal = 7.0, }, { model = "Nook Color", inchesDiagonal = 7.0, }, } local device = default\_device for \_, deviceEntry in pairs(devices) do if deviceEntry.model == model then device = deviceEntry end end -- Pixel width, height, and pixels per inch device.pixelWidth = pixel\_width device.pixelHeight = pixel\_height device.ppi = math.sqrt((pixel\_width^2) + (pixel\_height^2)) / device.inchesDiagonal -- Corona unit width, height, and "Corona units per inch" device.coronaWidth = corona\_width device.coronaHeight = corona\_height device.cpi = math.sqrt(corona\_width^2 + corona\_height^2)/device.inchesDiagonal print("Device: " .. device.model .. ", size: " .. device.inchesDiagonal .. " inches, ppi: " .. device.ppi .. ", cpi: " .. device.cpi) return device end

I think i can get dpi from the android using system.getInfo(“androidDisplayApproximateDpi”) but i don’t know the actual size of the device. i know on android i can get that variable using displayMetrics. Corona provides this kinda of info if so my job is pretty much simpler and doable.

[rob]

I would do:

local screenInches = system.getInfo("androidDisplayWidthInInches") local is\_iPad = system.getInfo("model") == "iPad" local isTablet = false if screenInches \> 5 or is\_iPad then     isTablet = true end

[carloscosta]

Thanks Rob, thats a good start,

maybe i will try also

system.getInfo("architectureInfo")

using this list as reference : https://www.theiphonewiki.com/wiki/Models

ipad varies from 7.9 to 12" only having a true of false flag feels short.

[rob]

Backgrounds with “adaptive” can be a bit tricky. Consider the following content areas:

iPhone 4:  320 x 480  – Uses @2x assets

iPhone 5:  320 x 568  – Uses @2x assets

iPhone 6:  375 x 667  – Uses @2x assets

iPhone 6 plus: 414 x 736 – Uses @3x assets

iPads: 768 x 1024 – Uses @1x assets on non-retina models, @2x assets on retina models

iPad Pro: 1024 x 1366 - Uses @2x assets

It would take a really long time to chart out Android like this but basically its going to give you a 160 dot per inch of screen width. Most phones are in the 2-3" width and most phones are 16:9 aspect ratio so multiple the new device with * 1.77777778. Thus a 2" Android phone would be 2" * 160 = 320. The height on a 16:9 phone would be 570.  Of course newer model devices have a higher DPI, which throws the math off a bit but it’s basically DPI * width and DPI * height.

Any way the gist of this is tablets will have a significantly larger usable screen size and you will need a background accordingly.

This is one reason we do not recommend adaptive for games. Adaptive is great for business apps where you tend to have solid backgrounds and you can just use a display.newRect() to fill it. Widgets stay the same size between phones and tablets. This lets you give different layouts for tablet vs. phone. Games you generally want to provide the user the same information regardless of the screen size.

Rob

[carloscosta]

hi Rob, thanks for the fast reply.

i only do business apps, that doesnt mean they need to be all the same and bland ;). in this case i use background images.

so if i understood it right, the trick here is to determine the DPI of a device and his actuall real size? seams mission impossible to me…

i found an old post to determine dpi but the list would take forever…

local function getDeviceMetrics( ) -- See: http://en.wikipedia.org/wiki/List\_of\_displays\_by\_pixel\_density local corona\_width = -display.screenOriginX \* 2 + display.contentWidth local corona\_height = -display.screenOriginY \* 2 + display.contentHeight --print("Corona unit width: " .. corona\_width .. ", height: " .. corona\_height) -- I was rounding these, on the theory that they would always round to the correct integer pixel -- size, but I noticed that in practice it rounded to an incorrect size sometimes, so I think it's -- better to use the computed fractional values instead of possibly introducing more error. -- local pixel\_width = corona\_width / display.contentScaleX local pixel\_height = corona\_height / display.contentScaleY --print("Pixel width: " .. pixel\_width .. ", height: " .. pixel\_height) local model = system.getInfo("model") local default\_device = { model = model, inchesDiagonal = 4.0, } -- Approximation (assumes average sized phone) local devices = { { model = "iPhone", inchesDiagonal = 3.5, }, { model = "iPad", inchesDiagonal = 9.7, }, { model = "iPod touch", inchesDiagonal = 3.5, }, { model = "Nexus One", inchesDiagonal = 3.7, }, { model = "Nexus S", inchesDiagonal = 4.0, }, -- Unverified model value { model = "Droid", inchesDiagonal = 3.7, }, { model = "Droid X", inchesDiagonal = 4.3, }, -- Unverified model value { model = "Galaxy Tab", inchesDiagonal = 7.0, }, { model = "Galaxy Tab X", inchesDiagonal = 10.1, }, -- Unverified model value { model = "Kindle Fire", inchesDiagonal = 7.0, }, { model = "Nook Color", inchesDiagonal = 7.0, }, } local device = default\_device for \_, deviceEntry in pairs(devices) do if deviceEntry.model == model then device = deviceEntry end end -- Pixel width, height, and pixels per inch device.pixelWidth = pixel\_width device.pixelHeight = pixel\_height device.ppi = math.sqrt((pixel\_width^2) + (pixel\_height^2)) / device.inchesDiagonal -- Corona unit width, height, and "Corona units per inch" device.coronaWidth = corona\_width device.coronaHeight = corona\_height device.cpi = math.sqrt(corona\_width^2 + corona\_height^2)/device.inchesDiagonal print("Device: " .. device.model .. ", size: " .. device.inchesDiagonal .. " inches, ppi: " .. device.ppi .. ", cpi: " .. device.cpi) return device end

I think i can get dpi from the android using system.getInfo(“androidDisplayApproximateDpi”) but i don’t know the actual size of the device. i know on android i can get that variable using displayMetrics. Corona provides this kinda of info if so my job is pretty much simpler and doable.

[rob]

I would do:

local screenInches = system.getInfo("androidDisplayWidthInInches") local is\_iPad = system.getInfo("model") == "iPad" local isTablet = false if screenInches \> 5 or is\_iPad then     isTablet = true end

[carloscosta]

Thanks Rob, thats a good start,

maybe i will try also

system.getInfo("architectureInfo")

using this list as reference : https://www.theiphonewiki.com/wiki/Models

ipad varies from 7.9 to 12" only having a true of false flag feels short.