# How to create card layout in a trading card game Libgdx

I am trying to create a card layout for my trading card game. Right now I use this code:

public class ClientCard extends Table {

ClientCard(int cost, int attack, int health, String title, String description) {
Texture texture = new Texture(Gdx.files.internal("data/"+title+".jpg"));
Image image = new Image(texture);
this.row();
Skin skin = new Skin(Gdx.files.internal("skin/glassy-ui.json"));
Label cardName = new Label(title, skin);
Label cardDescription = new Label(description, skin);
Label cardCost = new Label(cost + "", skin);
Label cardAttack = new Label("", skin);
Label cardLife = new Label(health + "", skin);
this.row();
this.row();
}
}


It works, it shows the card data, but it looks pretty bad and it's not very compact, also I can't set the outer border for the Table (table.debug is not good). What I want is something like this:

I want to use scene2d so it's easier to fill the card with the data I want (life, attack etc). Any idea how I could realize this? Thanks!

• Do you want an answer for generic layouts or for this (or another) specific layout? If you want one for this specific layout I can provide a more specific answer. – Charanor Mar 23 '17 at 15:54
• For this specific layout would be great. – Andy Mar 23 '17 at 16:18

How does this look? (Green and red lines are only there for debugging)

What I did to achieve this was to first separate the card into three columns and five rows; then I had the Cost, Life, Attack, and S field occupy the small 1st and 3rd column and the Image, Title, and Description occupy the large 2nd column. I then used a Stack (docs) to stack the table of contents on top of the colorful background image.

The general structure looks something like this in code;

table.add(cost); //col1
table.add(); //Blank! Used only to create col2.
table.row(); //New row

table.row(); // New row

table.row();

table.row();



But this of course won't size the cells to the correct size. The exact size of the cells will depend on what your layout looks like but for this layout I decided that all red fields will have a width and height of 75. With that in mind the exact code used looked like this:

/* Adds the "Cost" label and centers its text. */
/* Important! Adds a column between "Cost" and "S". Used to
* align "Image", "Title", "Description", and "Class". */
/* Same as "Cost". */
table.row();

/* Add "Image" to middle column with a height of 50% of the
* background's height minus 75 (the top columns height). */
.getActor().setAlignment(Align.center);
table.row();

table.row();

table.row();

/* Add "Life", "Class", and "Attack". Same deal as "Cost" and
* "S" */

/* Used to show the table above the background image. You
* should probably use Table#setBackground(drawable)
* instead of using a stack! */
final Stack stack = new Stack(background, table);
stack.setSize(background.getWidth(), background.getHeight());

Some of the grow(), expand() and fill() calls might be unnecessary - you'd have to experiment for yourself. If you have any questions just leave a comment and I'll try to answer them :)
• Unless you absolutely need to have images for every single cell I would highly recommend having whole card templates and use this as your background. Look at these hearthstone templates to see what I mean. This template can also include the border. You can set the background of a table with Table#setBackground(drawable). – Charanor Mar 24 '17 at 13:59