Hello,
What is the concret difference between display.contentWidth and display.actualContentWidth ?
thanks
When you define a width and height in config.lua you’re creating a virtual screen area. Depending on the shape of the device there could be extra space outside that defined virtual screen. Let’s look at an example.
In config.lua you set the width to 320 and the height to 480 and lets assume a vertical/portrait app. display.contentWidth will be 320 and display.contentHeight will be 480 regardless of what device you’re on.
If you’re on an iPhone 4 which happens to be the same aspect ratio as your content area, then display.actualContentWidth will be 320 and display.actualContentHeight will be 480. Also in this case display.screenOriginX and display.screenOriginY will both be 0. More on this below.
Now lets move to an iPhone 5 which is taller. When scaled to 320 points as defined in config.lua, the iPhone 5 screen is 320 x 568. There are 88 more content points of screen than you listed in config,lua. 44 of them will be above your content area and 44 will be below it (assuming your content area is centered on the screen, the default).
In this case, display.contentWidth will be 320, display.contentHeight will be 480 because that’s what you put in config.lua. However in this case display.actualContentWidth will be 320 but display.actualContentHeight will be 568, representing the true space you have on the screen. Because your smaller content area is centered on a larger screen, 0, 0 is no longer the left, top corner but 0, -44 is. This is where display.screenOriginX and Y come into place. With this device, display.screenOriginX will still be 0 since the content area is the exact width of the screen, but now display.screenOriginY is -44 because 0, -44 is the left, top in this configuration.
One more example to round it out, you switch to an iPad, which has a screen of 360x480 in this configuration. Now your 320x480 is centered on the screen, but you have extra area on the sides, not the top and bottom. display.contentWidth and display.contentHeight will still return 320 and 480. But now display.actualContentWidth will report 360 and display.actualContentHeight will report 480. The left, top is no longer 0, 0, but -20, 0 changing display.screenOriginX to -20 and display.screenOriginY to 0.
If you want to, regardless of device, position things along the bottom or right edges, you should use display.actualContentWidth/Height to get those values. If you want to position something along the left or top edges, you should use display.screenOriginX/Y.
Rob
Rob, using what you suggested with you approach to position (which i never used and i was curious) i tried to put a square on bottom right. i had to do this code:
local rec=display.newRect((display.actualContentWidth-display.contentWidth)\*.5+display.contentWidth, (display.actualContentHeight-display.contentHeight)\*.5+display.contentHeight, 10, 10) rec.anchorX=1 rec.anchorY=1
it works on all devices (on simulator) with this config:
application = { content = { width = 320, height = 480, scale = "letterbox", fps = 60, }, }
what i usually do is having a dynamic config.lua like this:
application = { content = { width = 320, height = 480, scale = "letterbox", fps = 60, }, } local aspectRatio = display.pixelHeight / display.pixelWidth if aspectRatio \<= 1.5 then application.content.width = math.ceil(480 / aspectRatio) end if aspectRatio \>= 1.5 then application.content.height = math.ceil(320 \* aspectRatio) end
and when i want to create a rec on bottom right i just use:
local rec2=display.newRect(display.contentWidth, display.contentHeight, 10, 10) rec2.anchorX=1 rec2.anchorY=1
i’m doing it wrong all this time? lol? or it’s just another approach?
There are plenty of ways of doing things. if you’re using a dynamic config.lua, then display.contentHeight/Width will equal display.actualContentHeight/Width.
Rob
ok thx for the answer.
For me I have a huawei y6, and the screenOrigininX/Y is “-0” and “-24”, the contentWidth/Height is “360” and “592” and the actualContentWidth/Height is “360” and “640”.
But the display.topStatusBarContentHeight return “25”. (display.statusBarHeight=50, why ?)
So, if I have understand, the real Height screen “began” at -24 (one pixel less that the height of the statusBar which is 25), and because of it when i create display.newCircle(0,0,30), it’s draw in fact in a way to be at the down-left corner of the status Bar.
But I still don’t understand the “640” results" because contentHeight+HeightBar=592+24=616.
The difference 640-616=24 comes from where ?
In fact I work with the Lerg’s config lua and letterBox, and I always hiding statusBar and beeing immersive Sticky.
Should I only use display.actuealContent… or only display.content… to be sure to never make error in the future on other device and game ??? Thanks.
local w, h = display.pixelWidth, display.pixelHeight local modes = {1, 1.5, 2, 3, 4, 6, 8} -- Scaling factors to try local contentW, contentH = 320, 480 -- Minimal size your content can fit in -- Try each mode and find the best one local \_w, \_h, \_m = w, h, 1 for i = 1, #modes do local m = modes[i] local lw, lh = w / m, h / m if lw \< contentW or lh \< contentH then break else \_w, \_h, \_m = lw, lh, m end end -- If scaling is not pixel perfect (between 1 and 2) - use letterbox if \_m \< 2 then local scale = math.max(contentW / w, contentH / h) \_w, \_h = w \* scale, h \* scale end application = { content = { width = \_w, height = \_h, scale = 'letterbox', fps = 30, imageSuffix = { ['@2x'] = 1.1, ['@4x'] = 2.1, } } } -- Uncomment to use the common content scaling --[[application = { content = { width = 320, height = 480, scale = 'letterbox', fps = 60, imageSuffix = { ['@2x'] = 1.1, ['@4x'] = 2.1, } } } --]]+24 top AND bottom when yAlign=“center” (the default)
But statusBar is not a newText display object . Why do you say about yAlign ?
The huawei y6 has a 720 x 1280 screen. If you’ve set your width to 360 in your config.lua, that’s scaling the physical screen by a factor of 2 (360 * 2 = 720). To get the same scale based on the 1280 pixels size means your actual content area will be 360 x 640.
Now I can’t see your config.lua, but if you set the width to 360 and the height to 592, then 640 - 592 = 48. With the content area centered, then you’re physical screen has 24 points above the content area (again discussing vertically) and 24 points below the content area.
display.contentWidth and display.contentHeight are what you put in config.lua. I don’t believe the status bar counts in these numbers anywhere. If you have a 50 px status bar but you’ve set your config.lua to be 360 based, then in those content units/points your status bar will take up 25 points.
It might be helpful to post your config.lua.
Rob
my config lua file :
it gives modes = 2 and _w,_h=360,640
if not display then return end local w, h = display.pixelWidth, display.pixelHeight local modes = {1, 1.5, 2, 3, 4, 6, 8} -- Scaling factors to try local contentW, contentH = 320, 480 -- Minimal size your content can fit in -- Try each mode and find the best one local \_w, \_h, \_m = w, h, 1 for i = 1, #modes do local m = modes[i] local lw, lh = w / m, h / m if lw \< contentW or lh \< contentH then break else \_w, \_h, \_m = lw, lh, m end end -- If scaling is not pixel perfect (between 1 and 2) - use letterbox if \_m \< 2 then local scale = math.max(contentW / w, contentH / h) \_w, \_h = w \* scale, h \* scale end application = { content = { width = \_w, height = \_h, scale = 'letterbox', fps = 30, imageSuffix = { ['@2x'] = 1.1, ['@4x'] = 2.1, } } } -- Uncomment to use the common content scaling --[[application = { content = { width = 320, height = 480, scale = 'letterbox', fps = 60, imageSuffix = { ['@2x'] = 1.1, ['@4x'] = 2.1, } } } --]]Lerg’s config.lua attempts to make sure display.contentWidth = display.actualContentWidth and display.contentHeight = display.actualContentHeight. So your contentWidth should be 640, though he does some magic math on trying to remain pixel perfect and that could affect the width in some how. And I think that’s what’s causing you to come up 48 pixels short with your content area.
Rob
If you are trying to better understand how to determine the edges of the screen please see this example:
https://github.com/roaminggamer/RG_FreeStuff/tree/master/AskEd/2015/10/lgg4
(From my multi-year repository of forums answers)
When you define a width and height in config.lua you’re creating a virtual screen area. Depending on the shape of the device there could be extra space outside that defined virtual screen. Let’s look at an example.
In config.lua you set the width to 320 and the height to 480 and lets assume a vertical/portrait app. display.contentWidth will be 320 and display.contentHeight will be 480 regardless of what device you’re on.
If you’re on an iPhone 4 which happens to be the same aspect ratio as your content area, then display.actualContentWidth will be 320 and display.actualContentHeight will be 480. Also in this case display.screenOriginX and display.screenOriginY will both be 0. More on this below.
Now lets move to an iPhone 5 which is taller. When scaled to 320 points as defined in config.lua, the iPhone 5 screen is 320 x 568. There are 88 more content points of screen than you listed in config,lua. 44 of them will be above your content area and 44 will be below it (assuming your content area is centered on the screen, the default).
In this case, display.contentWidth will be 320, display.contentHeight will be 480 because that’s what you put in config.lua. However in this case display.actualContentWidth will be 320 but display.actualContentHeight will be 568, representing the true space you have on the screen. Because your smaller content area is centered on a larger screen, 0, 0 is no longer the left, top corner but 0, -44 is. This is where display.screenOriginX and Y come into place. With this device, display.screenOriginX will still be 0 since the content area is the exact width of the screen, but now display.screenOriginY is -44 because 0, -44 is the left, top in this configuration.
One more example to round it out, you switch to an iPad, which has a screen of 360x480 in this configuration. Now your 320x480 is centered on the screen, but you have extra area on the sides, not the top and bottom. display.contentWidth and display.contentHeight will still return 320 and 480. But now display.actualContentWidth will report 360 and display.actualContentHeight will report 480. The left, top is no longer 0, 0, but -20, 0 changing display.screenOriginX to -20 and display.screenOriginY to 0.
If you want to, regardless of device, position things along the bottom or right edges, you should use display.actualContentWidth/Height to get those values. If you want to position something along the left or top edges, you should use display.screenOriginX/Y.
Rob
Rob, using what you suggested with you approach to position (which i never used and i was curious) i tried to put a square on bottom right. i had to do this code:
local rec=display.newRect((display.actualContentWidth-display.contentWidth)\*.5+display.contentWidth, (display.actualContentHeight-display.contentHeight)\*.5+display.contentHeight, 10, 10) rec.anchorX=1 rec.anchorY=1
it works on all devices (on simulator) with this config:
application = { content = { width = 320, height = 480, scale = "letterbox", fps = 60, }, }
what i usually do is having a dynamic config.lua like this:
application = { content = { width = 320, height = 480, scale = "letterbox", fps = 60, }, } local aspectRatio = display.pixelHeight / display.pixelWidth if aspectRatio \<= 1.5 then application.content.width = math.ceil(480 / aspectRatio) end if aspectRatio \>= 1.5 then application.content.height = math.ceil(320 \* aspectRatio) end
and when i want to create a rec on bottom right i just use:
local rec2=display.newRect(display.contentWidth, display.contentHeight, 10, 10) rec2.anchorX=1 rec2.anchorY=1
i’m doing it wrong all this time? lol? or it’s just another approach?
There are plenty of ways of doing things. if you’re using a dynamic config.lua, then display.contentHeight/Width will equal display.actualContentHeight/Width.
Rob
ok thx for the answer.
For me I have a huawei y6, and the screenOrigininX/Y is “-0” and “-24”, the contentWidth/Height is “360” and “592” and the actualContentWidth/Height is “360” and “640”.
But the display.topStatusBarContentHeight return “25”. (display.statusBarHeight=50, why ?)
So, if I have understand, the real Height screen “began” at -24 (one pixel less that the height of the statusBar which is 25), and because of it when i create display.newCircle(0,0,30), it’s draw in fact in a way to be at the down-left corner of the status Bar.
But I still don’t understand the “640” results" because contentHeight+HeightBar=592+24=616.
The difference 640-616=24 comes from where ?
In fact I work with the Lerg’s config lua and letterBox, and I always hiding statusBar and beeing immersive Sticky.
Should I only use display.actuealContent… or only display.content… to be sure to never make error in the future on other device and game ??? Thanks.
local w, h = display.pixelWidth, display.pixelHeight local modes = {1, 1.5, 2, 3, 4, 6, 8} -- Scaling factors to try local contentW, contentH = 320, 480 -- Minimal size your content can fit in -- Try each mode and find the best one local \_w, \_h, \_m = w, h, 1 for i = 1, #modes do local m = modes[i] local lw, lh = w / m, h / m if lw \< contentW or lh \< contentH then break else \_w, \_h, \_m = lw, lh, m end end -- If scaling is not pixel perfect (between 1 and 2) - use letterbox if \_m \< 2 then local scale = math.max(contentW / w, contentH / h) \_w, \_h = w \* scale, h \* scale end application = { content = { width = \_w, height = \_h, scale = 'letterbox', fps = 30, imageSuffix = { ['@2x'] = 1.1, ['@4x'] = 2.1, } } } -- Uncomment to use the common content scaling --[[application = { content = { width = 320, height = 480, scale = 'letterbox', fps = 60, imageSuffix = { ['@2x'] = 1.1, ['@4x'] = 2.1, } } } --]]+24 top AND bottom when yAlign=“center” (the default)
But statusBar is not a newText display object . Why do you say about yAlign ?
The huawei y6 has a 720 x 1280 screen. If you’ve set your width to 360 in your config.lua, that’s scaling the physical screen by a factor of 2 (360 * 2 = 720). To get the same scale based on the 1280 pixels size means your actual content area will be 360 x 640.
Now I can’t see your config.lua, but if you set the width to 360 and the height to 592, then 640 - 592 = 48. With the content area centered, then you’re physical screen has 24 points above the content area (again discussing vertically) and 24 points below the content area.
display.contentWidth and display.contentHeight are what you put in config.lua. I don’t believe the status bar counts in these numbers anywhere. If you have a 50 px status bar but you’ve set your config.lua to be 360 based, then in those content units/points your status bar will take up 25 points.
It might be helpful to post your config.lua.
Rob