How to Center Text In Libgdx

An interesting dilemma that I ran into when working on my game in Libgdx with your favorite subject! Fonts, specifically today, I wanted to talk about how to center text in Libgdx.

For example, let’s say you want to have text on an HP bar. How would you keep it in the center? You might try to manually position the text to be in the middle doing something like this:

steps.setPosition(60, 19);

If you do that, it will work and you might get something like this:

But let’s say w   that if we want to keep the numbers in position where they are now and our 1,000 becomes 10,000, here’s what we get:

If you can see, our denominator was pushed further left. This might not be a problem for smaller numbers, but if you have larger ones or numbers of different sizes like 9999 vs 1111, then you might see a problem.

So what do we have to do if we want to always keep the division number in the center or our progress bar so that everything is consistent?

The answer is simple: we have to do some math to adjust the text!

Step 1: Putting Our Text in the Center

If you want to center an image, in respect to something else, we should already know the position of the element we’re trying to center our text in.

So let’s say that our progress bar is located at: 100, 100 (x, y).

The progress bar’s dimension is 100 x 20 (width, height).

Our text is 10,000/10,000 which we want to center on the “/”. To achieve this value, we need to position our text the width of the numerator to the left so that we can center the “/”. Let’s say the width of the numerator is 25 pixels.

Now that we know the position and size of our progress bar and the text, the first thing we have to do is set our text to be in the middle of the bar. In this example (ignoring height), that would be the:

• Center point of bar: x of bar + width of bar/2 which would give us something around 150 and the height would be 110.
• Then we need to adjust the x position of our text to the left by the width of the numerator to center our “/” symbol

And that’s it!

Step 2: Adjust the Position of the Text to Match the Size

Now that we have the general idea on what to do, let’s get to see some real code.

The biggest problem that you’ll encounter is when trying to position the text is to figure out the size of the text. The text size varies based off of the length and even the type of number used.

Luckily in LibGdx, we have the GlyphLayout class that can help us figure out the exact size of the string of your choice!

Using it is pretty simple, here’s a method I wrote to get the position for me:

private float getPositionOffset(BitmapFont bitmapFont, String value) {
    GlyphLayout glyphLayout = new GlyphLayout();
    glyphLayout.setText(bitmapFont, value);
    return (MenuConstants.HEADER_STEP_BAR_WIDTH / 2) - glyphLayout.width;
}

All you need to do is create an instance of GlyphLayout and give it the bitmapFont type you want to use with the text and then you can get the width and height of the text you inserted!

In this example, I already did some calculations with HEADER_STEP_BAR_WIDTH, which as you might guess is the width of the progress bar. I divided it by 2 in order to figure out the center point of the progress bar.

And I called the method in my constructor/draw()/or wherever else you want to add your logic by doing something like this to get the correct position:

steps.setPosition(60 + getPositionOffset(f, "1,000"), 19);

In this particular instance, the X location of my progress bar is at 60 and I added the width of it and then subtracted our numerator offset to put our division sign in the middle. You can ignore the rest.

With this line of code now, you’ll be able to have a dynamically changing text that will always be in the center no matter what the value of the numerator and the denominator is.

Here’s an example of our progress bar with our new code!

Notice that now the “/” is in the center of the bar now? Awesome!

Hopefully, you’ve found this helpful. If you have any questions, leave a comment below!

The post How to Center Text In Libgdx appeared first on Coding Chronicles.

CodeProject