Tuesday, April 2, 2013

Libgdx Scene2d Skin quick tutorial

This post shows a brief introduction to using Skins in your Scene2d project. It's very useful to use a JSON file that declares all the styles for your Scene2d elements, but it can be counter-intuitive at the beginning.

At this point, you can already start writing stuff in your skin.json
file. You got the BitmapFonts ready, so you can define styles for the Label elements. For the colors you can specify the single RGB values (as float in the 0-1 interval) or you can use the hexadecimal notation. If you use hexadecimal, make sure the value is wrapped in double quotes so the parser always reads it as string.

Fire up GIMP or Photoshop and draw a square button, let's say 50x50.
Put a gradient and a stroke on it so it looks nice. Save it as PNG in
some external folder with the name "button.9.png". The ".9" piece at the end will tell the game that the button is a 9patch. More on that later.

Make another
button, identical to the first, but in another color, for the "pressed"
state. If you made the button blue, make it red or something. Save with
the name "button-down.9.png".

Make another button, identical to the first, but gray, for the "disabled" state. Save with the name "button-disabled.9.png".

Open your Android SDK folder and fire up the 9patch tool. You can find
it in \sdk\tools\draw9patch.bat if you're on Windows. Open your buttons,
and draw some black pixels in the middle of the top and left edges, to
make it stretch gracefully. Save. You can find additional info on
9patches here and here.

Use libgdx TexturePacker to create an atlas of your 3 buttons.
Obviously you can pack them together with your other game graphics. Hint: you can also pack together your BitmapFont .png files generated at step 2. This way you can have a single texture for all your UI elements, so the rendering thread has to bind less textures each frame. More info about TexturePacker here.

Copy the created pack.atlas and pack.png in your asset folder.

Now you can define Button and TextButton styles in your skin.json file. It becomes something like this.

Repeat the previous steps for creating more graphics for other Scene2d controls you
want to style with your skin (like sliders, scrollbars, etc). But Labels and TextButtons are enough to
get you started.

In your ApplicationListener.create() method, or whenever you load your assets, initialize the skin.