4
\$\begingroup\$

I am using Libgdx's Scene2D API to build my UI and everything has been working as expected until now. I created a Skin and a TextureAtlas and linked them as so:

Skin skin = new Skin();
TextureAtlas uiElements1 = new TextureAtlas("skins/uielements1.txt");
skin.addRegions(uiElements1);
skin.load(Gdx.files.internal("skins/uiskin.json"));

And then I tried to create a Table:

Table table = new Table(skin);
table.setWidth(stage.getWidth());
table.align(Align.center|Align.top);
table.setPosition(0, Gdx.graphics.getHeight());
table.padTop(30);
table.setBackground("grey_button02");

Finally, I added a Label to the Table:

Label gameTitle = new Label("Nameless Project", skin, "title");
table.add(gameTitle).padBottom(10).row();

Once I added the Table to my Stage, only the elements in it would show up and not the background image. I tried using background(String s), setBackground(String s), background(Drawable d), and setBackground(Drawable d). None of those seemed to work for me.

I also tried calling pack() and setFillParent(true) but both of those made my table disappear. I have gone through just about every Google result and I can't find anyone else with my issue.

Here is my uiskin.json file

{
  com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: fonts/FutureThin.fnt } },
  com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
   default: { down: blue_button03, up: blue_button04, font: default-font },
  },
  com.badlogic.gdx.scenes.scene2d.ui.Window$WindowStyle: {
    default:  {
      titleFont: default-font
     }
   },
   com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
    title: {
        font: default-font
     }
   }
}

And the entire class rendering the stage:

public class MainMenu implements Screen {

    GameClass myGame;

    Stage stage;
    Skin skin;

    Table table;
    TextButton singlePlayer;
    TextButton multiPlayer;
    Label gameTitle;


    public MainMenu(GameClass g) {
        myGame = g;

        // Create Skin, load texture Atlas, load skin
        skin = new Skin();
        TextureAtlas uiElements1 = new TextureAtlas("skins/uielements1.txt");
        skin.addRegions(uiElements1);
        skin.load(Gdx.files.internal("skins/uiskin.json"));

        // Create stage
        stage = new Stage(new ScreenViewport());

        // Create Table
        table = new Table(skin);
        table.setWidth(stage.getWidth());
        table.align(Align.center|Align.top);
        table.setPosition(0, Gdx.graphics.getHeight());
        table.padTop(30);
        table.setBackground("grey_button02");

        // Game Title
        gameTitle = new Label("Nameless Project", skin, "title");
        table.add(gameTitle).padBottom(30).row();

        // Single Player button
        singlePlayer = new TextButton("Single Player", skin, "default");
        singlePlayer.addListener(new ClickListener() {
            @Override
            public void clicked(InputEvent e, float x, float y) {
                myGame.setScreen(new WorldTesting(myGame));
            }
        });
        table.add(singlePlayer).width(300).padBottom(30).row();

        // Multiplayer Button
        multiPlayer = new TextButton("Multiplayer", skin, "default");
        multiPlayer.setWidth(350);
        multiPlayer.addListener(new ClickListener() {
            @Override
            public void clicked(InputEvent e, float x, float y) {
                // Change Scenes
            }
        });
        table.add(multiPlayer).width(300).padBottom(30).row();

        stage.addActor(table);
        Gdx.input.setInputProcessor(stage);
    }

    public void show() {

    }

    public void render(float delta) {
        Gdx.gl.glClearColor(0, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        stage.act(Gdx.graphics.getDeltaTime());
        stage.draw();
    }

    public void hide(){

    }
    public void resize(int x, int y) {

    }
    public void pause() {

    }
    public void resume() {

    }
    public void dispose() {

    }

}
\$\endgroup\$
0
\$\begingroup\$

I've had this exact problem before, so I'll try to remember how I solved it.

I recommend turning on the stage.debugAll() while you develop: It is a god send at helping you figure out when things aren't doing what they are supposed to be doing.

You say all of the elements inside the table show up fine. Are they properly aligned as well? If not then your table is not positioned correctly because it is not sized correctly.

Try and put a stage.getViewport().update(x,y); in the resize(int width,int height); method. Since you are using screenviewport your viewport size is not automatically set.

One more tip is instead of just using a drawable for a table background I would try and make use of a ninepatch. It will get rid of any weird stretching in your UI elements (especially tables which can be much bigger than most elements).

| improve this answer | |
\$\endgroup\$
0
\$\begingroup\$

Edit because my previous answer was not the correct one:

First guess: the region is too small, or it can't process the image. I would debug the draw method and make sure the table actually has a background in the draw method. If no background is there, the method just draws nothing.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ It does have a skin, table = new Table(skin); does it not? \$\endgroup\$ – Chris Jun 27 '16 at 15:44
  • \$\begingroup\$ No. Look into your json and search for the entry "table" there is non. I guess you can insert a table entry and set the Background, but i'm not quite sure \$\endgroup\$ – Keey Jun 27 '16 at 15:50
  • \$\begingroup\$ I edited my answer. I'm willed to help you, but you need to provide more informations. Can you use another drawable, and check if it works with it? Check if the drawable is actually there (getBackground();) \$\endgroup\$ – Keey Jun 27 '16 at 18:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.