scene2d ui - how to make a grid / table?

Question

i am trying to make an inventory for my game, and for that i need to make a grid.
I am trying to get this done with the table -

table = new Table();
table.setFillParent(true);
stage.addActor(table);

Where should i go from here? I want my grid / inventory to look similar to this -

Answer 1

Best way in my opinion is to create and array of Actors (you can decide what type of actor like you want an Image button etc) and then just loop through the array and add the actors to the table.

You can calculate the actor's width and height at runtime, for example you you want to fill the entire screen and you know how many buttons you want horizontally and vertically, then:

int actorWidth = Gdx.graphics.getWidth() / rowActors;
int actorHeight = Gdx.graphics.getHeight() /  columnActors;
Actor[] actors = new Actor[rowActors * columnActors];

Now fill up the array with whatever type of Actor you want (images, buttons etc) and iterate through the array and add it to the table like this:

for (int i = 0; i < rowActors; i++){
  for (int j = 0; j < columnActors; j++){
    Actor actor = actors[(i * columnActors) + j];
    table.add(actor).width(actorWidth).height(actorHeight);
   }
   table.row();
}

This should create a grid of actors that take the entire screen.

Answer 2

Here's a good place to start, https://github.com/EsotericSoftware/tablelayout . Also if you are primarily working with screen estate/pixels, you may want to set the scene coordinates to pixels (or a fixed ratio to pixels if you want to auto-scale), something like this in your resize method (which scales 1:1):

@Override public void resize(int width, int height) {
    ...
    stage.setViewport(width, height,
                      false, 0, 0, width, height);
}