Centering TextField doesn't work perfectly

cokeramirez

Hello!

I'm using the technique used here to center a TextField:

http://giderosmobile.com/forum/discussion/381/center-textfield/p1

Basically

(application:getContentWidth()/2) - (textfield:getWidth()/2)

, but the text field (that is being updated when a value changes and re positioned) get's a little uncentered.

here is my code:

fontLarge = TTFont.new("fonts/Questrial-Regular.ttf", 80, true)   txtCalories = TextField.new(fontLarge, todayCalories .. " kcal") addCalories(0) txtCalories:setTextColor(0x00FF7A) stage:addChild(txtCalories)   function addCalories (val) todayCalories = todayCalories + val txtCalories:setText(todayCalories .. " kcal") txtCalories:setPosition((application:getContentWidth()/2) - (txtCalories:getWidth()/2), 390) end

I'm using a Google Web font, and can see that is uncentered both in the player on my phone (android) and on my pc (mac).

My guess is that it's an error in calculating the width of the TextField, like when the first number is a "1" is thinking that the 1 is bigger than it actually is :-/

Is there a better way to do this? I'm very, very new on Gideros.

Cheers

pie

@cokeramirez try using application:getDeviceWidth() instead of getContentWidth()

cokeramirez

@pie it has the exact same result

May be that the font kerning is in some way wrong?

velobuff

Probably the kerning or something is weird. Does it work correctly with another font? Can you zip up and upload the project for us to try?

SinisterSoft

Set you application scaling to stretch, that might be it.

cokeramirez

@velobuff I tried with another font at it seems it works well with it, at least at plain sight (which is enough for me)

I attached the project with the font that doesn't work (Comfortaa-Regular), and another font that seems to work(Questrial-Regular) (you should have to change it in the code)

@sinistersoft the scaling didn't seem to work.

I think it's the font fault or is a bug concerning that specific font.

cokeramirez

Here is the file, it disappeared when I accepted @velobuff answer

velobuff

I added some methods to draw lines around your text and to put a line down the center of the screen. I also, as suggested above by @pie , changed your code to center using application:getContentWidth(). So @pie's answer is probably most correct

My code is attached.

Note that text is drawn from the baseline - so the boxes are actually UNDER the text. But the boxes show that your text is centered.

You should also make your background big enough to fill the space of devices that you plan on using. @ar2rsawseen 's book is excellent in this regard I used the default iPhone 320x 480 and there was a black left edge of probably 20 pixels.

velobuff

OK File upload isn't working here are my methods

function drawCenterLine()
center_line:clear()
center_line:setLineStyle(1, 0xffff00)
center_line:beginPath()
center_line:moveTo(application:getContentWidth()/2,0)
center_line:lineTo(application:getContentWidth()/2, application:getContentHeight())
center_line:endPath()
stage:addChild(center_line)
end

function drawAroundText(txtCalories)
shp:clear() -- Clear the canvas of any previous drawing it may have
shp:beginPath() -- Start all drawing
shp:setLineStyle(1, 0xff0000)
shp:moveTo(txtCalories:getX(),txtCalories:getY())
shp:lineTo(txtCalories:getX()+txtCalories:getWidth(), txtCalories:getY())
shp:lineTo(txtCalories:getX() + txtCalories:getWidth(),txtCalories:getY() + txtCalories:getHeight())
shp:lineTo(txtCalories:getX(),txtCalories:getY() + txtCalories:getHeight())
shp:closePath()
shp:endPath()
stage:addChild(shp)
end

txtCalories:setPosition((application:getContentWidth()/2) - (txtCalories:getWidth()/2), 390)


txtCalories:setTextColor(0x00FF7A)
stage:addChild(txtCalories)

--velobuff added these 2 methods
drawAroundText(txtCalories)
drawCenterLine()

cokeramirez

Thank you! I'll take a look tomorrow