SFML Drawing text Onto buttons problem

Started by
12 comments, last by BaneTrapper 11 years, 7 months ago
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:

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))
}


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.
Advertisement
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.
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]

The prior is local coordinates

I don't understand this one.


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


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

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

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
here look at this code, its from that tutorial I told you about how to use sf::Text.


#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;
}


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.

here look at this code, its from that tutorial I told you about how to use sf::Text.


#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;
}


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.


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.

#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;
}



I tried out your code...
It does not print text in middle of the screen...
I added lines to middle of the screen tongue.png, please make sure the code is correct before posting.
Tho, thanks for the helpful code.


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!
.
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!

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
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.

This topic is closed to new replies.

Advertisement