Libgdx Table Background Ninepatch

Finally managed to properly set a background for my table :). Had to learn about ninepatch a little but it finally worked out, here is step by step tutorial how to set table background in libgdx with ninepatch.

Step 1 – Create a ninepatch image

Ninepatch is simply a png image that has some black pixels in its borders. These black pixels tell us how the image will be stretched.

Create a new 50×50 image in gimp or photoshop
Make a round selection with the selection tool
Color the selected area, if you want borders color around the selected area, save as png
Open this link, upload your png image and it will create your ninepatch images, you can also make some adjustments there
Here is my image if you don’t want to bother bgimg

Step 2 – Use your ninepatch image

Choose any image from the zip and put it into your assets folder
Use this class, use getter to add to your stage


public class TextScrollPane {

	private Table table;
	private Label label;
	
	public TextScrollPane(float width, float height){
		 
		BitmapFont font = new BitmapFont();
		
		table = new Table();
		table.setWidth(width);
		
		table.setHeight(height);
		table.setBackground(new NinePatchDrawable(getNinePatch(("ng.9.png"))));
		
		label = new Label("Bla bla bla bla", new Label.LabelStyle(font, Color.WHITE) );
		label.setWrap(true);
		
		table.add(label).expand().top().left();
		
	}
	
	public Label getLabel() {
		return label;
	}
	
	public Table getTable() {
		return table;
	}
	
	private NinePatch getNinePatch(String fname) {
	    
		// Get the image
		final Texture t = new Texture(Gdx.files.internal(fname));
	    
		// create a new texture region, otherwise black pixels will show up too, we are simply cropping the image
		// last 4 numbers respresent the length of how much each corner can draw,
		// for example if your image is 50px and you set the numbers 50, your whole image will be drawn in each corner
		// so what number should be good?, well a little less than half would be nice
	    return new NinePatch( new TextureRegion(t, 1, 1 , t.getWidth() - 2, t.getHeight() - 2), 10, 10, 10, 10);
	}
	
}

public class TextScrollPane {

private Table table;

private Label label;

public TextScrollPane(float width, float height){

BitmapFont font = new BitmapFont();

table = new Table();

table.setWidth(width);

table.setHeight(height);

table.setBackground(new NinePatchDrawable(getNinePatch(("ng.9.png"))));

label = new Label("Bla bla bla bla", new Label.LabelStyle(font, Color.WHITE) );

label.setWrap(true);

table.add(label).expand().top().left();

}

public Label getLabel() {

return label;

}

public Table getTable() {

return table;

}

private NinePatch getNinePatch(String fname) {

// Get the image

final Texture t = new Texture(Gdx.files.internal(fname));

// create a new texture region, otherwise black pixels will show up too, we are simply cropping the image

// last 4 numbers respresent the length of how much each corner can draw,

// for example if your image is 50px and you set the numbers 50, your whole image will be drawn in each corner

// so what number should be good?, well a little less than half would be nice

return new NinePatch( new TextureRegion(t, 1, 1 , t.getWidth() - 2, t.getHeight() - 2), 10, 10, 10, 10);

}

This entry was posted in Libgdx and tagged libgdx,libgdx ninepatch,libgdx table on July 26, 2014