CODEWITHSUNDEEP
javauser-interfacelibgdx
thesameritan
thesameritan

Reputation: 89

LIBGDX - Table's textButtons are not filling the respective rows

I was recently working on a game which utilises Scene2D until I ran into this problem as shown in this picture:

enter image description here

The bounds in which I'm able to click the button exceed the actual TextButton's area

I've read the documentation for TableLayouts in the GitHub page here and have read different articles about Scene2D in general, and I tried fiddling around with the different functions (eg padding, colSpan) to try to come to a solution but I can't seem to find a work around for this.

Here is the code responsible for the setup and drawing of the table:

table = new Table();
table.setDebug(true);
table.add(graphicsButton).width(200f).height(200f);
table.row();
table.add(audioButton).width(200f).height(200f);
table.row();
table.add(backToTitleButton).width(200f).height(200f);

table.setBounds(0, 0, stage.getWidth(), stage.getHeight());

stage.addActor(table);

And here is the rest of the code (note that I haven't centred the text within the buttons yet, I've only added filler values, also - I've removed the empty functions from the Screen class for convenience)

import com.badlogic.gdx.Game;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.Screen;
import com.badlogic.gdx.scenes.scene2d.InputEvent;
import com.badlogic.gdx.scenes.scene2d.Stage;
import com.badlogic.gdx.scenes.scene2d.ui.Table;
import com.badlogic.gdx.scenes.scene2d.ui.TextButton;
import com.badlogic.gdx.scenes.scene2d.ui.TextField;
import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
import com.badlogic.gdx.utils.viewport.ScreenViewport;
import com.thesameritan.game.GUI.UI;

public class OptionsScreen extends ScreenProperties implements Screen {

    private Stage stage;
    private Table table;

    OptionsScreen (final Game game) {
        super();

        stage = new Stage(new ScreenViewport());
        Gdx.input.setInputProcessor(stage);

        TextButton backToTitleButton = UI.createNewButton("BACK", buttonStyle, 0.8f, 25f, 0.9f); //creates button from another class with text, style, padBottom, padLeft and fontScale
        TextButton graphicsButton = UI.createNewButton("GRAPHICS", buttonStyle, 0.9f, 20f, 0.9f);
        TextButton audioButton = UI.createNewButton("AUDIO", buttonStyle, 0.9f, 20f, 0.9f);


        backToTitleButton.addListener(new ClickListener() {
            @Override
            public void clicked(InputEvent event, float x, float y) {
                //branch to title
            }
        });

        graphicsButton.addListener(new ClickListener() {
            @Override
            public void clicked(InputEvent event, float x, float y) {
                //branch to graphics
            }
        });

        audioButton.addListener(new ClickListener() {
            @Override
            public void clicked(InputEvent event, float x, float y) {
                //branch to options
            }
        });

        table = new Table();
        table.setDebug(true);
        table.add(graphicsButton).width(200f).height(200f);
        table.row();
        table.add(audioButton).width(200f).height(200f);
        table.row();
        table.add(backToTitleButton).width(200f).height(200f);

        table.setBounds(0, 0, stage.getWidth(), stage.getHeight());

        stage.addActor(table);
    }

    @Override
    public void render (float delta) {
        clearScreen(); //from ScreenProperties
        stage.draw();
    }

    @Override
    public void dispose() {
        disposeObjects(); //from ScreenProperties
        stage.dispose();
    }
}

What I would like is either minimising the gaps between the buttons without affecting the button's size - which again, I've tried by changing the .width() and .height() values or actually reduce the size of the interactive area (shown in the red lines)

Thank you so much!

Upvotes: 1

Views: 168

Answers (1)

MrStahlfelge
MrStahlfelge

Reputation: 1791

The interesting and missing part here is UI.createNewButton.

Instead of setting debug to the outer table, you can debug the button itself: backToTitleButton.setDebug(true). You'll see that the click bounds doesn't exceed the buttons area, but the graphical representation is not correct. I suspect you aren't using a Ninepatch for the Rectangle.

Upvotes: 1

Related Questions