Corona - how to align arrows with text?

Question

I'm using the Corona sdk to create a simple Android game. I have it almost completely done, just trying to polish now. This is something that I'm having trouble with:

enter image description here

This is my game's setup page. Players are able to tap the up/down arrows to increase/decrease game attributes. I want the arrows to align with the numbers. My current code does not account for this:

local numPlayerstxt = display.newText("Number of players:  "..NUMPLAYERS, w/2,7*h/20,0,0,"Quattrocento-Regular",24)
    numPlayerstxt:setFillColor(0,0,0)
    sceneGroup:insert(numPlayerstxt)

local numMafiatxt = display.newText("Number of Mafia:  "..MAFIA, w/2,12*h/20,0,0,"Quattrocento-Regular",24)
    numMafiatxt:setFillColor(0,0,0)
    sceneGroup:insert(numMafiatxt)

local upTotal = display.newImage( "arrow1.png")
    upTotal:translate(33*w/40, 6*h/20)
    upTotal:scale(0.08, 0.08)
    sceneGroup:insert(upTotal)
    upTotal:addEventListener("tap", increasePlayers)

local downTotal = display.newImage( "arrow1.png")
    downTotal:translate(33*w/40, 8*h/20)
    downTotal:scale(0.08, 0.08)
    downTotal.rotation = 180
    sceneGroup:insert(downTotal)
    downTotal:addEventListener("tap", decreasePlayers)

local upMafia = display.newImage( "arrow1.png")
    upMafia:translate(32*w/40, 11*h/20)
    upMafia:scale(0.08, 0.08)
    sceneGroup:insert(upMafia)
    upMafia:addEventListener("tap", increaseMafia)

local downMafia = display.newImage( "arrow1.png")
    downMafia:translate(32*w/40, 13*h/20)
    downMafia:scale(0.08, 0.08)
    downMafia.rotation = 180
    sceneGroup:insert(downMafia)
    downMafia:addEventListener("tap", decreaseMafia)

As you can see, my code currently only takes into account screen width and height values in order to reasonably estimate the approximate locations. Inevitably this code fails to create any illusion of polish when the app is tried on different device screens.

Any suggestions on what I might do to align the arrows with the numbers? For instance, is there a way in Corona to find the end point of a textview, and align it in that way?

Thanks for reading.

Separate the count from the label and then use center alignment on the count and place it relative to the arrows. Otherwise the only way to keep the "Number of Mafia ##" and buttons aligned will involve moving the label or buttons when the value changes or switching to a fixed-width font none of which are good options. — ryanpattison

Mohammad Ali Saatchi Mohammad Ali Saatchi · Accepted Answer · 2015-05-23T18:27:36

try changing the anchorX of each arrows like this:

-- suppose one of your arrows is upArrow
upArrow.anchorX = 0.4 -- even try each float between 0 - 1

this move your object's anchor in x axis of the object.

Corona - how to align arrows with text?

1 Answers