Monthly Archives: March 2016

How to create LibGDX Buttons from nine patch

Check out Lines Galaxy Android game to view the results in action.

One of the most promising frameworks for creating 2D graphics in Android (and Web, iOS, Windows) is LibGDX.

Drawing complex buttons in 2D graphics is not exactly easy. One option would be to convert your button design into nine patch images and use them in your Android apps.

The bellow class is missing some crucial methods. Bare in mind that only the code required for drawing the buttons in LibGDX is posted here. Copy-pasting the whole class might not work.

Here’s how you can create LibGDX Buttons which use nine patch image packs (the bellow code creates a single button):

// you'll manage the imports
public class MyClass extends ApplicationAdapter {

    private TextureAtlas buttonAtlas;
    private NinePatch buttonNinePatch;
    private TextButton textButton;
    private SpriteBatch batch;

    @Override
    public void create () {

        batch = new SpriteBatch();

        buttonAtlas = new TextureAtlas("buttons.pack");
        buttonNinePatch= buttonAtlas.createPatch("button1");
        NinePatchDrawable ninePatchDrawable = new NinePatchDrawable(buttonNinePatch);
        TextButtonStyle textButtonStyle = new TextButtonStyle();

        // you might want to use different nine patch for each button state
        textButtonStyle.up = ninePatchDrawable;
        textButtonStyle.down = ninePatchDrawable;
        textButtonStyle.checked = ninePatchDrawable;
        textButtonStyle.over = ninePatchDrawable;

        textButtonStyle.font = new BitmapFont();

        // LibGDX Buttons
        textButton = new TextButton("My Button", textButtonStyle);
        textButton.setPosition(0, 0);
        textButton.setSize(200, 200);

    }

    @Override
    public void render () {

        Gdx.gl.glClearColor(1,1,1,1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);

        batch.begin();
        textButton.draw(batch, 1f);
        batch.end();

    }

}

That’s all.
Now (as President Francis says in House of Cards) “no one said” 2D graphics in Android “will be easy”.

After you’ll run the above code you’ll see that there’s a problem. The font is not exactly as you’d expected. Well you could scale it but it won’t output the expected result and it will actually be pixelated. This is where FreeTypeFontGenerator jumps in.

The next post will cover how to use them in your Android LibGDX app.

Check this post in case you’re not familiar to how buttons.pack works and where it comes from.

Check out Lines Galaxy Android game to view the results in action.

How to generate LibGDX nine patch packs

The first time you’ll try to create valid LibGDX nine patch packs for your Android app you might run into multiple problems.

I’ve created this article so that others can skip all the docs and searches and get right to the magic.

Nine Patch is an image that contains additional information compared to a normal image which is used to determine which areas of it should be scaled when the image is used in a size which is larger than the original one.

Here’s an example of a nine patch image “button1.9.png” (notice the .9. naming convention):

LibGDX nine patch

This article does not explain how to generate these images but how to create the packs which can be used in your Android app. After your designer provides you with similar nine patch images to the one above, or if you manage to create ones, you’ll need to download LibGDX Texture Packer GUI. The latest version should do just fine.

In order to run it you’ll need to have Java installed. Place all your nine patch images inside a folder then specify this folder as the input directory in Texture Packer GUI. Give the pack whatever name you desire (mine is named buttons.pack) then hit the Pack’em all after you select your output directory.

You should now have a sprite named buttons.png which contains all your nine patch images and a file which contains the pack configuration and which is similar to the one bellow:

buttons.png
format: RGBA8888
filter: Nearest,Nearest
repeat: none
button1
  rotate: false
  xy: 0, 198
  size: 198, 198
  split: 38, 38, 15, 13
  orig: 0, 0
  offset: 0, 0
  index: 80

That’s all.

Now that you have the packs in your virtual hands go ahead to the next article and use them.

The next post will cover how to create buttons in LibGDX using the generated packs.