LibGDX simple button with image

Question

I want to make two image buttons (play, restart) in my main menu screen but I dont know how to do it. I tried this:

Texture playTexture = new Texture(...)
Image playImage = new Image(playTexture)
ImageButton playButton = new ImageButton(drawable?)

but I have no idea what is drawable.

Answer 1

A drawable has information about its size and how to draw itself. It's used to determine size and position by ui components. Since you are using a texture, you can use a TextureRegionDrawable.

Drawable drawable = new TextureRegionDrawable(new TextureRegion(playTexture);
ImageButton playButton = new ImageButton(drawable);

Answer 2

Something like this should work;

public class MyGame extends Game
{
    private Stage stage;
    private Texture myTexture;
    private TextureRegion myTextureRegion;
    private TextureRegionDrawable myTexRegionDrawable;
    private ImageButton button;

    @Override
    public void create()
    {
        myTexture = new Texture(Gdx.files.internal("myTexture.png"));
        myTextureRegion = new TextureRegion(myTexture);
        myTexRegionDrawable = new TextureRegionDrawable(myTextureRegion);
        button = new ImageButton(myTexRegionDrawable); //Set the button up

        stage = new Stage(new ScreenViewport()); //Set up a stage for the ui
        stage.addActor(button); //Add the button to the stage to perform rendering and take input.
        Gdx.input.setInputProcessor(stage); //Start taking input from the ui
    }

    @Override
    public void render()
    {
        //Clear the screen, set the clear color, yada, yada

        stage.act(Gdx.graphics.getDeltaTime()); //Perform ui logic
        stage.draw(); //Draw the ui
    }
}

ImageButton and other ui elements all extend Actor. You can add an EventListener to each actor to handle input. An example;

button.addListener(new EventListener()
    {
        @Override
        public boolean handle(Event event)
        {
            //Handle the input event.
        }
    });

Answer 3

1. Create a stage
2. Create image Button
3. Write the action we required in the addListner method
4. Add the button into the stage
5. Draw the button in your render method.

Following is an example of this:

public class MenuScreen extends Game {

public GameScreen gameScreen;
public TextureAtlas butonAtlas;

private SpriteBatch batch;
private Texture texture;
private Sprite sprite;
public Stage stage;
public TextButton newGameButton

public Skin skin;

public MenuScreen(Game game) {
    super(game);

}

@Override
public void render(float deltaTime) {

    batch.begin();
    sprite.draw(batch);

    batch.end();
    stage.draw();

}

@Override
public void resize(int width, int height) {
}

@Override
public void show() {


    gameScreen = new GameScreen(game);
    butonAtlas = new TextureAtlas(
            Gdx.files.internal("buttons/buttons.pack"));
    stage = new Stage();
    skin = new Skin();
    skin.addRegions(butonAtlas);

    Gdx.input.setInputProcessor(stage);

    newGameButton.addListener(new EventListener() {

        @Override
        public boolean handle(Event event) {
            // TODO Auto-generated method stub
            // do some actions
            return false;
        }
    });


    float w = Gdx.graphics.getWidth();
    float h = Gdx.graphics.getHeight();


}

@Override
public void hide() {

    batch.dispose();
    butonAtlas.dispose();

    skin.dispose();
}

@Override
public void pause() {
}
}

Answer 4

Here is a simple tutorial on how to create Button, ImageButton and TextButton with LibGDX. Let me know if you have questions or comments.

https://libgdx.info/buttons-scene2d/

I hope it helps