SFML community forums

Help => Graphics => Topic started by: BeautiCode on July 22, 2014, 08:22:21 am

Title: Displaying text in center of screen
Post by: BeautiCode on July 22, 2014, 08:22:21 am
To try and display text in the center of the screen I do
text.setPosition(screen_width/2.0f,screen_height/2.0f);
 

But it displays the text somewhere close to the bottom left of the screen. Anyone know why? I looked on google,  I didn't understand much because mostly people were using getLocalBounds() and setOrigin(), what's the difference between that and setPosition();?
Title: Re: Displaying text in center of screen
Post by: Laurent on July 22, 2014, 08:34:46 am
setPosition will set the top-left corner of the text to the given position (by default). That's why people use getLocalBounds() + setOrigin(), to set the text's origin to its center instead of its top-left corner.
Title: Re: Displaying text in center of screen
Post by: Jesper Juhl on July 22, 2014, 08:52:17 am
An alternative, if you don't want to change the origin, is to get the width of the screen, subtract the width of the texts bounding box, divide the result by 2 and you are left with the x coordinate for a call to setPosition with the default origin. Similar calculation to get the y coordinate.
Title: Re: Displaying text in center of screen
Post by: BeautiCode on July 22, 2014, 10:17:54 pm
So how exactly would I use getLocalBounds() and setOrigin? Example please?
Title: Re: Displaying text in center of screen
Post by: Ixrec on July 22, 2014, 10:26:51 pm
They're in the tutorials.

http://www.sfml-dev.org/tutorials/2.1/graphics-sprite.php#ok-can-i-have-my-sprite-now
http://www.sfml-dev.org/tutorials/2.1/graphics-transform.php#bounding-boxes
Title: Re: Displaying text in center of screen
Post by: BeautiCode on July 23, 2014, 12:46:19 am
I'd really appreciate quick thorough examples tbh, instead of just commenting with a link to the tutorials page on the official website, or just giving a quick and less elaborative answer, please.
I do slightly understand but it'd be better with an example.
Title: Re: Displaying text in center of screen
Post by: zsbzsb on July 23, 2014, 03:11:54 am
Something like this for the X coordinate. And if this isn't enough information....  ::)

(X position) = (screen width) / 2 - (text width) / 2;
Title: Re: Displaying text in center of screen
Post by: Hapax on July 23, 2014, 03:44:02 am
(X position) = (screen width) / 2 - (text width) / 2;
I always prefer:
[X position] = ( [screen width] - [text width] ) / 2;  ;D

BeautiCode, I'm not sure what you're not understanding from the tutorials; the links to them went to the parts that explained setOrigin() and getLocalBounds(). As said above, set the origin to half of the size, which you can get from the local bounds (http://www.sfml-dev.org/documentation/2.1/classsf_1_1Text.php#a8a766ea03a1b8899cd1542765771a4ae) (feel free to click on the getLocalBounds' type if you need to know more about that type), and then just set the position to the centre of the window.

(click to show/hide)
Title: Re: Displaying text in center of screen
Post by: BeautiCode on July 23, 2014, 04:08:53 am
When I use setOrigin() my text doesn't get displayed at all, but when I use setPosition() it does.
Title: Re: Displaying text in center of screen
Post by: Hapax on July 23, 2014, 04:17:22 am
You need to use both  :P
setOrigin moves the origin's location. setPosition moves the sprites location based on its origin.

set the origin to half of the size...and then just set the position to the centre of the window.
Title: Re: Displaying text in center of screen
Post by: BeautiCode on July 23, 2014, 08:43:04 am
(http://i.imgur.com/bHSEzMo.png)
    text.setPosition(W_WIDTH/2.0f,W_HEIGHT/2.0f);
    text.setOrigin(text.getLocalBounds().width/2.0f,text.getLocalBounds().height/2.0f);
 
What am I doing wrong?
Title: Re: Displaying text in center of screen
Post by: Doodlemeat on July 23, 2014, 10:47:34 am
You mind posting the whole code? Try to use globalBounds instead of local.
Title: Re: Displaying text in center of screen
Post by: Laurent on July 23, 2014, 10:57:14 am
Quote
You mind posting the whole code?
A complete and minimal one, if possible.

Quote
Try to use globalBounds instead of local.
Nop, never do that. The origin must be given in local coordinates.
Title: Re: Displaying text in center of screen
Post by: Stauricus on July 23, 2014, 12:03:44 pm
    text.setPosition(W_WIDTH/2.0f,W_HEIGHT/2.0f);
    text.setOrigin(text.getLocalBounds().width/2.0f,text.getLocalBounds().height/2.0f);
 
What am I doing wrong?

what are the values of W_WIDTH and W_HEIGHT, and what is the window size?
Title: Re: Displaying text in center of screen
Post by: BeautiCode on July 23, 2014, 11:08:12 pm
The window height is the value of W_HEIGHT and the window width is the value of W_WIDTH.

    sf::Text text;
    text.setFont(default_font);
    text.setStyle(sf::Text::Bold | sf::Text::Underlined);
    text.setColor(sf::Color::White);
    text.setCharacterSize(textsize);
    text.setPosition(W_WIDTH/2.0f,W_HEIGHT/2.0f);
    text.setOrigin(text.getLocalBounds().left/2.0f,text.getLocalBounds().top/2.0f);
    text.setString("test"); //set version
    win->draw(text);
    win->display();
 

All the other code is in different classes and stuff and this one is not an open source project, so I didn't want to show much. But I think this is enough.
Title: Re: Displaying text in center of screen
Post by: Laurent on July 23, 2014, 11:15:03 pm
Quote
    text.setOrigin(text.getLocalBounds().left/2.0f,text.getLocalBounds().top/2.0f);
    text.setString("test"); //set version
Don't expect to get a non-empty rectangle if you call getLocalBounds() before setting the content of the text.
Title: Re: Displaying text in center of screen
Post by: BeautiCode on July 23, 2014, 11:37:57 pm
Quote
    text.setOrigin(text.getLocalBounds().left/2.0f,text.getLocalBounds().top/2.0f);
    text.setString("test"); //set version
Don't expect to get a non-empty rectangle if you call getLocalBounds() before setting the content of the text.
Alright thanks, gotchya.

But that still doesn't solve why the text isn't in the middle.
Title: Re: Displaying text in center of screen
Post by: Ixrec on July 23, 2014, 11:41:22 pm
He was trying to help you figure out that you need to put the setOrigin() line after the setString() line.
Title: Re: Displaying text in center of screen
Post by: BeautiCode on July 23, 2014, 11:55:20 pm
I just changed all of that and put it behind, but it still isn't in the center.
Title: Re: Displaying text in center of screen
Post by: krzat on July 24, 2014, 12:21:22 am
On the screenshot it looks like the width and height values are reversed. Check their definition if the W_WIDTH is really larger than W_HEIGHT.

If you don't want to show code, just write minimal example. It would take like 5 minutes.
Title: Re: Displaying text in center of screen
Post by: BeautiCode on July 24, 2014, 12:33:57 am
/
On the screenshot it looks like the width and height values are reversed. Check their definition if the W_WIDTH is really larger than W_HEIGHT.

If you don't want to show code, just write minimal example. It would take like 5 minutes.
You were indeed right.
I switched the values and It's like this now
(http://i.imgur.com/TQYOgkC.png)
It looks almost centered, but slightly too far right.
Title: Re: Displaying text in center of screen
Post by: BeautiCode on July 24, 2014, 12:40:59 am
Nevermind I fixed it. Thanks to all of you.
I appreciate your constant efforts to help, you all are very nice people.
Thanks.
Btw heres the part of the code for future reference
    text.setString("test");
    text.setPosition(W_WIDTH/2.0f,W_HEIGHT/2.0f); //Window width divided by 2, same with height.
    text.setOrigin(text.getLocalBounds().width/2.0f,text.getLocalBounds().height/2.0f);
 
Title: Re: Displaying text in center of screen
Post by: Hapax on July 24, 2014, 01:57:01 am
What did you change to fix the image you posted?
Title: Re: Displaying text in center of screen
Post by: BeautiCode on July 24, 2014, 02:06:07 am
I switch the W_WIDTH and W_HEIGHT value as they were mixed up.
And I accesed .width and .height from getLocalBounds() instead of left and top
EDIT: And put the setString() call before all of those
Title: Re: Displaying text in center of screen
Post by: Hapax on July 24, 2014, 02:10:28 am
Whoa. I didn't even notice that Laurent had put left and top. Well spotted, BeautiCode  :D
Title: Re: Displaying text in center of screen
Post by: Laurent on July 24, 2014, 07:38:35 am
Quote
I didn't even notice that Laurent had put left and top.
I didn't put them. I just didn't notice them :P
Title: Re: Displaying text in center of screen
Post by: janszy on July 24, 2014, 01:50:21 pm
In order to put your text right in the middle you need to switch the lines of setPosition and setOrigin. Now your text is positioned based on the top left corner of the bounding rectangle, and then you set the origin to the middle of it.
Title: Re: Displaying text in center of screen
Post by: Stauricus on July 24, 2014, 02:20:00 pm
that's why people asks for a minimal example. i asked for the values of W_HEIGHT, W_WIDTH, and the window size. the answer was:
Quote
The window height is the value of W_HEIGHT and the window width is the value of W_WIDTH.

which wasn't true after all. some things are too hard to guess. but i'm glad you could solve your problem.
Title: Re: Displaying text in center of screen
Post by: Hapax on July 24, 2014, 08:07:25 pm
Quote
Laurent had put left and top
I didn't
Wow. I didn't notice that it was in a quote. I think I must have been tired  :-[