Help With Positioning Images On Different Devices

Getting Started Newbie Questions
#1

Hi, I am using the config.lua from this link: https://coronalabs.com/blog/2013/09/10/modernizing-the-config-lua/

I have created my background image to be the size of 900x1425, width and height respectively. And then used this code to display the background image:

local group = self.view -- I'm using storyboard local background = display.newImageRect(group, “background.png”, 900, 1425) background.x = display.contentCenterX background.y = display.contentCenterY  

The background seemed to load fine on different devices (i.e., iPhone 4, 5, S3). The problem I’m having is with putting other images. I’ve uploaded a sample picture to describe what I’m talking about. I’m using a grid as a background image, so suppose when I put an image at a certain point (red X) on top of the grid background for iPhone 5…if I load it on a different device, the image shown is not at the same position on the grid (yellow X) as it was in iPhone 5. I need the image to stay at the same position respectively to the grid as it helps people to solve the game.

Help please.

#2

I’m not sure but using display.contentCenterX or Y +/- “some value” for other images seemed to work. I’m guessing this is because I set my background image’s position to display.contentCenterX and display.contentCenterY, so that other images that I positioned using display.contentCenterX or Y are calculated from the center of the background to the right places? 

#3

One of the things you have to adapt to with the ultimate config.lua file is that contentCenterX and contentCenterY is going to be different from device to device as is contentWidth and contentHeight.

In this case, though using a grid, if your squares are say 100px x 100px, then the center of 1, 1 is at 50, 50. the center of 2, 2 is at 150, 150, etc.  The distance from the Top and Left are fixed.   If you draw at 100, 100, it will be 100 points from the top and 100 points from the left. 

Now what might be happening is that your background is moving since it’s centered on the screen, so on some devices the top left square may be off screen or partially off screen.  If you need the top left square to be in the top left, then you need to position the background so that it’s 0, 0 as at the screen’s 0, 0.

background.anchorX = 0

background.anchorY = 0

background.x = 0

background.y = 0

will no longer center your background but anchor it to the top left.  Then the bleed (right and bottom edges) will vary from device to device.

Rob

#4

I think I know what you’re saying, Rob. Please correct me if I’m wrong. So where I want to anchor the background depends on where I want to put my images on the grid? If its close to the edges, I need to anchor my background to the edge, and make that edge my 0,0. But if the edges don’t matter, its best to anchor it the center of the screen and make that center my 0,0?

Also an additional question to reassure myself. Since I’m using the config.lua in the “Modernizing the config.lua” article and I am planning to make an app only for mobile phones for now (I think none of them exceeds 1040 pixel width), not tablets, I only need one version of the background image with a resolution of 900(W)x1425(H)?

#5

Correct and Correct.

Rob

#6

Thanks a lot, Rob!!

#7

I’m not sure but using display.contentCenterX or Y +/- “some value” for other images seemed to work. I’m guessing this is because I set my background image’s position to display.contentCenterX and display.contentCenterY, so that other images that I positioned using display.contentCenterX or Y are calculated from the center of the background to the right places? 

#8

One of the things you have to adapt to with the ultimate config.lua file is that contentCenterX and contentCenterY is going to be different from device to device as is contentWidth and contentHeight.

In this case, though using a grid, if your squares are say 100px x 100px, then the center of 1, 1 is at 50, 50. the center of 2, 2 is at 150, 150, etc.  The distance from the Top and Left are fixed.   If you draw at 100, 100, it will be 100 points from the top and 100 points from the left. 

Now what might be happening is that your background is moving since it’s centered on the screen, so on some devices the top left square may be off screen or partially off screen.  If you need the top left square to be in the top left, then you need to position the background so that it’s 0, 0 as at the screen’s 0, 0.

background.anchorX = 0

background.anchorY = 0

background.x = 0

background.y = 0

will no longer center your background but anchor it to the top left.  Then the bleed (right and bottom edges) will vary from device to device.

Rob

#9

I think I know what you’re saying, Rob. Please correct me if I’m wrong. So where I want to anchor the background depends on where I want to put my images on the grid? If its close to the edges, I need to anchor my background to the edge, and make that edge my 0,0. But if the edges don’t matter, its best to anchor it the center of the screen and make that center my 0,0?

Also an additional question to reassure myself. Since I’m using the config.lua in the “Modernizing the config.lua” article and I am planning to make an app only for mobile phones for now (I think none of them exceeds 1040 pixel width), not tablets, I only need one version of the background image with a resolution of 900(W)x1425(H)?

#10

Correct and Correct.

Rob

#11

Thanks a lot, Rob!!