Use of the android game development framework libgdx (15th)-TWL Layout

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.

TWL is a graphical user interface library based on OpenGL. It provides a rich set of window widgets, such as labels, edit boxes, and tables. Different layout methods can be used together to create a very advanced user interface.

I have been using TWL before, but I think it is too difficult to write the configuration file. I found the Theme Editor on the forum today and I will try it immediately.

Official Website: http://twl.l33tlabs.org/

Editor: http://twl.l33tlabs.org/themer/themer.jnlp

Double-click and so on. The interface is as follows.

Create a new project first.

Let's see what the default project has.

The first option is the font. The default font only supports English.

The second item is the input ing, which defines shortcut keys for operations such as full selection and cut.

The third item is a theme style named-defaults. This style specifies the one in which the first statement is used for the font and specifies that the text is left-aligned.

The fourth item is a theme style named label.

Let's first let it support Chinese. We can still use Hiero.Composition(Note the format conversion), and then copy the prepared files to the project folder.

Create a new font definition.

 

Drag the new definition to the top and rename it normal.

Note: Keep the small check mark on the right of the modification key.

Label is actually a style designed for labels. TWL Theme Editor provides a convenient development environment.

Select label and set theme name to label. The test result is as follows:

Now, create a new button style. First, create an image. Use the following image:

Create an image Node

Create an aera node named buttonbackground.

Select No center, spilt X, and spilt y.

You can use the mouse to select the image range, which is my favorite place... You don't need to count pixels on your own.

Create a new style named button. Select normal as the font, and buttonbackground as the background. Test the setting.

We can see that there is a problem with the button. Create a button and set both L and R to 10.

What if the button is pressed? Create a select node and add two alias nodes.

The IF (pressed) effect is set to inset 2 (that is, a little smaller), and the color is changed to yellow.

Specify the background of the button style as buttons. Save the project and copy the project file to the resource folder of the android project.

For more use of TWL Theme Editor, see: http://wiki.l33tlabs.org/bin/view/TWL/Using+the+Theme+Editor

Using TWL requires gdx-twl.jar. Twlrender is used for plotting.

CodeAs follows:

 Package Com. cnblogs. htynkn. game;

 Import Com. badlogic. GDX. applicationlistener;
 Import Com. badlogic. GDX. GDX;
 Import Com. badlogic. GDX. Files. filetype;
 Import Com. badlogic. GDX. Graphics. gl10;
 Import Com. badlogic. GDX. Graphics. g2d. spritebatch;
Import Com. badlogic. GDX. TWL. layout;
 Import Com. badlogic. GDX. TWL. TWL;

 Import De. matthiasmann. TWL. Button;

 Public   Class Twldemo Implements Applicationlistener {

 Private TWL;
 Private Spritebatch batch;

@ Override
 Public  Void Create (){
Batch = New Spritebatch ();
Button button = New Button ("button ");
Button. settheme ("button ");
Layout layout = New Layout ();
Layout. Add (button );
TWL = New TWL (batch, "Data/twldemo. xml", filetype. Internal, layout );
}

@ Override
 Public  Void Dispose (){
 //  Todo auto-generated method stub  
 
}

@ Override
 Public   Void Pause (){
 //  Todo auto-generated method stub  
 
}

@ Override
 Public   Void Render (){
GDX. gl. glclear (gl10.gl _ color_buffer_bit );
TWL. Render ();
}

@ Override
 Public   Void Resize ( Int Width, Int Height ){
 //  Todo auto-generated method stub  
 
}

@ Override
 Public  Void Resume (){
 //  Todo auto-generated method stub  
 
}

}

 

Effect:

 

Conclusion:

1. TWL is really good. The style Declaration is very similar to CSS, with inheritance and coverage. Related tools are also complete and powerful.

2. TWL is easy to use in Android, but it is still a bit defective in libgdx, such as Chinese Character Processing and image size. Pay attention to it during use.