Hi,
There is a strange issue I’m facing from device to device. I have a simple object that I’m placing on the screen but it changes it’s position from device to device. Is there any way we can write a code of object positioning for all of the screens?
For more, please see the attached images.
Thanks
Hey, i came across this error multiple times.
When dealing with multiple devices, you get multiple screen resolution as well, right?
Are you setting the x value of the image like this:
bananas.x = 100 ?
In one particular device let’s say: 320 x 480 that should work just fine, but when switch to another device with other resolution let’s say: 1536 x 2008, the x = 100 it’s not the same point as the first device, agree?
In some cases, i take the variables corona gave that changes for each device…
Something like:
banana.x = display.contentCenterX banana.y = display.contentCenterY
That will put the banana image in the center of the screen no matter what device you dealing with.
What does your config.lua look like?
Hi,
Here is the config.lua file:
if string.sub(system.getInfo(“model”),1,4) == “iPad” then
application =
{
content =
{
width = 360,
height = 480,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
notification =
{
iphone = {
types = {
“badge”, “sound”, “alert”
}
}
}
}
elseif string.sub(system.getInfo(“model”),1,2) == “iP” and display.pixelHeight > 960 then
application =
{
content =
{
width = 320,
height = 568,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
notification =
{
iphone = {
types = {
“badge”, “sound”, “alert”
}
}
}
}
elseif string.sub(system.getInfo(“model”),1,2) == “iP” then
application =
{
content =
{
width = 320,
height = 480,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
notification =
{
iphone = {
types = {
“badge”, “sound”, “alert”
}
}
}
}
elseif display.pixelHeight / display.pixelWidth > 1.72 then
application =
{
content =
{
width = 320,
height = 570,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
}
else
application =
{
content =
{
width = 320,
height = 512,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
notification =
{
iphone = {
types = {
“badge”, “sound”, “alert”
}
}
}
}
end
Please note that not all of the time we need to place the image on the center of the screen. Some time, we need to place the objects somewhere other than the middle of the screen. How can I make sure I place my objects on the same positions across all devices?
Thanks
make sure you use these values in your project, and position every object by using them:
local centerX = display.contentCenterX
local centerY = display.contentCenterY
local screenTop = display.screenOriginY
local screenLeft = display.screenOriginX
local bottomMarg = display.contentHeight - display.screenOriginY
local rightMarg = display.contentWidth - display.screenOriginX
for example :
object.x = rightMarg - 100; object.y = screenTop+100
now with this the object will be in the same position on every device.
Mohammed.
Screens have different widths. With that config.lua most of your screens will be 320 points wide, though iPads will be 360 points wide. Because of this anything you position with just a obj.x = somevalue will be that far from the left edge but the background is being centered. That means the extra 40 points of screen real estate is divided by 2, giving you 20 extra points on the left to work with and 20 extra points on the right to work with.
There are two ways to deal with this. Since you’re using a config.lua from the tutorial “The Ultimate config.lua”, it’s assuming that you desire to have 0, 0 always be the top left and display.contentWidth, display.contentHeight to always be the bottom right of the screen. When you do this, you need to position things in a relative fashion. That is you ask yourself:
How many points from the left edge do I want something?
How many points from the right edge do I want something?
How far from the bottom edge? The top edge? and most importantly:
How far from the center do I want something?
In your images above, the blocks are pretty much centered and somethings like the green object get cut off on the narrower screen. Because 0, 0 changes based on the device, for thing you want to stay in the center (or some distance from the center) you would do:
obj.x = display.contentCenterX or
obj.x = display.contentCenterX + 25
You only use fixed numbers like:
obj.x = 10 if you want the object to always stay 10 points from the left edge, or:
obj.x = display.contentWidth - 10 to keep it 10 points from the right edge. Objects positioned like this will move relative to your background but for things like scores, home buttons, help buttons that you want to tuck at the top or bottom or at the sides, and their position on the background doesn’t matter this works well.
When you need to always use: obj.x = some value and you want it to stay in the right position based the background art, you might find more luck using standard config.lua:
application = { content = { width = 360, height = 480, scale = "letterbox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }
In this example, the 320x480 content area will be centered on the screen and you will have margins that are outside of that area. For instance on the iPad, your top, left won’t be 0, 0, but -20, -16. The bottom right will be 340, 496. But anything drawn at:
obj.x = 50
will be 50 points from that fixed 320x480 area that’s centered over your background. You can still place things outside of the 320x480 area, so setting something to obj.x = -10 will be 10 points left of the content area. On the iPhones, (and the android devices) this will be off screen, but for the iPad it will be on screen just closer to the edge.
Personally I prefer to always know that my 0, 0 is my top left and that display.contentWidth, display.contentHeight is my bottom right and give me the flexibility to position things relative to the actual edge of the screen or a relative distance from the center. It does take some extra thought to figure it out this way, but
bananaBasket.x = display.contentCenterX
will keep that basket centered. If you need the basket to always be 100 pixels from the center:
bananaBasket.y = display.contentCenterY + 100
but if you want it to always be 10 points from the bottom:
bananaBasket.y = display.contentHeight - 10 - (bananaBasket.height / 2)
Hope this helps
Rob
Thanks hammod-930. It worked 
Hey, i came across this error multiple times.
When dealing with multiple devices, you get multiple screen resolution as well, right?
Are you setting the x value of the image like this:
bananas.x = 100 ?
In one particular device let’s say: 320 x 480 that should work just fine, but when switch to another device with other resolution let’s say: 1536 x 2008, the x = 100 it’s not the same point as the first device, agree?
In some cases, i take the variables corona gave that changes for each device…
Something like:
banana.x = display.contentCenterX banana.y = display.contentCenterY
That will put the banana image in the center of the screen no matter what device you dealing with.
What does your config.lua look like?
Hi,
Here is the config.lua file:
if string.sub(system.getInfo(“model”),1,4) == “iPad” then
application =
{
content =
{
width = 360,
height = 480,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
notification =
{
iphone = {
types = {
“badge”, “sound”, “alert”
}
}
}
}
elseif string.sub(system.getInfo(“model”),1,2) == “iP” and display.pixelHeight > 960 then
application =
{
content =
{
width = 320,
height = 568,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
notification =
{
iphone = {
types = {
“badge”, “sound”, “alert”
}
}
}
}
elseif string.sub(system.getInfo(“model”),1,2) == “iP” then
application =
{
content =
{
width = 320,
height = 480,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
notification =
{
iphone = {
types = {
“badge”, “sound”, “alert”
}
}
}
}
elseif display.pixelHeight / display.pixelWidth > 1.72 then
application =
{
content =
{
width = 320,
height = 570,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
}
else
application =
{
content =
{
width = 320,
height = 512,
scale = “letterBox”,
xAlign = “center”,
yAlign = “center”,
imageSuffix =
{
["@2x"] = 1.5,
["@4x"] = 3.0,
},
},
notification =
{
iphone = {
types = {
“badge”, “sound”, “alert”
}
}
}
}
end
Please note that not all of the time we need to place the image on the center of the screen. Some time, we need to place the objects somewhere other than the middle of the screen. How can I make sure I place my objects on the same positions across all devices?
Thanks
make sure you use these values in your project, and position every object by using them:
local centerX = display.contentCenterX
local centerY = display.contentCenterY
local screenTop = display.screenOriginY
local screenLeft = display.screenOriginX
local bottomMarg = display.contentHeight - display.screenOriginY
local rightMarg = display.contentWidth - display.screenOriginX
for example :
object.x = rightMarg - 100; object.y = screenTop+100
now with this the object will be in the same position on every device.
Mohammed.
Screens have different widths. With that config.lua most of your screens will be 320 points wide, though iPads will be 360 points wide. Because of this anything you position with just a obj.x = somevalue will be that far from the left edge but the background is being centered. That means the extra 40 points of screen real estate is divided by 2, giving you 20 extra points on the left to work with and 20 extra points on the right to work with.
There are two ways to deal with this. Since you’re using a config.lua from the tutorial “The Ultimate config.lua”, it’s assuming that you desire to have 0, 0 always be the top left and display.contentWidth, display.contentHeight to always be the bottom right of the screen. When you do this, you need to position things in a relative fashion. That is you ask yourself:
How many points from the left edge do I want something?
How many points from the right edge do I want something?
How far from the bottom edge? The top edge? and most importantly:
How far from the center do I want something?
In your images above, the blocks are pretty much centered and somethings like the green object get cut off on the narrower screen. Because 0, 0 changes based on the device, for thing you want to stay in the center (or some distance from the center) you would do:
obj.x = display.contentCenterX or
obj.x = display.contentCenterX + 25
You only use fixed numbers like:
obj.x = 10 if you want the object to always stay 10 points from the left edge, or:
obj.x = display.contentWidth - 10 to keep it 10 points from the right edge. Objects positioned like this will move relative to your background but for things like scores, home buttons, help buttons that you want to tuck at the top or bottom or at the sides, and their position on the background doesn’t matter this works well.
When you need to always use: obj.x = some value and you want it to stay in the right position based the background art, you might find more luck using standard config.lua:
application = { content = { width = 360, height = 480, scale = "letterbox", xAlign = "center", yAlign = "center", imageSuffix = { ["@2x"] = 1.5, ["@4x"] = 3.0, }, }, }
In this example, the 320x480 content area will be centered on the screen and you will have margins that are outside of that area. For instance on the iPad, your top, left won’t be 0, 0, but -20, -16. The bottom right will be 340, 496. But anything drawn at:
obj.x = 50
will be 50 points from that fixed 320x480 area that’s centered over your background. You can still place things outside of the 320x480 area, so setting something to obj.x = -10 will be 10 points left of the content area. On the iPhones, (and the android devices) this will be off screen, but for the iPad it will be on screen just closer to the edge.
Personally I prefer to always know that my 0, 0 is my top left and that display.contentWidth, display.contentHeight is my bottom right and give me the flexibility to position things relative to the actual edge of the screen or a relative distance from the center. It does take some extra thought to figure it out this way, but
bananaBasket.x = display.contentCenterX
will keep that basket centered. If you need the basket to always be 100 pixels from the center:
bananaBasket.y = display.contentCenterY + 100
but if you want it to always be 10 points from the bottom:
bananaBasket.y = display.contentHeight - 10 - (bananaBasket.height / 2)
Hope this helps
Rob
Thanks hammod-930. It worked