Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Centering TextField doesn't work perfectly — Gideros Forum

Centering TextField doesn't work perfectly

cokeramirezcokeramirez Member
edited March 2015 in Bugs and issues
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

Comments

  • piepie Member
    @cokeramirez try using application:getDeviceWidth() instead of getContentWidth()
  • @pie it has the exact same result :/

    May be that the font kerning is in some way wrong?
  • velobuffvelobuff Member
    Accepted Answer
    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?
  • Set you application scaling to stretch, that might be it.
    Coder, video game industry veteran (since the '80s, ❤'s assembler), arrested - never convicted hacker (in the '90s), dad of five, he/him (if that even matters!).
    https://deluxepixel.com
  • @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.
  • Here is the file, it disappeared when I accepted @velobuff answer :/
    zip
    zip
    QuickCalories.zip
    803K
  • 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.
  • 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()
  • Thank you! I'll take a look tomorrow :)
Sign In or Register to comment.