Richard Moreton
Richard Moreton

Reputation: 55

Centering textbutton to screen libgdx

I am currently creating a game using LibGDX and I am creating my Title Screen at the moment. I am having trouble centering TextButtons on the screen, I can get them centered fine if the set the width of the TextButton to the width of the stage but then anywhere you click left to right of that button allows the button to be pressed and not if you're just clicking on the button itself.

How could I get the TextButtons centered to the game screen and centered on each other? I've got three TextButtons(New Game, Continue and Exit Game).

Any help would be greatly appreciated, thanks!

Edit:

Here is the code for my three buttons.

btnNG = new TextButton("New Game", btnStyle[0]) {
    {
        setName("New Game");
        addListener(new InputListener() {
            public boolean touchDown(InputEvent e, float x, float y, int pointer, int button) {
                g.debugOut(btnNG.getName(), "touchDown?");
                return true;
            }

            public void touchUp(InputEvent e, float x, float y, int pointer, int button) {
                g.debugOut(btnNG.getName(), "touchUp?");
                //g.switchScreen(new Mainscreen(g));
            }
        });
        setWidth(sTitle.getWidth());
        setPosition(0, (getHeight() * 2.5f));
    }
};

btnContinue = new TextButton("Continue", btnStyle[0]) {
    {
        setName("Continue");
        addListener(new InputListener() {
            public boolean touchDown(InputEvent e, float x, float y, int pointer, int button) {
                g.debugOut(btnContinue.getName(), "touchDown?");
                return true;
            }

            public void touchUp(InputEvent e, float x, float y, int pointer, int button) {
                g.debugOut(btnContinue.getName(), "touchUp?");
            }
        });
        setWidth(sTitle.getWidth());
        setPosition(0, (getHeight() * 1.4f));
    }
};

btnExit = new TextButton("Exit Game", btnStyle[0]) {
    {
        setName("Exit Game");
        addListener(new InputListener() {
            public boolean touchDown(InputEvent e, float x, float y, int pointer, int button) {
                g.debugOut(btnExit.getName(), "touchDown?");
                return true;
            }

            public void touchUp(InputEvent e, float x, float y, int pointer, int button) {
                g.debugOut(btnExit.getName(), "touchUp?");
                //Gdx.app.exit();
            }
        });
        setWidth(sTitle.getWidth());
        setPosition(0, (getHeight() * .3f));
    }
};

That is what I have so far, it is centered but doing so allows it to be clicked by pressing anywhere on the screen to the left/right of the actual text.

Upvotes: 2

Views: 2786

Answers (3)

user4408936
user4408936

Reputation: 53

Set the x of each button to be the same so that they will be aligned. Set the x position to the half of the width of the screen minus the half the width of your button like this --> ( widthOfScreen / 2 ) - ( buttonWidth / 2 )

Upvotes: 1

desertkun
desertkun

Reputation: 1037

You could put them into the Table container, and allow it to take care about aligning:

Table container = new Table();
container.add(btnNG).expandX().center().row();
container.add(btnContinue).expandX().center().row();
container.add(btnExit).expandX().center().row();
// add container to some Stage

Also, you could call padTop(x) after each center() to define offsets. Please read more here about table layout.

Upvotes: 2

Tanmay Patil
Tanmay Patil

Reputation: 7057

I guess sTitle is your stage object...


Are you adding buttons directly to the stage?

If so, I'd recommend using a Table.

Table menuTable = new Table();
menuTable.add(btnNG);
menuTable.row();
menuTable.add(btnContinue);
menuTable.row();
menuTable.add(btnExit);
menuTable.setFillParent(true);
sTitle.addActor(menuTable);

Note 1:
Remove all setSize and setPosition calls on all buttons.
Remove other addActor calls.

Note 2:
For advanced features, refer TableLayout

Upvotes: 5

Related Questions