How to center text in a box?

General discussion about LÖVE, Lua, game development, puns, and unicorns.
afella
Prole
Posts: 2
Joined: Sun May 22, 2011 4:36 am

How to center text in a box?

Post by afella »

Hello,

I want to create simple variation of 15 puzzle http://en.wikipedia.org/wiki/Fifteen_puzzle

Image

I do not want to use pre-renderd images for buttons.

How do I draw an square with a number inside, so that number is centered (horizontally and vertically) inside that square?

Is there a way to have a text string and figure out what is the pixel size for this string on screen? Something like

height, width = love.graphics.getTextSize("Hello, world!")

Thank you!
User avatar
BlackBulletIV
Inner party member
Posts: 1261
Joined: Wed Dec 29, 2010 8:19 pm
Location: Queensland, Australia
Contact:

Re: How to center text in a box?

Post by BlackBulletIV »

Hello and welcome!

There is indeed a way, you'll have to use the Font class to do it. First create a new font like this:

Code: Select all

font = love.graphics.newFont(24) -- whatever size you need, I suspect 24 is good
(Make sure you do this in love.load or similar; as in, only call it once.) Then to get the width and height, use this Font:getWidth and Font:getHeight:

Code: Select all

font:getWidth("Your text here")
font:getHeight() -- height never changes, but it's a good practice to use this function in case you change the size
Hope that helps!

EDIT: Also, in future use the [ code ] (without the spaces of course) for block-style code examples.
User avatar
Taehl
Dreaming in associative arrays
Posts: 1025
Joined: Mon Jan 11, 2010 5:07 am
Location: CA, USA
Contact:

Re: How to center text in a box?

Post by Taehl »

Uh, that's one way to do it. Or you could just use love.graphics.printf with the AlignMode "center".
Earliest Love2D supporter who can't Love anymore. Let me disable pixel shaders if I don't use them, dammit!
Lenovo Thinkpad X60 Tablet, built like a tank. But not fancy enough for Love2D 0.10.0+.
User avatar
Robin
The Omniscient
Posts: 6506
Joined: Fri Feb 20, 2009 4:29 pm
Location: The Netherlands
Contact:

Re: How to center text in a box?

Post by Robin »

Taehl wrote:Uh, that's one way to do it. Or you could just use love.graphics.printf with the AlignMode "center".
Except that doesn't align vertically, does it?
Help us help you: attach a .love.
User avatar
BlackBulletIV
Inner party member
Posts: 1261
Joined: Wed Dec 29, 2010 8:19 pm
Location: Queensland, Australia
Contact:

Re: How to center text in a box?

Post by BlackBulletIV »

Taehl wrote:Uh, that's one way to do it. Or you could just use love.graphics.printf with the AlignMode "center".
True. Then you've just got to use the height to align vertically.
User avatar
Taehl
Dreaming in associative arrays
Posts: 1025
Joined: Mon Jan 11, 2010 5:07 am
Location: CA, USA
Contact:

Re: How to center text in a box?

Post by Taehl »

I thought printf aligned it vertically? Oh well, if not, it would just be a matter of adding a fixed offset to its position.
Earliest Love2D supporter who can't Love anymore. Let me disable pixel shaders if I don't use them, dammit!
Lenovo Thinkpad X60 Tablet, built like a tank. But not fancy enough for Love2D 0.10.0+.
User avatar
Jasoco
Inner party member
Posts: 3726
Joined: Mon Jun 22, 2009 9:35 am
Location: Pennsylvania, USA
Contact:

Re: How to center text in a box?

Post by Jasoco »

Does getHeight() account for the height of the letter box? Or the current characters? What I mean is "a" is smaller than "l" which would have a different box than "g" and all together you'd have "alg" which would span from the top of the l to the bottom of the g. Would getHeight() return that height even if it's just "a" or "al" or "ag"? (I'm unable to test it right now)
User avatar
BlackBulletIV
Inner party member
Posts: 1261
Joined: Wed Dec 29, 2010 8:19 pm
Location: Queensland, Australia
Contact:

Re: How to center text in a box?

Post by BlackBulletIV »

No getHeight() doesn't account for any characters, it's a property of the font itself, because getHeight() doesn't receive any arguments (like getWidth() does). I'm not exactly sure what the number it returns relation is with the size you specify, but I do know it's the height. For example, the default font with a size of 12 has a height of 14, 14 is 16, 32 is 42, and 72 is 84, so yeah.
User avatar
Lafolie
Inner party member
Posts: 809
Joined: Tue Apr 05, 2011 2:59 pm
Location: SR388
Contact:

Re: How to center text in a box?

Post by Lafolie »

I'd have thought it was the X-Height of the typeface, which is most likely specified here as the number you give when you create the font object.
Do you recognise when the world won't stop for you? Or when the days don't care what you've got to do? When the weight's too tough to lift up, what do you? Don't let them choose for you, that's on you.
User avatar
BlackBulletIV
Inner party member
Posts: 1261
Joined: Wed Dec 29, 2010 8:19 pm
Location: Queensland, Australia
Contact:

Re: How to center text in a box?

Post by BlackBulletIV »

That's what I thought too, but it doesn't seem so.
Post Reply

Who is online

Users browsing this forum: Google [Bot] and 2 guests