Search code examples
androidlibgdx

Libgdx, Stage doesnt fit into the screen and the button are not centered within the Table

I am currently working on a StartMenu for my very first android game and there are 3 Problems that I am currently encountering:

1) the stage doesn't fit perfectly into the screen. I already tried to pass the different viewport types (stretch-, fit, extendviewport) to the stage Constructor, but none of them really worked out as I intended. I also tried different parameters for the viewport (e.g. numbers like 480, 800 but also Gdx.graphics.getWidth()), but I am unable to make the Menu resolution independent (tried on s3 mini and on Huawei P8), it either turns out too small or too big.

2) the settings buttons is not centered within the table cell.

3) the buttons change size. when pressed, they fill the cell in which they are in, how do I disable this feature? (i defined the button skin with a JSON-file, by the way, but I doubt this is the cause)

@Override
public void resize(int width, int height) {
   stage.getViewport().update(width, height, true);
}

@Override
public void show() {
    stage = new Stage(new ExtendViewport(Constants.VIEWPORT_GUI_WIDTH, Constants.VIEWPORT_GUI_HEIGHT));
    Gdx.input.setInputProcessor(stage);
    rebuildStage();
}

private void rebuildStage() {
    skinStartMenu = new Skin(
            Gdx.files.internal(Constants.SKIN_Start_Menu_UI),
            new TextureAtlas(Constants.Start_Menu_Texture_Atlas)); 

    Table layerControls = buildControlsLayer();
    stage.clear();
    Stack stack = new Stack();
    stage.addActor(stack);
    stack.setSize(Constants.VIEWPORT_GUI_WIDTH, Constants.VIEWPORT_GUI_HEIGHT);
    stack.add(layerControls);
}

private Table buildControlsLayer() {
    Table layer = new Table();
    // + Play Button
    btnMenuPlay = new Button(skinStartMenu, "play");
    layer.add(btnMenuPlay);
    btnMenuPlay.addListener(new ChangeListener() {
        @Override
        public void changed(ChangeEvent event, Actor actor) {
            onPlayClicked();
        }
    });
    layer.row();
    // + Options Button
    btnMenuOptions = new Button(skinStartMenu, "options");
    layer.add(btnMenuOptions);
    btnMenuOptions.addListener(new ChangeListener() {
        @Override
        public void changed(ChangeEvent event, Actor actor) {
            onOptionsClicked();
        }
    });
    if (debugEnabled) layer.debug();
    return layer;
}

No Button Pressed; Button Pressed

Edit: I solved the first problem by resizing the cells of the table, however i still do not have a workaround for problem 2) and 3).

Solution

  • Okay, I found the root of my problems. stupid me exported the png-files of the button in different sizes. thats why the buttons got taller when pressed. i thought this was a feature of the button-widget, which was enabled by default x). The problem with the stage size was solved, by simply changing the size of the table-cells in which the buttons where contained via " layer.add(btnMenuPlay).size(273, 150);".

    The StartMenu looks like this now: enter image description here