Centering across multiple devices

Hello all. I am having some issue with getting a logo to be centered across multiple devices.

here is my config:

 

application = { content = { fps = 60, -- Desired frame rate width = 320, -- Desired width of the application height = 480, -- Desired height of the application -- Scaling mode, should the screen not fit the width and height exactly scale = "zoomEven", --[[Other options include: "none" no dynamic content scaling "letterbox" uniform scaling of content with black bars surrounding content "zoomEven" scaling of content to fill screen while preserving aspect ratio (some content may be offscreen) "zoomStretch" scaling of content to fill screen by stretching to fit height and width (results in distorted imagery) --]] --Suffixes for images so that the right image can loaded according to platform imageSuffix = { ["@1-5x"] = 1.5, -- Various Android phones. ["@2x"] = 2, -- iPhone 4 and higher, iPod touch, iPad1, and iPad2 ["@3x"] = 3, -- Various Android tablets ["@4x"] = 4, -- iPad 3+ } }, }

in my main.lua I have the logo as follows:

 local logo = display.newImageRect("images/logo.png",250,125); logo.x = \_W \* 0.5; logo.y = \_H \* 0.3; logo:setReferencePoint(display.TopCenterReferencePoint)

here is how it looks on multiple devices:

iPhone       = centered

iPhone4     = centered

iPhone5    = off to the left

iPad          = centered
iPad Retina = center

Droid     = off to the left
Nexus One  = off to the left but not as much
Sensation   = off to the left

Galaxy Tab = to the left
Galaxy S3 = to the left

Kindle Fire = to the left
Kindle HD 7 = almost centered

Kindle HD 9 = almost centered

Nook Color = to the left

Thus far the only way I have been able to center my logo is by setting the config to letterbox. It is my understanding that the black lines on the sides are not desirable for a game.

Any help on this would be appreciated. Thanks :slight_smile:

 
 

Not too sure if this is the problem, but in general I think you should set the reference point first, then the x/y coordinates:

local logo = display.newImageRect("images/logo.png",250,125); logo:setReferencePoint(display.TopCenterReferencePoint); logo.x = \_W \* 0.5; logo.y = \_H \* 0.3;

try using

[lua]

local logo = display.newImageRect(“images/logo.png”,250,125);

logo:setReferencePoint(display.TopCenterReferencePoint);

logo.x = _W * 0.5-display.screenOriginX;

logo.y = _H * 0.3-display.screenOriginY;

[/lua]

Thank you guys. I will give this a try at lunch today. You guys rock!

I still had the logo showing up to the left. I did figure this out though. to get the logo to center across all devices I used:

 

logo.x = display.contentWidth\*0.5 logo.y = display.contentHeight\*0.2

 

Actually you probably should do:

logo.x = display.contentCenterX

We do the math up front, so it will save your app a few CPU cycles…

Not too sure if this is the problem, but in general I think you should set the reference point first, then the x/y coordinates:

local logo = display.newImageRect("images/logo.png",250,125); logo:setReferencePoint(display.TopCenterReferencePoint); logo.x = \_W \* 0.5; logo.y = \_H \* 0.3;

try using

[lua]

local logo = display.newImageRect(“images/logo.png”,250,125);

logo:setReferencePoint(display.TopCenterReferencePoint);

logo.x = _W * 0.5-display.screenOriginX;

logo.y = _H * 0.3-display.screenOriginY;

[/lua]

Thank you guys. I will give this a try at lunch today. You guys rock!

I still had the logo showing up to the left. I did figure this out though. to get the logo to center across all devices I used:

 

logo.x = display.contentWidth\*0.5 logo.y = display.contentHeight\*0.2

 

Actually you probably should do:

logo.x = display.contentCenterX

We do the math up front, so it will save your app a few CPU cycles…