Quick Links: Download Gideros Studio | Gideros Documentation | Gideros community chat | DONATE
Are anchor points different for text than for an image? — Gideros Forum

Are anchor points different for text than for an image?

rpallenrpallen Member
edited December 2017 in General questions
Hello,

I'm having some problems with positioning text for buttons. Apparently, I'm not understanding anchor points correctly (at least not for text, especially the "y" component). What I tried doing in the code below is center the text on the button. What I did was:
-create a button from an image
-set the anchor point to (0.5, 0.5)
-set the position to ( conf.width * 0.5 , conf.height * 0.6667 )
-create text with the class TextWrap with a field width of the width of the button image and alignment = "center"
-set the anchor point to (0.5, 0.5)
-set the position to ( conf.width * 0.5 , conf.height * 0.6667 )

I assumed that since I gave both the image and the text an anchor point at its center and the same position, the text would be centered on the button.

Alas, as you can see in the attached screenshot, that's not what I got. Though the text appears to be centered on the button, left to right, it APPEARS that vertically, it is centered on the top edge of the image.

I added a couple of print statements to see the location of the anchor points. Those statements are below with their output below. Below them is the output produced by those print statements.

Can someone tell me why this isn't working as I expected it to?
And can someone tell me how to align the text vertically to the center of the button?

--Start Button (image)
local bitmap = Bitmap.new(Texture.new("images/rectangularButton.png", true))
local startButton = ButtonRect.new(bitmap)
startButton:setAnchorPoint(0.5, 0.5)
startButton:setPosition( conf.width * 0.5, conf.height * 0.6667 )
backgroundLayer:addChildAt(startButton,2)

--Start Button (text)
local buttonText = TextWrap.new("Go to the Game", startButton:getWidth(), "justify", 5, font.r36)
buttonText:setAnchorPoint(0.5, 0.5)
buttonText:setPosition( conf.width * 0.5, conf.height * 0.6667 )
buttonText:setTextColor(color.red)
backgroundLayer:addChild(buttonText)
--print statements for debugging
print("startButton anchor points: ", startButton:get("anchorX"), startButton:get("anchorY"))
print("buttonText anchor points: ", buttonText:get("anchorX"), buttonText:get("anchorY"))

--print statement output (note: the image file is 501x56)
startButton anchor points: 250.5 28
buttonText anchor points: 96.5 14.5

Comments

  • antixantix Member
    edited December 2017 Accepted Answer
    @rpallen, fonts are strange beasts.. I use getBounds() to get the numbers required to calculate a TextField position. HEre's a wee example you can run to see how...
     
    --[[
    positions a TextField in the middle of the screen.
    --]]
     
    local floor = math.floor
     
    local width = application:getContentWidth()
    local height = application:getContentHeight()
     
    local pixel = Pixel.new(0x884422, 1, width * 0.5, height * 0.5)
    stage:addChild(pixel)
     
    local font = Font.getDefault()
     
    local text = TextField.new(font, "Center This")
    text:setTextColor(0x224488)
    stage:addChild(text)
     
    -- get dimensions
    local x, y, w, h = text:getBounds(text)
     
    -- set position relative to dimensions
    text:setPosition(width * 0.5 - floor(w * 0.5), height * 0.5 + floor(h * 0.5))
  • Thanks, Antix.
    In doing some further research I found a post from November 2012, In that post (after saying, "The anchor point for textfields is at the bottom left and cannot be changed." ), John26 shared a very short and simple function:

    function centreAt(sprite,x,y)
    local w=sprite:getWidth()
    local h=sprite:getHeight()

    sprite:setPosition(math.floor(x-w/2),math.floor(y+h/2))
    end

    I put this function in my config.lua file. I call it with centreAt(a, b, c), where
    a=the name of the textfield, b and c are the x and y where I want the center of the textfield to be. I've already tried it and it works wonderfully.

    Likes: antix

    +1 -1 (+1 / -0 )Share on Facebook
  • use a negative value
    local text = TextField.new(nil, "Hello, world!")
    text:setScale(35)
    text:setAnchorPoint(0,-1)
    --text:setAnchorPoint(0,-0.5)
    stage:addChild(text)

    Likes: antix

    my games:
    https://play.google.com/store/apps/developer?id=razorback456
    мій блог по гідерос https://simartinfo.blogspot.com
    Слава Україні!
    +1 -1 (+1 / -0 )Share on Facebook
  • hgy29hgy29 Maintainer
    To be more precise, texts are drawn on the baseline: it is the same is if you were handwriting on a sheet of paper, the line you are writing on is the reference (baseline) and your letters are drawn mostly upwards, only a few letters have a downward part (like q,y,p,g,j,...). Upper part is called the ascender and lower part the descender. You can query the ascender size from the Font object, and use it as an Y offset to poisition your text from the top side.

    Alternatively, new TextField layout parameters include a way to specify the reference point to be used when drawing. Use TLF_REF_TOP to instruct gideros to use text top as a reference when drawing.
    +1 -1 (+3 / -0 )Share on Facebook
Sign In or Register to comment.