Are anchor points different for text than for an image?

rpallen · December 2017

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

antix · December 2017

@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))

rpallen · December 2017

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.

oleg · December 2017

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)

hgy29 · December 2017

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.

Howdy, Stranger!

Categories

In this Discussion

Top Posters

Are anchor points different for text than for an image?

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

Are anchor points different for text than for an image?

Comments