LibGDX Table UI for menu screens - part 1

Hi. In the following posts I will discuss how to create a user interface for your app with libGDX by using the Table, Stage and various Button classes. In short, Table offers functionality for different element widgets for positioning and sizing these elements, for example buttons, for your game. The great benefit of table-based layouts is that they don't rely on absolute values so they automatically adjust to different screen sizes and/or resolutions.

In this post I will show to create your own button images and your Skin file for styling your elements. The next post will show how use them in your code.

First what we need to first is to create a button we are going to use. In fact, we are going to create three images for one button. The image below shows how the images I made look like. They are each saved into different files and each file names ends in a *.9.png, which is an important detail as we are going to use the 9Patch feature to implement out scaling buttons.

The first image we call button.9.png it is the default button state, i.e. not pressed down or disabled. The second is called button-disabled.9.png and the last is button-down.9.png. After the images have been created we fire up the 9Patch program that comes with the Android SDK. It can be found in the android-sdk\tools\ folder and start the tools with the draw9patch.bat (on Windows).

It will look something like the image below:

Use the right mouse button to drag the black lines/gray areas to their correct places. You can see a preview of how to button will look when stretched. The 9patch works roughly so that everything inside the black lines is enlarged and stretched and everything outside retains its shape and size. This allows the repeating parts inside the buttons to change while the edges and corners remain the same.

Save these files and keep their names we created earlier. I also packed my images with the texture packer so that the graphics are contained in one image. See the instruction for Texture Packer here. This gives me to files menu.png that contains the button images and menu.atlas that defines the what content the image file contains. Remember to store them somewhere where you keep your game's assets (with libGDX the android\assets folder).

Now there is only one more thing to do. We need to define our menu.json file that defines the button styles we are going to need.

{  
 com.badlogic.gdx.graphics.g2d.BitmapFont: {  
  normaltext: { file: fonts/font.fnt } 
 },  
 com.badlogic.gdx.graphics.Color: {  
  white: { hex: "FFFFFF" },  
  black: { hex: "000000" }  
 },  
 com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {  
  default: { font: normaltext, fontColor: white }  
 },  
 com.badlogic.gdx.scenes.scene2d.ui.Button$ButtonStyle: {  
  default: { up: button, down: button-down, checked: button-down, disabled: button-disabled },  
  transparent: { }  
 },  
 com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {  
  default: { up: button, down: button-down, checked: button-down, disabled: button-disabled, font: normaltext, fontColor: white }  
 }
}

The first item in the {} contains our BitmapFont, it is just font I created with the Hiero tool. If you don't know how to create fonts you should head up libGDX site and look it up. It is quite easy.

The next group contains some colors we might use mainly for our text. The white and black are colors we are going to use. Please note that the names could be anything, they are just something you call that particular style but it helps if you make them logical and correspond to the colors.

The next one defines our default label style. Default fields are always used by the libGDX games unless you specify other styles and use them explicitly. As you see our default label uses our font and white color.

The next group defines out button style. Up, down, checked, disabled are all the different states a button can have. As you can see we have put in the file names of the images we previously created. The next group after that, TextButtonStyle specifies a TextButton. We use the same images but in that we define the font as well plus we also put a default label style too. If that all is confusing you can head into libGDX site where all this is documented in more detail

Thanks for reading. I will post the part 2 soon where I show how to actually use these things to create a menu with buttons.