48

I've been following this: https://code.google.com/p/table-layout/#Quickstart to get a little introduction to tables in LibGDX. I already experimented around a little with buttons.

Now I have this code:

Label introLabel = new Label("Skip Intro", skin);
TextField introText = new TextField("", skin);

table.add(introLabel);
table.add(introText).width(100);
table.row();

But it throws a NullPointerException because: No com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle registered with name: default

I only added my buttons (from somewhere else in the screen) into the skin:

atlas = new TextureAtlas("assets/gui/buttons/alpha_generic_buttons.pack");

skin = new Skin();
skin.addRegions(atlas);

My question would now be what kind of textures a table needs and most of all, how do I use them with the table?

Morgoth
  • 4,935
  • 8
  • 40
  • 66
AreusAstarte
  • 1,958
  • 2
  • 17
  • 29

2 Answers2

92

When it comes to UI in libGDX, you will find its very different than what you would have used before (yaml, json, xml, UI Builders, etc).

Table Layout - This is how Scene2d UI is structured and formatted. The link you have provided is a great tutorial, but as you have come to realize, you need a skin to do most things.

LibGDX Skin - consists of 3 things, a texture pack image, a texture pack file, and a Json to set up the styles. You can also generate them programmatically like you are doing, but I find it much easier to simply load them from a file and use. If you want to learn more about how to make skins, or edit them, etc follow this link: Skins.

Now, back to the exception you are getting. This is because the skin you have created doesn't have the json used to describe the styles for various UI elements. In the case of the above exception, the label inside of the text field doesn't have a default style.

What you can simply do is use the template provided in the tests folder:

  1. Atlaspack File
  2. Json File
  3. Atlaspack Image
  4. Font Image
  5. Font File

Put these files in the assets folder of your android project. And then you can easily load this skin with one line of code:

Skin uiSkin = new Skin(Gdx.files.internal("uiskin.json"));

This will have the missing piece of information to make your TextField object, as well as a bunch of other default styles:

com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
    default: { font: default-font, fontColor: white },
}

Hopefully this helps get you started. There are a number of other little things so don't be afraid to look over the Scene2d.UI article on the wiki for more information.

Note: You can use gdx-tools artifact to be able to use the default UI skin out-of-the-box (can be quite useful for very small/simple applications, for debugging, when you're in a real rush to have the UI visible, etc).

Jyro117
  • 4,519
  • 24
  • 29
  • Wow, thanks for the awesome answer :) The only thing I can't really get my head wrapped around is what that last piece of code is? :o – AreusAstarte Apr 24 '13 at 12:13
  • 5
    @AreusAstarte it's the json description of the style, see the item 2 in the file list above – noncom Apr 24 '13 at 12:22
  • 2
    noncom is correct, I just pointed out that line of json because it's the exact one which was causing you troubles :) – Jyro117 Apr 24 '13 at 16:47
  • 2
    The font image is not needed, because it's included in the atlaspack image. If you want to replace the font, you'll need to [repack it with the raw assets](http://stackoverflow.com/a/18526117/4794). – Don Kirkby Dec 31 '13 at 19:46
  • Long ago (late 2011?) it used to be required as it was seperate. I wasn't aware that requirement has changed, but good to know. – Jyro117 Jan 07 '14 at 19:29
  • Adding my thanks - you've made my Scene2D.ui tinkerings much less painful, which has made my evening. Cheers! – DeejUK Feb 22 '14 at 21:46
  • @vaxquis, is this still the case? I only see a uiskin.json in the tests and in the tools extension. The documentation also says to use the files from the tests as a starting point: https://github.com/libgdx/libgdx/wiki/Skin – yincrash Dec 09 '15 at 23:56
  • @yincrash you're right that it's only in the `gdx-tools` artifact - that was exactly the artifact I had in mind (it *is* a gdx artifact after all). Still, I agree the statement was too vague; I've edited the answer to reflect that, thank you for your input here. –  Dec 10 '15 at 00:08
  • Just for the record, [gdx-skins](https://github.com/czyzby/gdx-skins) project aims to list free Scene2D assets contributed by LibGDX developers. While the so-called *default* skin is useful for prototyping, here you can find, well, more production-ready assets. Also, [VisUI](https://github.com/kotcrab/vis-editor/wiki/VisUI) library comes with a default skin in two size variants. You should consider using it not only for the assets, but also additional widgets and Scene2D utilities. – Czyzby May 24 '16 at 16:41
1

Or if you want to create your very own, Raleus made up a skin editor, Pretty friendly Ui, simple to use, results are awesome https://github.com/raeleus/skin-composer Once you navigate threw it a bit you understand much more about skins and how tu use'em

Oxydeme
  • 41
  • 6