Jump to content

  • Log In with Google      Sign In   
  • Create Account

Awesome job so far everyone! Please give us your feedback on how our article efforts are going. We still need more finished articles for our May contest theme: Remake the Classics

SFML Drawing text Onto buttons problem


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
13 replies to this topic

#1 BaneTrapper   Members   -  Reputation: 617

Like
0Likes
Like

Posted 18 September 2012 - 03:15 PM

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.

Edited by BaneTrapper, 18 September 2012 - 03:20 PM.

Current projects:
The Wanderer, 2d turn based rpg style game

www.gamedev.net/topic/641117-check-up-the-wanderer/


Sponsor:

#2 Serapth   Members   -  Reputation: 3285

Like
1Likes
Like

Posted 18 September 2012 - 07:40 PM

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.

#3 frazchaudhry   Members   -  Reputation: 691

Like
1Likes
Like

Posted 18 September 2012 - 11:17 PM

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

#4 BaneTrapper   Members   -  Reputation: 617

Like
0Likes
Like

Posted 18 September 2012 - 11:19 PM


The prior is local coordinates

I don't understand this one.

while the later is translated in world space

I don't understand this one ether.

Use sf::Text::getLocalBounds() or sf::Text::getGlobalBounds().

Thanks for setting me to right tracks.

Edited by BaneTrapper, 18 September 2012 - 11:20 PM.

Current projects:
The Wanderer, 2d turn based rpg style game

www.gamedev.net/topic/641117-check-up-the-wanderer/


#5 BaneTrapper   Members   -  Reputation: 617

Like
0Likes
Like

Posted 18 September 2012 - 11:24 PM

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

Current projects:
The Wanderer, 2d turn based rpg style game

www.gamedev.net/topic/641117-check-up-the-wanderer/


#6 frazchaudhry   Members   -  Reputation: 691

Like
1Likes
Like

Posted 18 September 2012 - 11:29 PM

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.

#7 BaneTrapper   Members   -  Reputation: 617

Like
1Likes
Like

Posted 19 September 2012 - 06:36 AM

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

Edited by BaneTrapper, 19 September 2012 - 06:41 AM.

Current projects:
The Wanderer, 2d turn based rpg style game

www.gamedev.net/topic/641117-check-up-the-wanderer/


#8 frazchaudhry   Members   -  Reputation: 691

Like
1Likes
Like

Posted 19 September 2012 - 07:22 AM

I tried out your code...
It does not print text in middle of the screen...
I added lines to middle of the screen Posted Image, 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!

#9 BaneTrapper   Members   -  Reputation: 617

Like
0Likes
Like

Posted 19 September 2012 - 02:06 PM

.
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

Edited by BaneTrapper, 19 September 2012 - 02:07 PM.

Current projects:
The Wanderer, 2d turn based rpg style game

www.gamedev.net/topic/641117-check-up-the-wanderer/


#10 frazchaudhry   Members   -  Reputation: 691

Like
1Likes
Like

Posted 20 September 2012 - 12:24 AM

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.

#11 frazchaudhry   Members   -  Reputation: 691

Like
1Likes
Like

Posted 20 September 2012 - 01:29 AM

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.

#12 BaneTrapper   Members   -  Reputation: 617

Like
0Likes
Like

Posted 21 September 2012 - 01:25 AM

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.

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.

Current projects:
The Wanderer, 2d turn based rpg style game

www.gamedev.net/topic/641117-check-up-the-wanderer/


#13 frazchaudhry   Members   -  Reputation: 691

Like
1Likes
Like

Posted 21 September 2012 - 01:54 AM

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. http://en.sfml-dev.org/forums/index.php?topic=8413.msg56478#msg56478 .
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

#14 BaneTrapper   Members   -  Reputation: 617

Like
0Likes
Like

Posted 21 September 2012 - 06:15 AM

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. http://en.sfml-dev.o...g56478#msg56478 .
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

Thank you very much.

Current projects:
The Wanderer, 2d turn based rpg style game

www.gamedev.net/topic/641117-check-up-the-wanderer/





Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS