# Bitmap Font Displays in Center Always Without Coding it Manually (Fix Coordinate Problem onText)

Is there a way on how to stay the texts in center without manually coding it or something, especially when making an update? I'm making a display for the highest score. Let's say that the score is 9. However, if the score is 9,999,999, the text displays still only at the fixed X and Y coordinate. Is there really a way to stay the text in center especially when there is changes when a player beats the new world record?

Here's my code inside Sprite Batch:

        font.setScale(1.5f);
font.draw(batch, "HIGHEST SCORE:", (900/10)*1 + 60, (1280/16)*10);
font.draw(batch, "" + 9999999 + "", (900/10)*4, (1280/16)*8);

batch.draw(grid_guide, 0, 0, 900, 1280); // --> For testing purpose only.

// Where 9999999 is a new record score for example.


Here's the image shown as example. I add it some red grid so that I could check if the display of score when updated will always display on center no matter how many digits takes place in. However, it is fixed, so I have to figure it out how to display it automatically on center regardless of the number of digits while updating for the new highscore. I have used the LibGDX preferences very well though to save and load records for the highscore.

I don't know about the platform you're using, but there are mostly three ways to center text. Not all of them are available on all platforms, so you should check your platform documents and see which one of these is available.

1. The font rendering system has a flag or option to draw centered text. Look for something like font.textAlignment.

2. The font rendering system has a way to measure the size a rendered string will take before you render it. Look for something like font.measureText, and subtract half the width of the measurement to the coordinate where you want the text to be centered.

3. Render to an intermediate target, measure the rendered text and copy the rendered data into your canvas. Look for rendering targets, but this is probably the most difficult and hackish solution, so I wouldn't recommend it.

Have you tried googling "libgdx center text" or something like that?

• Hmmm...How about if I only using the BitmapFont only instead of Label from Scene2D? – David Dimalanta Dec 18 '12 at 8:30
• Then you use GetBounds (libgdx.l33tlabs.org/docs/api/com/badlogic/gdx/graphics/g2d/…, int, int)) to measure the size of the text, to implement it as my second proposal. Check karimamin.com/archives/37 . Just for reference, I found these by googling "BitmapFont libgdx center". I don't mind answering questions, but you will probably get your answers faster if you ask google before asking at SE. – Panda Pajama Dec 18 '12 at 14:03

You could determine the width of the text by the amount of characters of the string, its length, with constant values for the height and width of individual characters. This way, if you have a font in which, at a certain scale, letters have an average of 5 pixels of width, and you have a string of 4 characters (say, "1000"), the width of it would be 20 pixels.

With this in mind, you can determine the X coordenate of the string (assuming its point is at its absolute top-left) with the following formula:

    locationToPrint.X = (screenWidth - stringWidth) / 2;


All in pixels as the unity.

Of course, because in most fonts characters have variated widths, this is not absolutely precise. But don't worry, it would go unnoticed by your average human eye, so unless you're up to map the width of every character of your font of preference, keep things simple.

I know this question is a bit old, and newer libGDX versions don't even have getBounds anymore, but the font draw method now comes with an horizontal align parameter, so you now just have to use something like:

font.draw(batcher, "my text", 0, y coord, screen witdh, Align.center, false);

The parameter list from the docs is:

draw(Batch batch, java.lang.CharSequence str, float x, float y, float targetWidth, int halign, boolean wrap)