Use of the android game development framework libgdx (5)-stage and common UI

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.

Common UI classes include labels, buttons, check boxes, drop-down boxes, images, input boxes, lists, sliding panels, slide bars, and split panels. They all belong to actor in the com. badlogic. GDX. Scenes. scene2d. UI package, which can be conveniently included in stage management.

In fact, let's take a closer look at the implementation of the UI class.CodeIt is not hard to find that most of them are inherited from widgets or tables. If you need a custom UI, You can inherit the above two classes (they inherit from actor ), here we want to explain that the layout of libgdx uses TWL. If you are interested, you can check it out.

Before introducing each control, let's take a look at ninepatch, which is a recent major update.

What is ninepatch? In fact, Android has a native ninepatch class, which is often used in buttons.

Divide the image into nine parts. The middle part can be expanded as needed, so that the size and content of the button are not limited by the image.

In libgdx, ninepatch is actually nine textureregion objects.

There are two common instantiation methods:

 
Public ninepatch (texture, int left, int right, int top, int bottom) Public ninepatch (textureregion region, int left, int right, int top, int bottom)
 

For the value of the four int parameters, refer to the source code:

 Public ninepatch (textureregion region, int left, int right, int top, int bottom) {int middlewidth = region. getregionwidth ()-left-right; int middleheight = region. getregionheight ()-top-bottom; this. patches = new textureregion [] {New textureregion (Region, 0, 0, left, top), new textureregion (Region, left, 0, middlewidth, top), new textureregion (Region, left + middlewidth, 0, right, top), new textureregion (Region, 0, top, left, middleheight), new textureregion (Region, left, top, middlewidth, middleheight ), new textureregion (Region, left + middlewidth, top, right, middleheight), new textureregion (Region, 0, top + middleheight, left, bottom), new textureregion (Region, left, top + middleheight, middlewidth, bottom), new textureregion (Region, left + middlewidth, top + middleheight, right, bottom) };

Calculate the width and height of the middle part. Then start to cut the graph, first take the leftmost part on the top, that is, the block numbered 1 in the graph, then go to the right of the graph, and then to the right.

Obtain the top row, the middle row, and the last row.

From top to bottom, from left to right.

What should I do when drawing? View Source Code:

Public void draw (spritebatch batch, float X, float y, float width, float height) {float centercolumnx = x; If (patches [bottom_left]! = NULL) centercolumnx + = patches [bottom_left]. getregionwidth (); else if (patches [middle_left]! = NULL) centercolumnx + = patches [middle_left]. getregionwidth (); else if (patches [top_left]! = NULL) // centercolumnx + = patches [top_left]. getregionwidth (); float rightcolumnx = x + width; If (patches [bottom_right]! = NULL) rightcolumnx-= patches [bottom_right]. getregionwidth (); else if (patches [middle_right]! = NULL) rightcolumnx + = patches [middle_right]. getregionwidth (); else if (patches [top_right]! = NULL) // rightcolumnx + = patches [top_right]. getregionwidth (); float middlerowy = y; If (patches [top_left]! = NULL) middlerowy + = patches [top_left]. getregionheight (); else if (patches [top_center]! = NULL) middlerowy + = patches [top_center]. getregionheight (); else if (patches [top_right]! = NULL) // middlerowy + = patches [top_right]. getregionheight (); float toprowy = Y + height; If (patches [top_left]! = NULL) toprowy-= patches [top_left]. getregionheight (); else if (patches [top_center]! = NULL) toprowy-= patches [top_center]. getregionheight (); else if (patches [top_right]! = NULL) // toprowy-= patches [top_right]. getregionheight (); // bottom row if (patches [bottom_left]! = NULL) batch. Draw (patches [bottom_left], X, Y, centercolumnx-X, middlerowy-y); If (patches [bottom_center]! = NULL) batch. Draw (patches [bottom_center], centercolumnx, Y, rightcolumnx-centercolumnx, middlerowy-y); If (patches [bottom_right]! = NULL) batch. Draw (patches [bottom_right], rightcolumnx, Y, x + width-rightcolumnx, middlerowy-y); // middle row if (patches [middle_left]! = NULL) batch. Draw (patches [middle_left], X, middlerowy, centercolumnx-X, toprowy-middlerowy); If (patches [middle_center]! = NULL) batch. Draw (patches [middle_center], centercolumnx, middlerowy, rightcolumnx-centercolumnx, toprowy-middlerowy); If (patches [middle_right]! = NULL) batch. Draw (patches [middle_right], rightcolumnx, middlerowy, x + width-rightcolumnx, toprowy-middlerowy); // top row if (patches [top_left]! = NULL) batch. Draw (patches [top_left], X, toprowy, centercolumnx-X, Y + height-toprowy); If (patches [top_center]! = NULL) batch. Draw (patches [top_center], centercolumnx, toprowy, rightcolumnx-centercolumnx, Y + height-toprowy); If (patches [top_right]! = NULL) batch. Draw (patches [top_right], rightcolumnx, toprowy, x + width-rightcolumnx, Y + height-toprowy );}

Calculate the width of the left and right columns, and calculate the center and top height. And then draw from the bottom. To be honest, I think this code looks very interesting.

Now let's talk about the use of several commonly used controls. Build a stage first.

Try label first. The label is cached. Therefore, instead of using the settext method, the setwrappedtext method is used to replace the display content.

The Code is as follows:

Package COM. cnblogs. htynkn. listener; import COM. badlogic. GDX. applicationlistener; import COM. badlogic. GDX. GDX; import COM. badlogic. GDX. graphics. gl10; import COM. badlogic. GDX. graphics. g2d. bitmapfont; import COM. badlogic. GDX. graphics. g2d. bitmapfont. halignment; import COM. badlogic. GDX. scenes. scene2d. stage; import COM. badlogic. GDX. scenes. scene2d. actors. label; public class firstgame implements applicationlistener {private stage; label Label; @ override public void create () {stage = new stage (GDX. graphics. getwidth (), GDX. graphics. getheight (), true); label = new label ("fpslabel", new bitmapfont (GDX. files. internal ("CF. fnt "), GDX. files. internal ("cf.png"), false), "label1"); label. X = 5; label. y = GDX. graphics. getheight ()-label. height-5; stage. addactor (Label); GDX. input. setinputprocessor (stage) ;}@ override public void dispose () {stage. dispose () ;}@ override public void pause () {// todo auto-generated method stub} @ override public void render () {GDX. GL. glclear (gl10.gl _ color_buffer_bit); label. setwrappedtext ("FPS:" + GDX. graphics. getframespersecond (), halignment. center); stage. act (GDX. graphics. getdeltatime (); stage. draw () ;}@ override public void resize (INT width, int height) {// todo auto-generated method stub} @ override public void resume () {// todo auto-generated method stub }}

Effect:

Then let's take a look at the button. The instantiation requires a buttonstyle, which defines the image style corresponding to the three States of the button. When the button is pressed and released, the X, Y offset, and bitmapfont and color required for text painting in the button.

I can save the three status pictures of the button. I only use one picture.

The modification code is as follows:

Package COM. cnblogs. htynkn. listener; import COM. badlogic. GDX. applicationlistener; import COM. badlogic. GDX. GDX; import COM. badlogic. GDX. graphics. color; import COM. badlogic. GDX. graphics. gl10; import COM. badlogic. GDX. graphics. texture; import COM. badlogic. GDX. graphics. g2d. bitmapfont; import COM. badlogic. GDX. graphics. g2d. ninepatch; import COM. badlogic. GDX. graphics. g2d. bitmapfont. halignment; import COM. badlogic. GDX. scenes. scene2d. stage; import COM. badlogic. GDX. scenes. scene2d. actors. label; import COM. badlogic. GDX. scenes. scene2d. UI. button; import COM. badlogic. GDX. scenes. scene2d. UI. button. buttonstyle; public class firstgame implements applicationlistener {private stage; label Label label; texture; button; @ override public void create () {stage = new stage (GDX. graphics. getwidth (), GDX. graphics. getheight (), true); texture = new texture (GDX. files. internal ("06.png"); ninepatch n1 = new ninepatch (texture, 7, 7, 9, 9); bitmapfont = new bitmapfont (GDX. files. internal ("CF. fnt "), GDX. files. internal ("cf.png"), false); label = new label ("fpslabel", bitmapfont, "label1"); label. X = 5; label. y = GDX. graphics. getheight ()-label. height-5; stage. addactor (Label); button = new button ("button", new buttonstyle (N1, N1, N1, 0f, 0f, 0f, 0f, bitmapfont, new color (1, 1, 0, 0.5f), "button"); button. X = 10; button. y = 10; button. width = 100f; button. height = 32f; stage. addactor (button); GDX. input. setinputprocessor (stage) ;}@ override public void dispose () {stage. dispose () ;}@ override public void pause () {// todo auto-generated method stub} @ override public void render () {GDX. GL. glclear (gl10.gl _ color_buffer_bit); label. setwrappedtext ("FPS:" + GDX. graphics. getframespersecond (), halignment. center); stage. act (GDX. graphics. getdeltatime (); stage. draw () ;}@ override public void resize (INT width, int height) {// todo auto-generated method stub} @ override public void resume () {// todo auto-generated method stub }}

Effect:

The button should naturally have a click event, which can be set through setclicklistener.

 
Button. setclicklistener (New clicklistener () {@ override public void click (actor) {GDX. app. log ("info", "triggered by click event ");}});
 

Then let's look at the checkbox. The style of the checkbox is defined in the checkboxstyle. Four parameters are required, one image in two states, one bitmapfont and one color.

Here I will add another image.

The principle is almost the same, and the code is directly pasted.

Package COM. cnblogs. htynkn. listener; import android. graphics. paint. align; import COM. badlogic. GDX. applicationlistener; import COM. badlogic. GDX. GDX; import COM. badlogic. GDX. graphics. color; import COM. badlogic. GDX. graphics. gl10; import COM. badlogic. GDX. graphics. texture; import COM. badlogic. GDX. graphics. g2d. bitmapfont; import COM. badlogic. GDX. graphics. g2d. ninepatch; import COM. badlogic. GDX. graphics. g2d. textureregion; import COM. badlogic. GDX. graphics. g2d. bitmapfont. halignment; import COM. badlogic. GDX. scenes. scene2d. actor; import COM. badlogic. GDX. scenes. scene2d. stage; import COM. badlogic. GDX. scenes. scene2d. actors. label; import COM. badlogic. GDX. scenes. scene2d. UI. button; import COM. badlogic. GDX. scenes. scene2d. UI. checkbox; import COM. badlogic. GDX. scenes. scene2d. UI. clicklistener; import COM. badlogic. GDX. scenes. scene2d. UI. button. buttonstyle; import COM. badlogic. GDX. scenes. scene2d. UI. checkbox. checkboxstyle; public class firstgame implements applicationlistener {private stage; label Label label; texture texture1; texture texture2; checkbox; @ override public void create () {stage = new stage (GDX. graphics. getwidth (), GDX. graphics. getheight (), true); texture1 = new texture (GDX. files. internal ("06.png"); texture2 = new texture (GDX. files. internal ("07.png"); ninepatch n1 = new ninepatch (texture1, 7, 7, 9, 9); bitmapfont = new bitmapfont (GDX. files. internal ("CF. fnt "), GDX. files. internal ("cf.png"), false); label = new label ("fpslabel", bitmapfont, "label1"); label. X = 5; label. y = GDX. graphics. getheight ()-label. height-5; checkboxstyle style = new checkboxstyle (New textureregion (texture1), new textureregion (texture2), bitmapfont, new color (1, 1, 1, 0.5f )); checkbox = new checkbox ("checkbox", style, "checkbox"); checkbox. X = 100; checkbox. y = 100; checkbox. width = 158f; checkbox. height = 32f; checkbox. settext ("yes"); checkbox. setclicklistener (New clicklistener () {@ override public void click (actor) {If (checkbox. ischecked) {checkbox. settext ("yes");} else {checkbox. settext ("no") ;}}); stage. addactor (checkbox); stage. addactor (Label); GDX. input. setinputprocessor (stage) ;}@ override public void dispose () {stage. dispose () ;}@ override public void pause () {// todo auto-generated method stub} @ override public void render () {GDX. GL. glclear (gl10.gl _ color_buffer_bit); label. setwrappedtext ("FPS:" + GDX. graphics. getframespersecond (), halignment. center); stage. act (GDX. graphics. getdeltatime (); stage. draw () ;}@ override public void resize (INT width, int height) {// todo auto-generated method stub} @ override public void resume () {// todo auto-generated method stub }}

Effect:

The general usage of other UIS is similar. The display style is defined in the corresponding style or skin. However, note that some UI classes need to manually set width and height, otherwise some display will be very strange.

Finally, let's talk about the usage of slider.

Sliderstyle requires a ninepath and texture. I didn't figure out why it wasn't two ninepath at first. I checked the source code to find out that ninepath is the background, while texture is the sliding square in the middle.

Google Code's wiki does not seem to have written any questions about setting styles in the configuration file, but it is found in the libgdx forum, such

 
Somepatch1 :[
{Width: 13, width: 9, X: 761, Y: 78 },
{Height: 13, width: 1, x: 770, Y: 78 },
{Width: 13, width: 9, X: 771, Y: 78 },
{Width: 1, width: 9, X: 761, Y: 91 },
{Height: 1, width: 1, x: 770, Y: 91 },
{Width: 1, width: 9, X: 771, Y: 91 },
{Height: 13, width: 9, X: 761, Y: 92 },
{Height: 13, width: 1, x: 770, Y: 92 },
{Height: 13, width: 9, X: 771, Y: 92}
]
 

 
Or
 

 
Somepatch2 :[
{Width: 13, width: 9, X: 761, Y: 78 },
]