LibGDX 9 Patch Images aren't working with TextButtonStyle and TextureAtlas

Question

I am attempting to create a simple game using LibGDX. I am trying to use 9 Patch images as the backgrounds to the buttons on the menu however it appears the 9 Patch qualities of the images are being ignored.

I have two images, "active.9.png" and "rest.9.png". These are square images that represent the button in it's active or rest state. I used this tool to create them: http://romannurik.github.io/AndroidAssetStudio/nine-patches.html so I am sure they meet 9 Patch requirements. Below is a picture of "active.9.png":

enter image description here

Because I am using LibGDX and there will be many assets I wanted to use a TextureAtlas to store my button images. After running the TexturePacker things still seem to be working, because the images have "split" defined which I think suggests they have been recognised as 9 Patch files. Below is "buttons.pack":

buttons.png
format: RGBA8888
filter: Nearest,Nearest
repeat: none
active
  rotate: false
  xy: 1, 1
  size: 226, 225
  split: 59, 57, 58, 58
  orig: 226, 225
  offset: 0, 0
  index: -1
rest
  rotate: false
  xy: 229, 1
  size: 226, 225
  split: 59, 57, 58, 58
  orig: 226, 225
  offset: 0, 0
  index: -1

Next I tried to create a TextureAtlas from this pack, create a Skin, and load the images into the Skin.

    TextureAtlas buttonAtlas = new TextureAtlas("images/buttons/buttons.pack");
    skin = new Skin();
    skin.addRegions(buttonAtlas);
    skin.add("rest", buttonAtlas.createPatch("rest"));
    skin.add("active", buttonAtlas.createPatch("active"));

Finally I tried to apply this Skin to the button. I have tried two different ways..

Method 1:

TextButtonStyle buttonStyle = new TextButtonStyle();
buttonStyle.up =  new NinePatchDrawable(buttonAtlas.createPatch("rest"));
buttonStyle.down = new NinePatchDrawable(buttonAtlas.createPatch("active"));

Output 1:

enter image description here

Method 2:

TextButtonStyle buttonStyle = new TextButtonStyle();
buttonStyle.up =  new NinePatchDrawable(new NinePatch(new Texture(Gdx.files.internal("images/buttons/rest.9.png"))));
buttonStyle.down = new NinePatchDrawable(new NinePatch(new Texture(Gdx.files.internal("images/buttons/active.9.png"))));

Output 2:

enter image description here

Whilst output 2 looks like it is better, it actually seems as though the 9 Patch qualities are ignored and the image has been simply stretched to fit.

I would really appreciate any help with this, I am completely stumped and there doesn't seem to be any up to date tutorials or documentation available.

Thanks for your time

Angel Angel · Accepted Answer · 2015-02-18T15:06:20.787

I think one of the mistakes is the image line.

I use draw9patch, I do not know if it is the tool you use, do not know. this tool can be found at: yourAndroid-sdk/tools/-->draw9patch "lookVertical Path" for example:

enter image description here

//variable Class:

private TextureAtlas buttonsAtlas; 

private NinePatch buttonUpNine;

private TextButtonStyle textButtonStyle;

private TextButton textButton;

private BitmapFont font;

//add in Show or created for example:

 buttonsAtlas = new TextureAtlas("data/ninePatch9/atlasUiScreenOverflow.atlas");

 buttonUpNine = buttonsAtlas.createPatch("buttonUp"); 

 font = new BitmapFont();    //** default font, for test**//
 font.setColor(0, 0, 1, 1);  //** blue font **//
 font.setScale(2);           //** 2 times size **//

 textButtonStyle    = new TextButtonStyle();
 textButtonStyle.up = new NinePatchDrawable(buttonUpNine);

 textButtonStyle.font = font;

 textButton = new TextButton("test", textButtonStyle);

 textButton.setBounds(100, 250, 250, 250);

add in stage for example:

 yourStage.addActor(textButton);

//

eg: if your button is greater than or equal to the side of ninePath, looks like this: (sorry for my English Hope you understand me well)

textButton.setBounds(100, 250, 250, 250);

look good.

but if it is less than nine line for example 100 look this:

textButton.setBounds(100, 150, 250, 100);

asset for you used for test if you need:

//atlasUiScreenOverflow.atlas

atlasUiScreenOverflow.png
size: 232,231
format: RGBA8888
filter: Nearest,Nearest
repeat: none
buttonUp
  rotate: false
  xy: 2, 2
  size: 230, 229
  split: 49, 51, 49, 52
  orig: 230, 229
  offset: 0, 0
  index: -1

//atlasUiScreenOverflow.png

enter image description here

there are several ways to use ninePatch, but this is the one that occurred to me right now for this case I hope, well understood, and to help you something.

Edit: I just tested the tool you use and works well.

You use textButton = new TextButton("test", textButtonStyle); ?

Wow thanks so much for taking the time to reply. I changed two things, I am now using textButtonStyle.up = new NinePatchDrawable(buttonUpNine); and I re-made the button picture with far smaller 'dips' in the corners. I realised the dips were too big because of your explanation so thank you very much again — user3707803, Feb 19 '15 at 11:43

LibGDX 9 Patch Images aren't working with TextButtonStyle and TextureAtlas

1 Answers1