How to create skin for libgdx project?

Question

I looked at the default skin files from the test project. I don't understand why uiskin.png has a font images inside it. also the uiskin.atlas file contains split field that I don't understand why do I need it and how to use it.

Where can I find a guide to all of the things?

Klapp

Answer 1

It is probably a good starting point to read the Skin wiki article.

For more information there is the Skin API documentation and the Skin and SkinLoader source code.

A good starting point for a completely new skin might also be the raw default skin which you can find in the libgdx test assets. This can be packed via TexturePacker, because skins will only work with a texture atlas.

For a UI to easily create a Skin, someone has recently created an editor for that: gdx-skineditor.

Athalia

I saw all of this and still didn't get many stuff. The skineditor collapse on export so I can't save the skin I create. – Klapp

Answer 2

In addition to noone answer, you should know that there is a Scene2D extension that adds a new default skin and extra widgets: VisUI. It uses USL internally, which makes it easier to write Skin files than with "pure" JSON.

Eddy

Answer 3

the fonts image you see is for the following bitmap font declared in the uiskin.json:

com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: default.fnt } },

if the uiskin.atlas would not contain a default.png image for the font, libdgx would have trouble rendering the font.

Jerlenejermain

I changed this font file and now I see strange things inside the label, like the .fnt is not suitable for the .png – Klapp

What did you change? What did you expect? Didn't you just want to know why there is a font packed in the skin's texture atlas? – Jerlenejermain