How can I make libGDX text buttons look like clickable buttons?

Question

I have this problem with my game where UI build a nice menu and other stuff with TextButtons and labels, but it doesn't look nice because it's mostly displaying the text of the buttons (which don't look like they are buttons).

Right now I'm using this little snippet of code to style my TextButtons:

TextButton.TextButtonStyle buttonStyle = new TextButton.TextButtonStyle();
buttonStyle.font = new BitmapFont();
buttonStyle.fontColor = WHITE;

What do i need to add to make them look like a button and not like simple text? I'm using libGDX.

Answer 1

Do not just set font and fontColor, also set the properties that make up the vidual appearance such as up, down and checked etc. They take Drawable and will allow you to use any image to represent your button.

Answer 2

I think you mean just the look of the button? You need to do that in your favorite bitmap or vector app like Photoshop, Paint.net, Graphicsgale, etc. Search something like glossy button tutorial to learn how to make a nice looking button. Make a up, down and disabled state if you desire and set them as drawables to the corresponding "slots" for the button.

The trick with the NinePatch is that you can make the button very small and set the stretching area so it will scale to the size you need. Do this after you created a button. There are tools to create ninepatches but if you make a atlas with the texturepacker in Gdx.tools you can add a split parameter.

If you want to have the font have a indented look you have to edit your bitmap font for that. Render the bitmap font with extra padding so you have room to add this in your favorite drawing application. Gimp and Photoshop have filters that can create a instant intended look for you.