scene2d button scaling with libgdx

Question

I don't know if it is just me, but drawables confuse me. Are they intended to keep the size they are given, or is there a way to scale the image within them? I understand they can use ninepatch to fill certain areas by stretching an image, but I want to scale the image that it stretches. I am using a TextButton for my menu buttons, but they are way too big, and I would love to know how to scale them. I am retrieving the skin from an atlas, which has ninepatch images in it. Here is the settings screen:

Here are the images in the pack I am using:

Here is the initialization of the TextureAtlas, and Skin:

buttonAtlas = new TextureAtlas(Gdx.files.internal("buttons/buttons.pack"));
buttonSkin = new Skin(buttonAtlas); 

Here is the initialization of that menu button.

TextButtonStyle textButtonStyle = new TextButtonStyle();
textButtonStyle.up = Assets.buttonSkin.getDrawable("bluebutton");
textButtonStyle.down = Assets.buttonSkin.getDrawable("redbutton");
textButtonStyle.font = font;

buttonMenu = new TextButton("Menu", textButtonStyle);
buttonMenu.pad(20.0f);
buttonMenu.addListener(new ClickListener() {
    @Override
    public void clicked(InputEvent event, float x, float y) {
        game.fade.startFadeOut();
        super.clicked(event, x, y);
    }
});

And perhaps I could change how I put it in the table, or how I put the table in the stage?

table.add(buttonMenu).width(Gdx.graphics.getWidth()/4);
stage.addActor(table);

As a last resort I suppose I could attempt creating my own text button actor that I could scale, thank you for your time.

Answer 1

First of all if you know that your images are too big: The best would be to scale the images themselves to a smaller size and then use the TexturePacker too generate a new TextureAtlas that contain the smaller images.

Anyhow you can scale the image button with the TableLayout if you really want to, see example:

table.add(buttonMenu).width(100).height(100);

Answer 2

The above answer didnt work for me, but i have a solution.

You can make a secondary camera and attach it to your stage. To scale the table just scale the viewport size of the secondary camera

An example would be:

//Heres where you set the scale of your buttons and your table
Camera secondaryCamera = new Camera(Gdx.graphics.getWidth() * scale, 
                                    Gdx.graphics.getHeight() * scale); 


Stage stage = new Stage();
Table table = new Table();
ImageButton button = new ImageButton(drawableUp, drawableDown, drawableChecked);
table.setFillParent(true);

stage.getViewport().setCamera(secondaryCamera);

table.add(ImageButton);
stage.addActor(table);

This works great when your using it for touch controls. You can use a table for the entire UI and scale it to your liking independent of your other game items;

Answer 3

table.add(buttonMenu).width(100).height(100); should work, and you just need to adjust the width and height parameters to your liking, or you can use the setBounds method. Here is an example:

    TextButton myButton = new TextButton("Press Me", style);
    myButton.setBounds(xCoordinate, yCoordinate, width, height);

Answer 4

You can set size of Drawable in ButtonStyle to resize your Button:

float scale = 0.5f;
float currentHeight = textButtonStyle.up.getMinHeight();
textButtonStyle.up.setMinHeight(currentHeight * scale);

For more information, see official document for layout:

UI widgets do not set their own size and position. Instead, the parent widget sets the size and position of each child. Widgets provide a minimum, preferred, and maximum size that the parent can use as hints. Some parent widgets, such as Table and Container, can be given constraints on how to size and position the children. To give a widget a specific size in a layout, the widget's minimum, preferred, and maximum size are left alone and size constraints are set in the parent.

And you can find the implementation of Button.getPrefHeight() in the source code:

public float getPrefHeight () {
    float height = super.getPrefHeight();
    if (style.up != null) height = Math.max(height, style.up.getMinHeight());
    if (style.down != null) height = Math.max(height, style.down.getMinHeight());
    if (style.checked != null) height = Math.max(height, style.checked.getMinHeight());
    return height;
}