Buttons
1. Button Images
2. Primary button creation
3. Taking Input
4. The Full Method
5. Creating methods to call make
In order to create buttons in libgdx, I created a class that makes it easier when I do games. This class contains a main method that creates the buttons, and some "sub methods" that call that class. The main method will stay the same in your games, and the sub methods change depending on your game. Then you call the sub methods in your program. We'll go through what all this means now.
1) Button Images
To create buttons in libgdx the first thing we need to do is create the button images. To do this, use whatever your favorite program is to create your buttons. Then you'll need to set the image for the button when the button is displayed normally (up) and when the button has been pressed (down). Basically you use 2 images that are the same size and most often have the same text on them, but have somewhat different color patterns. Many times the color pattern on the pressed button is simply colors on the normal button swapped, but you can do this any way you wish. Once you have the images for the colors then you can use the texture packer to pack them. Basically the texture packer puts all of your images into one large image. If you're not familiar with the texture packer, you can go through this tutorial to learn how to use it.
2) Primary button creation
Once your buttons are texture packed, we can work with getting them into the game. First off, we need to add the image as a skin to the program. We do that with the following code:
buttonsImage = new TextureAtlas("img/"+buttons_pack); // image with all of the buttons on it
buttonSkin = new Skin();
buttonSkin.addRegions(buttonsImage);
The first line creates a new TextureAtlas with the packed image you created with the texture packer. The next line creates a new skin for your button, and finally, the third line assigns the texture packed image to the skin.
Next we'll assign the "up" and "down" states of the button. So when the button is not being pressed, the image for the "up" state is shown and when the button is being pressed the image for the "down" state is shown. Here's how we assign those states:
up = buttonSkin.getDrawable("button_normal");
down = buttonSkin.getDrawable("button_pressed");
btn = new Button(up, down);
Basically the texture atlas has the "button_normal" and "button_pressed" strings in the file which is referenced in the button skin. That code gets each of the appropriate images and assigns them to "up" and "down" respectively. Then we create a new button with these images set in the button.
The next section is pretty self explanatory. We are basically setting the position, height and width of the button. Here's the code:
btn.setPosition(x, y);
btn.setHeight(height);
btn.setWidth(width);
3) Taking Input
Okay, here's the part that makes the button "work". What we're going to do is add an Input Listener to the button we just created. The Input Listener receives the input event when you tap or press the button. This listener will have 2 states: touchDown and touchUp. For our purposes, we only need "touchDown" but I include "touchUp" just in case someone will need it. Here's the code:
btn.addListener(new InputListener() {
public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
inputs.process_input(txt);
return true;
}
public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
inputs.control_pressed = "button released";
}
});
Basically when the button is touched down I send it to my "inputs.process_input" method. You can replace that line with whatever you want to do when the button is pressed. Note in the "touchUp" portion I set a var in the inputs class, although I really don't use it anywhere. Most people will use the touchDown method to take the button press.
4) The Full Method
Now that we've gone through how to create a button and take the presses here's the entire method I use:
public Button make(final String txt,String buttonNormal,String buttonPressed, float x, float y, int width, int height) {
Button btn;
TextureAtlas buttonsImage;
Skin buttonSkin;
Drawable up, down;
buttonsImage = new TextureAtlas("img/"+buttons_pack); // image with all of the buttons on it
buttonSkin = new Skin();
buttonSkin.addRegions(buttonsImage);
up = buttonSkin.getDrawable(buttonNormal);
down = buttonSkin.getDrawable(buttonPressed);
btn = new Button(up, down);
btn.setPosition(x, y);
btn.setHeight(height);
btn.setWidth(width);
btn.addListener(new InputListener() {
public boolean touchDown (InputEvent event, float x, float y, int pointer, int button) {
inputs.process_input(txt);
return true;
}
public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
inputs.control_pressed = "button released";
}
});
return btn;
} // END make
5) Creating methods to call make
So now that I've made this a method, I can call this method in order to create my buttons. Now because I tend to have buttons that don't change size frequently and I'll reuse the same buttons in different places, I'll make some methods to call this "make" method. These are the actual methods I'll call from my code. Here the first one:
public Button ok(float x, float y) {
Button btn;
btn = make("ok","ok_button","ok_button_pressed", x, y, 100, 35);
return btn;
} // END ok
As you can see, this basically called the "make" method we created above with some preset parameters. I do it this way because when I create a button in my code all I really care to customize is where the button is located on the screen.
Now I just duplicate this method for each button needed in the game and call those methods from the game!