Welcome, Guest. Please login or register. Did you miss your activation email?

Author Topic: Positioning button sides equally  (Read 2373 times)

0 Members and 1 Guest are viewing this topic.

makerimages

  • Newbie
  • *
  • Posts: 24
  • Yay!
    • View Profile
    • Email
Positioning button sides equally
« on: December 13, 2013, 02:28:44 pm »
Hey, I have this that makes my buttons:
contentT=sf::Text(content,*game->getGuiFont());
        contentT.setColor(sf::Color::Black);
        contentT.setCharacterSize(18);
        contentT.setPosition(xPos-content.length()/(2*contentT.getCharacterSize()), yPos-2);
        sprLeft=*game->getSpriteManager()->getSprite(3);
        sprLeft.setPosition(xPos-57,yPos);
       
        //sprLeft.setPosition(xPos-(content.length()/2)*(contentT.getCharacterSize()/(content.length()/2)),yPos);
        sprRight=*game->getSpriteManager()->getSprite(4);
        //sprRight.setPosition(xPos+(content.length()*content.length()*1.9),yPos);
        sprRight.setPosition(xPos+177,yPos);
 

what the matter here is, is that the sprLeft and sprRight are not aligned to equal positions on x when buttons are different in text lenght.

So for example

button with content "New Game" would be different sized than a button with content "Options", how could I make the buttons be equally sized/aligned no matter what the content lenght is?
Makerimages-It`s in the pixel

DashWave

  • Newbie
  • *
  • Posts: 9
    • View Profile
Re: Positioning button sides equally
« Reply #1 on: December 13, 2013, 03:20:55 pm »
I'm not really sure as to what you're doing, but here's how to centre text and a rectangle on the screen.
const int SCREEN_WIDTH = 1280;
const int SCREEN_HEIGHT = 720;

sf::Text centredText("hello", myFont);
sf::RectangleShape centredRectangle(sf::Vector2f(20.0f, 20.0f));

const sf::FloatRect textBounds = centredText.getLocalBounds();
const sf::FloatRect rectBounds = centredRectangle.getLocalBounds();

//Note that you have to add textBounds.left and textBounds.top because text can have non-zero left and top bounds
centredText.setOrigin(textBounds.width / 2.0f + textBounds.left, textBounds.height / 2.0f + textBounds.top);
centredRectangle.setOrigin(rectBounds.width / 2.0f, rectBounds.height / 2.0f);

centredText.setPosition(SCREEN_WIDTH / 2.0f);
centredRectangle.setPosition(SCREEN_HEIGHT / 2.0f);
 

I'm fairly certain the answer you're looking for is somewhere there.

makerimages

  • Newbie
  • *
  • Posts: 24
  • Yay!
    • View Profile
    • Email
Re: Positioning button sides equally
« Reply #2 on: December 13, 2013, 10:19:12 pm »
heres a schematic Im tring to do:

E TTTTTTTT E
E TTT E

T- text
E-button side sprite

as you can see, the buttons are not witht he same size,so what I asked for was how to make them the same size, no matter what txt is in them?
Makerimages-It`s in the pixel

MrMuffins

  • Newbie
  • *
  • Posts: 30
    • View Profile
Re: Positioning button sides equally
« Reply #3 on: December 14, 2013, 07:43:05 am »
Simply set the buttons width to a fixed size then center the string.

Or out of all the buttons strings, get the one with the biggest width and use that as the size, that way you always have buttons with fixed sizes relative to whatever strings you use.

 

anything