Search code examples
androidimagelibgdxscene2dskin

LibGDX ImageTextButton same image is shown for all buttons when separate image files are used

I am developing a main menu screen for a game I'm developing for Android using LibGDX. It requires three ImageTextButtons - Play, Settings, Log out. Each of these three buttons has a different image associated with it, however, when I run the application, each button has the same image - the log out image. I am thinking that this may be to do with the fact that the log out button is the last button declared so perhaps it overwrites the images for the other buttons?

This is a screenshot of how the main menu currently looks:

As you can see, the same log out icon is displayed on all buttons even though I have loaded and used different image files for each of the buttons. Here is the code for constructing and initializing the buttons: 

private ImageTextButton playBtn, settingsBtn, logoutBtn;

public void initButtons(){
    playBtn = new ImageTextButton("Play", skin, "default");
    playBtn.getStyle().imageUp = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("playBtn.png"))));
    playBtn.getStyle().imageDown = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("playBtn.png"))));

    settingsBtn = new ImageTextButton("Settings", skin, "default");
    settingsBtn.getStyle().imageUp = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("settingsBtn.png"))));
    settingsBtn.getStyle().imageDown = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("settingsBtn.png"))));

    logoutBtn = new ImageTextButton("Log Out", skin, "default");
    logoutBtn.getStyle().imageUp = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("logoutBtn.png"))));
    logoutBtn.getStyle().imageDown = new TextureRegionDrawable(new TextureRegion(new Texture(Gdx.files.internal("logoutBtn.png"))));
}

Here is the show method in which I make/load the skin and call the method to initialize the buttons:

@Override
public void show() {
    Gdx.input.setInputProcessor(stage);

    this.skin = new Skin();
    this.skin.addRegions(MathsVsZombies.manager.get("UI/uiskin.atlas", TextureAtlas.class));
    this.skin.add("default-font", MathsVsZombies.font24);
    this.skin.load(Gdx.files.internal("UI/uiskin.json"));

    initButtons();
    }

In order to get the ImageTextButtonStyle to work I had to add this code to the skin JSON file: 

"com.badlogic.gdx.scenes.scene2d.ui.ImageTextButton$ImageTextButtonStyle":{
"default": { "down": "default-round-down", "up": "default-round", "font": "default-font", "fontColor": "white" }
  },

It is the same code for the "default" style of a TextButton. Perhaps this is where the issue lies? I am positive that the image files are stored under the correct directory and they are all stored together. This is what they should look like:

playBtn.pngsettingsBtn.pnglogoutBtn.png

Please help solve this as I have very limited knowledge in LibGDX and gamedev in general so I don't know what is wrong, let alone how to fix it.

Solution

  • Skin will use the same instance of style for each button, so when you getStyle() and update the drawables, every button using that style will be updated.

    Normally, you'd specify a separate style for each distinct button type in the skin itself, but you can also make a copy of the style before changing the drawables if you like.