Centering text on the screen with SFML

Dani Torramilans picture Dani Torramilans · Jan 24, 2013 · Viewed 21.2k times · Source

I'm using SFML 2.0 libraries on Ubuntu 12.10, using

sudo apt-get install libsfml-dev

to get them. Now I'm trying to get a sf::Text centered in the sreen. To do this, I set the origin of the text (the place that is used to make transformations such as setting position, rotating, etc) to the center of the bounding box of the sf::Text, and then set the position to the center of the screen, like so:

//declare text
sf::Font font;
sf::Text text;
font.loadFromFile("helvetica.ttf");
text.setFont(font);
text.setString("RANDOMTEXT");
text.setCharacterSize(100);
text.setColor(sf::Color::White);
text.setStyle(sf::Text::Regular);

//center text
sf::FloatRect textRect = text.getLocalBounds();
text.setOrigin(textRect.width/2,textRect.height/2);
text.setPosition(sf::Vector2f(SCRWIDTH/2.0f,SCRHEIGHT/2.0f));

This does not work, the text is off by some amount, like 3 on the x axis and 25 on the y axis. Oddly, if you set up a sf::RectangleShape to represent the bounding box of the text, that rectangle IS centered and correctly sized to fit the text. But then the text is drawn out of that box with the previously mentioned offset.

In this image I've marked the center of the screen, painted a sf::RectangleShape in the place of the bounding box of the text, and the sf::Text.

http://i.imgur.com/4jzMouj.png

That image was generated by this code:

const int SCRWIDTH = 800; 
const int SCRHEIGHT = 600;

int main() {
sf::RenderWindow window;
window.create(sf::VideoMode(SCRWIDTH,SCRHEIGHT), "MYGAME" ,sf::Style::Default);
window.setMouseCursorVisible(false);
window.setVerticalSyncEnabled(true);

sf::Font font;
sf::Text text;
font.loadFromFile("helvetica.ttf");
text.setFont(font);
text.setString("RANDOMTEXT");
text.setCharacterSize(100);
text.setColor(sf::Color::White);
text.setStyle(sf::Text::Regular);

sf::FloatRect textRect = text.getLocalBounds();

text.setOrigin(textRect.width/2,textRect.height/2);
text.setPosition(sf::Vector2f(SCRWIDTH/2.0f,SCRHEIGHT/2.0f));

sf::RectangleShape rect(sf::Vector2f(textRect.width,textRect.height));
rect.setFillColor(sf::Color::Blue);
rect.setOrigin(rect.getSize().x/2,rect.getSize().y/2);
rect.setPosition(text.getPosition());

sf::RectangleShape RectW;
RectW.setSize(sf::Vector2f(SCRWIDTH, 0.0));
RectW.setOutlineColor(sf::Color::Red);
RectW.setOutlineThickness(1);
RectW.setPosition(0, SCRHEIGHT / 2);
sf::RectangleShape RectH;
RectH.setSize(sf::Vector2f(0.0, SCRHEIGHT));
RectH.setOutlineColor(sf::Color::Red);
RectH.setOutlineThickness(1);
RectH.setPosition(SCRWIDTH / 2, 0);

while(window.isOpen()) {
    window.clear();
    window.draw(rect);
    window.draw(text);
    window.draw(RectW);
    window.draw(RectH);
    window.display();
    if (sf::Keyboard::isKeyPressed(sf::Keyboard::Escape)) {
        window.close();
    }
}
return 1;
}

How can I get it to be centered and inside of it's bounding box, as it should be?

Answer

Emile Cormier picture Emile Cormier · Mar 6, 2013

sf::Text::getLocalBounds() has non-zero values for the top and left fields, so you can't ignore them when centering the origin.

Try this instead:

//center text
sf::FloatRect textRect = text.getLocalBounds();
text.setOrigin(textRect.left + textRect.width/2.0f,
               textRect.top  + textRect.height/2.0f);
text.setPosition(sf::Vector2f(SCRWIDTH/2.0f,SCRHEIGHT/2.0f));