Use of android game development framework libgdx (11)-Use of skin and UI configuration files

The libgdx used in this article is version 0.92, which may be different from the latest version. The full text is for reference only.

The libgdx UI has been greatly improved. All the strange problems have been solved, and the UI type is basically complete. We recommend that you download the latest version.

I think the only complicated way to use the UI is to develop various styles, such as textbutton:

 
PublicTextbuttonstyle (ninepatch down, ninepatch up, ninepatch checked,FloatPressedoffsetx,FloatPressedoffsety,FloatUnpressedoffsetx,FloatUnpressedoffsety, bitmapfont font, color fontcolor, color downfontcolor, color checkedfontcolor)
 

Let's look at the list:

 
PublicListstyle (bitmapfont font, color fontcolorselected, color fontcolorunselected, ninepatch selectedpatch)
 

Several Texture needs to be instantiated every time you use it. ninepatch is still a little troublesome. Fortunately, libgdx provides a solution: skin.

 

Skin saves the UI style and related resources, and defines JSON or JSON-like. API address: http://libgdx.l33tlabs.org/docs/api/com/badlogic/gdx/scenes/scene2d/ui/Skin.html

First look at the basic format:

 
{
Resources :{
Classname :{
Name: value,
...
},
...
},
Styles :{
Classname :{
Name: value,
...
},
...
}
}
 

 
It is defined by two major parts: Resource and style.
 

 
Create an fnt file to support Chinese Characters
 

 
Set it to chinese.fntand chinese.png. Create a chart:
 

 
Copy all to the project file (I created a new UI folder ).
 

 
Let's try writing a label first.
 

 
Define the required ninepath:
 

Com. badlogic. GDX. Graphics. g2d. ninepatch :{
Default-rect-red :[
{Width: 2, height: 1, x: 1, Y: 43 },
{Width: 1, height: 1, x: 2, Y: 43 },
{Width: 2, height: 1, x: 3, Y: 43 },
{Width: 2, height: 1, x: 1, Y: 45 },
{Width: 1, height: 1, x: 2, Y: 45 },
{Width: 2, height: 1, x: 3, Y: 45 },
{Width: 2, height: 1, x: 1, Y: 43 },
{Width: 1, height: 1, x: 2, Y: 43 },
{Width: 2, height: 1, x: 3, Y: 43}
],
Default-rect-Yellow :[
{Width: 2, height: 1, x: 1, Y: 54 },
{Width: 1, height: 1, x: 2, Y: 54 },
{Width: 2, height: 1, x: 3, Y: 54 },
{Width: 2, height: 1, x: 1, Y: 55 },
{Width: 1, height: 1, x: 2, Y: 55 },
{Width: 2, height: 1, x: 3, Y: 55 },
{Width: 2, height: 1, x: 1, Y: 54 },
{Width: 1, height: 1, x: 2, Y: 54 },
{Width: 2, height: 1, x: 3, Y: 54}
]
}

Then define a White:

 
Com. badlogic. GDX. Graphics. Color :{
White: {A: 1, B: 1, G: 1, R: 1}
}
 

Then our Font: (Prompt: If there is no file field, use default-Font: Default. fnt directly. This is a version issue. Thank you for your reminder)

 
Com. badlogic. GDX. Graphics. g2d. bitmapfont :{
Default-Font: {file: Chinese. fnt}
}
 

Then, declare a label style in the style:

 
Com. badlogic. GDX. Scenes. scene2d. UI. Label $ labelstyle :{
Default: {Font: default-font, fontcolor: White}
}
 

Use Time

Skin Skin =NewSkin (GDX. Files. Internal ("UI/uiskin. JSON"), GDX. Files. Internal ("UI/ui.jpg "));//Load Style

FinalLabel Label =NewLabel ("FPS:", skin. getstyle ("default", labelstyle.Class), "Fpslabel ");//Get label Style
 

Effect:

Then try textbutton:

 
Com. badlogic. GDX. Scenes. scene2d. UI. textbutton $ textbuttonstyle :{
Default: {down: default-rect-red, up: default-rect-yellow, fontcolor: white, Font: default-font}
}
 

Call:

FinalTextbutton =NewTextbutton ("OK", skin. getstyle ("default", textbuttonstyle.Class), "Okbutton ");
 

Effect:

As you press it down, it turns yellow (no screenshot is taken )...

 

Skin is really easy to use, especially when you use a lot of libgdx UIS.

 

Conclusion:

1. Does the skin support XML?

To be honest, I would also like to know, because there are two skin configuration files in GDX-tests, one in JSON format and the other in XML format. However, if I load XML directly, an error is returned.

In fact, we recommend that you use XML format, because it is easy to write errors (with fewer commas or parentheses) when writing in JSON format, and eclipse's automatic indentation does not play a role (is it a configuration problem ?).

2. Skin supports multiple image files without one configuration file. In this case, we recommend merging images or simply using multiple skin files.

3. The origin of the skin image definition is the upper left corner.

 

At the end:

I am speechless with some websites and "webmasters" on the Internet. It is a minimum respect to repost and indicate the source. Some of the second products I met were speechless:

1. There is no source for reprinting. Only one sentence is reprinted in this article...

2. Easy to master... the new cloud 2.0 system that the website still uses...

If you really don't want to indicate the source, you should at least repost it completely. Some websites are reposted in different ways. This rotten pseudo-originalProgramI will give you a copy.