SFML community forums

Help => Graphics => Topic started by: makerimages on December 13, 2013, 02:28:44 pm

Title: Positioning button sides equally
Post by: makerimages 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?
Title: Re: Positioning button sides equally
Post by: DashWave 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.
Title: Re: Positioning button sides equally
Post by: makerimages 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?
Title: Re: Positioning button sides equally
Post by: MrMuffins 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.