Sign in to follow this  
BaneTrapper

SFML Drawing text Onto buttons problem

Recommended Posts

Hellow.
I am learning SFML atm, and i am curious how to deal with this problem.

I am trying to draw text onto button, and i do not know how to position text correctly intro square so it looks tidy
and hardcoding it in is not an option!

I have this:
[CODE]
class Button{
public:
int x;
int y;
int w;
int h;
}

int main()
{
// stuff happens
Button Button1;
Button1.w = 400;
Button1.h = 200;
Button1.x = SCREEN_WIDTH / 2 - (Button1.w / 2);
Button1.y = SCREEN_HEIGHT / 2 - (Button1.h / 2);
// its basically a simple square of collor

sf::Text tempText;
tempText.setString("Test");
tempText.setCharacterSize(20);
tempText.setFont(FontList[whichFont]);// its fine here
tempText.setColor(sf::Color(255,255,255));

tempText.setPosition(float PosX, float PosY); // Here is the problem
//sould be something like
tempText.setPostion( (Button1.x + (Button1.w / 2) - (tempText.SizeOfPrintedTextWidth / 2)) ,
(Button1.y + (Button2.h / 2) - tempText.SizeOfPrintedTextHeight / 2))
}
[/CODE]

This way i calculated it in SDL, but i cant figure it out in SFML, cant get the size of text i am about to print... so any help or tips are appreciated. Edited by BaneTrapper

Share this post


Link to post
Share on other sites
Use sf::Text::getLocalBounds() or sf::Text::getGlobalBounds().

The prior is local coordinates, while the later is translated in world space ( aka, translated and rotated, etc... ). Either returns a sf::Rect representing the dimensions of the text.

Share this post


Link to post
Share on other sites
look at the documentation of sf::Text at sfml-dev.org if you haven't. You need to set sf::Text::setOrigin() as well. For a practical demonstration have a look at coding made easy's youtube video tutorial on this issue. That should hopefully fix this problem for you

Share this post


Link to post
Share on other sites
[quote name='Serapth' timestamp='1348018801' post='4981501'][/quote]
[quote]
The prior is local coordinates
[/quote]
I don't understand this one.

[quote]
while the later is translated in world space
[/quote]
I don't understand this one ether.

[quote]
Use sf::Text::getLocalBounds() or sf::Text::getGlobalBounds().
[/quote]
Thanks for setting me to right tracks. Edited by BaneTrapper

Share this post


Link to post
Share on other sites
[quote name='frazchaudhry' timestamp='1348031867' post='4981546']
look at the documentation of sf::Text at sfml-dev.org if you haven't. You need to set sf::Text::setOrigin() as well. For a practical demonstration have a look at coding made easy's youtube video tutorial on this issue. That should hopefully fix this problem for you
[/quote]
I have looked at sf::Text documentation and i did not know what LocalBounds meant, well i still don't know what does it mean. But i will check it up and see what i can do.
Oh well more hard grind.
Thanks

Share this post


Link to post
Share on other sites
here look at this code, its from that tutorial I told you about how to use sf::Text.

[CODE]
#include <SFML/Graphics.hpp>
const float SCREENWIDTH = 800.0f;
const float SCREENHEIGHT = 600.0f;
int main()
{
sf::VideoMode VMode(SCREENWIDTH, SCREENHEIGHT, 32);
sf::RenderWindow Window(VMode, "SFML made easy 23");
sf::Vector2f fontPosition(SCREENWIDTH / 2.0f, SCREENHEIGHT / 2.0f);
sf::Font gameFont;
gameFont.loadFromFile("fonts/DoktorTerror.ttf");
sf::Text gameText("DoktorTerror", gameFont, 100);
gameText.setColor(sf::Color(255, 0, 0));
sf::FloatRect textRect = gameText.getLocalBounds();
gameText.setOrigin(textRect.width / 2, textRect.height / 2);
gameText.setPosition(fontPosition);
while (Window.isOpen())
{
sf::Event Event;
while(Window.pollEvent(Event))
{
switch (Event.type)
{
case sf::Event::Closed:
{
Window.close();
break;
}
case sf::Event::KeyPressed:
{
if (Event.key.code == sf::Keyboard::Escape)
Window.close();
break;
}
}
}
Window.clear();
Window.draw(gameText);
Window.display();
}
return 0;
}
[/CODE]

change the font to your own compile it and run it. Then try and understand the code by modifying it for yourself. That is what I do when I want to understand something new.

Share this post


Link to post
Share on other sites
[quote name='frazchaudhry' timestamp='1348032572' post='4981551']
here look at this code, its from that tutorial I told you about how to use sf::Text.

[CODE]
#include <SFML/Graphics.hpp>
const float SCREENWIDTH = 800.0f;
const float SCREENHEIGHT = 600.0f;
int main()
{
sf::VideoMode VMode(SCREENWIDTH, SCREENHEIGHT, 32);
sf::RenderWindow Window(VMode, "SFML made easy 23");
sf::Vector2f fontPosition(SCREENWIDTH / 2.0f, SCREENHEIGHT / 2.0f);
sf::Font gameFont;
gameFont.loadFromFile("fonts/DoktorTerror.ttf");
sf::Text gameText("DoktorTerror", gameFont, 100);
gameText.setColor(sf::Color(255, 0, 0));
sf::FloatRect textRect = gameText.getLocalBounds();
gameText.setOrigin(textRect.width / 2, textRect.height / 2);
gameText.setPosition(fontPosition);
while (Window.isOpen())
{
sf::Event Event;
while(Window.pollEvent(Event))
{
switch (Event.type)
{
case sf::Event::Closed:
{
Window.close();
break;
}
case sf::Event::KeyPressed:
{
if (Event.key.code == sf::Keyboard::Escape)
Window.close();
break;
}
}
}
Window.clear();
Window.draw(gameText);
Window.display();
}
return 0;
}
[/CODE]

change the font to your own compile it and run it. Then try and understand the code by modifying it for yourself. That is what I do when I want to understand something new.
[/quote]

I tried out your code...
It does not print text in middle of the screen...
I added lines to middle of the screen :P, please make sure the code is correct before posting.
Tho, thanks for the helpful code.
[CODE]
#include <SFML/System.hpp>
#include <SFML/Graphics.hpp>
#include <SFML/window.hpp>
#define SCREENWIDTH 800
#define SCREENHEIGHT 600
int main()
{
sf::VideoMode VMode(SCREENWIDTH, SCREENHEIGHT, 32);
sf::RenderWindow Window(VMode, "SFML made easy 23");
sf::Vector2f fontPosition(SCREENWIDTH / 2.0f, SCREENHEIGHT / 2.0f);
sf::Font gameFont;
gameFont.loadFromFile("Font.ttf");
sf::Text gameText("Hello", gameFont, 128);
gameText.setColor(sf::Color(255, 255, 255));
sf::FloatRect textRect = gameText.getLocalBounds();
gameText.setOrigin(textRect.width / 2, textRect.height / 2);
gameText.setPosition(fontPosition);
sf::RectangleShape RectW;
RectW.setSize(sf::Vector2f(SCREENWIDTH, 0.0));
RectW.setOutlineColor(sf::Color::Red);
RectW.setOutlineThickness(1);
RectW.setPosition(0, SCREENHEIGHT / 2);
sf::RectangleShape RectH;
RectH.setSize(sf::Vector2f(0.0, SCREENHEIGHT));
RectH.setOutlineColor(sf::Color::Red);
RectH.setOutlineThickness(1);
RectH.setPosition(SCREENWIDTH / 2, 0);
while (Window.isOpen())
{
sf::Event Event;
while(Window.pollEvent(Event))
{
switch (Event.type)
{
case sf::Event::Closed:
{
Window.close();
break;
}
case sf::Event::KeyPressed:
{
if (Event.key.code == sf::Keyboard::Escape)
Window.close();
break;
}
default:
break;
}
}
Window.clear();
Window.draw(gameText);
Window.draw(RectW);
Window.draw(RectH);
Window.display();
}
return 0;
}
[/CODE] Edited by BaneTrapper

Share this post


Link to post
Share on other sites
[quote name='BaneTrapper' timestamp='1348058186' post='4981654']


I tried out your code...
It does not print text in middle of the screen...
I added lines to middle of the screen [img]http://public.gamedev.net//public/style_emoticons/default/tongue.png[/img], please make sure the code is correct before posting.
Tho, thanks for the helpful code.
[/quote]

hmm that's strange. I actually did check it before posting and I've checked it again and it works fine. Anyway it's good that you found it useful. Good luck!

Share this post


Link to post
Share on other sites
[quote name='frazchaudhry' timestamp='1348060971' post='4981669'].
hmm that's strange. I actually did check it before posting and I've checked it again and it works fine. Anyway it's good that you found it useful. Good luck!
[/quote]
It prints text, but its not in middle of the screen...its off.
If i print font size 16, its like 10-50 pixels off in -Y axis.
Bigger it is, the more off in -Y axis Edited by BaneTrapper

Share this post


Link to post
Share on other sites
This time I copy pasted the code on this web page onto a blank SFML project, and it still is fine at my end. I even changed the font size to multiple different sizes to check whether the position gets changed, but its always in the center for me no matter what the size. There must be more to this than just the code.
Are you using sfml 2.0? When did you install it? SFML 2.0 went through many changes itself in the past several months so that could be a factor as well.

Share this post


Link to post
Share on other sites
Actually after a little bit of further testing it appears that you are correct. The issue is that SFML automatically sets an offset to left and top coordinates of the text's bounding rectangle according to the size of the text. This offset appears to increase if we increase the size of the text. At size 100, the offset to the left coordinate is 1 and top is 14, at size 200 the offset increases to 3 and 30 respectively. This is the reason the text is not exactly at the center of the screen as the size of the text increases.
Although for me this offset is negligible and won't really affect my programs but still I would like to get it to exactly the place I want it. I will do a bit more research on this and post here if I find anything.

Share this post


Link to post
Share on other sites
[quote name='frazchaudhry' timestamp='1348126183' post='4981950']
Actually after a little bit of further testing it appears that you are correct. The issue is that SFML automatically sets an offset to left and top coordinates of the text's bounding rectangle according to the size of the text. This offset appears to increase if we increase the size of the text. At size 100, the offset to the left coordinate is 1 and top is 14, at size 200 the offset increases to 3 and 30 respectively. This is the reason the text is not exactly at the center of the screen as the size of the text increases.
Although for me this offset is negligible and won't really affect my programs but still I would like to get it to exactly the place I want it. I will do a bit more research on this and post here if I find anything.
[/quote]
I have really tight buttons and i want to put text intro them directly, i work most of the day, and am tired when i come home so i don't get much time to investigate.
Would be nice if found something.

Share this post


Link to post
Share on other sites
same here didn't really get time to really investigate this issue because of work but for your problem I did come across this thread on the official SFML forums. [url="http://en.sfml-dev.org/forums/index.php?topic=8413.msg56478#msg56478"]http://en.sfml-dev.org/forums/index.php?topic=8413.msg56478#msg56478[/url] .
you might wanna check that out. If that doesn't help try posting your problem there hopefully they'll provide you with the solution to your problem

Share this post


Link to post
Share on other sites
[quote name='frazchaudhry' timestamp='1348214040' post='4982273']
same here didn't really get time to really investigate this issue because of work but for your problem I did come across this thread on the official SFML forums. [url="http://en.sfml-dev.org/forums/index.php?topic=8413.msg56478#msg56478"]http://en.sfml-dev.o...g56478#msg56478[/url] .
you might wanna check that out. If that doesn't help try posting your problem there hopefully they'll provide you with the solution to your problem
[/quote]
Thank you very much.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this