Text Alignment

Hi All,

For my game I would like to have the score text be displayed in the top right corner of every device. However, I have been having issues making it align in the top right corner on iPhone 5, 6, 6+, as well as the iPad Air and iPad mini.

If anybody here can help me out with aligning text that would be great. On some devices it will be perfectly aligned, whereas on others it will be cut off the scene.

 
Thanks!

I have had this same problem!

Never really got around to try to fix it tho.

Maybe someone out there has a fix? 

I think youll need to get some math working if you want it to be perfect on every device tho…

In  a example @RoamingGamer had on adsMob he used math to place the banner ad at the top or bottom of every screen…

Heres what he used…

local unusedWidth = display.actualContentWidth - display.contentWidth local unusedHeight = display.actualContentHeight - display.contentHeight local left = 0 - unusedWidth/2 local top = 0 - unusedHeight/2 local right = display.contentWidth + unusedWidth/2 local bottom = display.contentHeight + unusedHeight/2 local function showAd( adPosition ) local xPos, yPos local adPosition = "bottom" if adPosition == "top" then xPos = display.screenOriginX yPos = top elseif adPosition == "bottom" then xPos = display.screenOriginX yPos = bottom end ads:setCurrentProvider("admob") ads.show( "banner", { x = xPos,y = yPos, appId = bannerID } ) end showAd( "bottom" )

There it is! And it works pretty amazing… Maybe some tweaking and it’ll be working for this problem?..

Good Luck!

Also, don’t forget anchors.

If you want some object aligned to a corner (say upper right) you can do this:

local myText = display.newTest( "Hi This will align to upper right on all screens", display.contentCenterX + display.actualContentWidth/2, display.contentCenterY - display.actualContentHeight/2, native.systemFont, 10 ) myText.anchorX = 1 mytext.anchorY = 0

or using the shorthand code sonic mentioned:

local unusedWidth = display.actualContentWidth - display.contentWidth local unusedHeight = display.actualContentHeight - display.contentHeight local left = 0 - unusedWidth/2 local top = 0 - unusedHeight/2 local right = display.contentWidth + unusedWidth/2 local bottom = display.contentHeight + unusedHeight/2 local myText = display.newTest( "Hi This will align to upper right on all screens", right, top, native.systemFont, 10 ) myText.anchorX = 1 mytext.anchorY = 0
local scoreText = display.newText("123", display.contentWidth - 25, 25, native.systemFontBold, 18 ) scoreText.anchorY = 1

It will stay 25 pixels away from the right edge and 12.5 pixels from the top (centered since I didn’t change the anchor).

Now the value for the right edge will be determined on how you have your config.lua configured. If you’re using a dynamically sized content area where the content area changes based on the screen, you can use display.contentWidth.  If you’re using a fixed content area size, then you would use display.actualContentWidth to get the right edge.

Rob

I have had this same problem!

Never really got around to try to fix it tho.

Maybe someone out there has a fix? 

I think youll need to get some math working if you want it to be perfect on every device tho…

In  a example @RoamingGamer had on adsMob he used math to place the banner ad at the top or bottom of every screen…

Heres what he used…

local unusedWidth = display.actualContentWidth - display.contentWidth local unusedHeight = display.actualContentHeight - display.contentHeight local left = 0 - unusedWidth/2 local top = 0 - unusedHeight/2 local right = display.contentWidth + unusedWidth/2 local bottom = display.contentHeight + unusedHeight/2 local function showAd( adPosition ) local xPos, yPos local adPosition = "bottom" if adPosition == "top" then xPos = display.screenOriginX yPos = top elseif adPosition == "bottom" then xPos = display.screenOriginX yPos = bottom end ads:setCurrentProvider("admob") ads.show( "banner", { x = xPos,y = yPos, appId = bannerID } ) end showAd( "bottom" )

There it is! And it works pretty amazing… Maybe some tweaking and it’ll be working for this problem?..

Good Luck!

Also, don’t forget anchors.

If you want some object aligned to a corner (say upper right) you can do this:

local myText = display.newTest( "Hi This will align to upper right on all screens", display.contentCenterX + display.actualContentWidth/2, display.contentCenterY - display.actualContentHeight/2, native.systemFont, 10 ) myText.anchorX = 1 mytext.anchorY = 0

or using the shorthand code sonic mentioned:

local unusedWidth = display.actualContentWidth - display.contentWidth local unusedHeight = display.actualContentHeight - display.contentHeight local left = 0 - unusedWidth/2 local top = 0 - unusedHeight/2 local right = display.contentWidth + unusedWidth/2 local bottom = display.contentHeight + unusedHeight/2 local myText = display.newTest( "Hi This will align to upper right on all screens", right, top, native.systemFont, 10 ) myText.anchorX = 1 mytext.anchorY = 0
local scoreText = display.newText("123", display.contentWidth - 25, 25, native.systemFontBold, 18 ) scoreText.anchorY = 1

It will stay 25 pixels away from the right edge and 12.5 pixels from the top (centered since I didn’t change the anchor).

Now the value for the right edge will be determined on how you have your config.lua configured. If you’re using a dynamically sized content area where the content area changes based on the screen, you can use display.contentWidth.  If you’re using a fixed content area size, then you would use display.actualContentWidth to get the right edge.

Rob