[libgdx] day 7 – pack textures

Today we want to learn, how we can pack multiple textures automatically into one big texture without having to define each TextureRegion manually.

With libgdx there is the tool TexturePacker2 by default. It’s hidden in the gdx-tools.jar, so starting it can be a bit complicated. You can start the TexturePacker2 with the following syntax. (probably easier to do if you have linux :P)

java -classpath [path to libgdx]/gdx.jar:[path to libgdx]/extensions/gdx-tools.jar com.badlogic.gdx.tools.imagepacker.TexturePacker2 [subfolder with textures] [folder to save them in] [name of this texturepack]

If you need help with this, write a comment or chat we me on Skype (bitowl).

You put all the textures you want to have in the big texture (which is called TextureAtlas) into one folder and then execute the TexturePacker2. He creates two files in the destination directory. A testPack.png with the finished texture and a testPack.atlas, which containes the coordinates of the original textures in this atlas.

You can load the TextureAtlas really easily into your game:

TextureAtlas atlas;
atlas = new TextureAtlas(Gdx.files.internal("graphics/testPack.atlas"));
// [...] we do only have to dispose the atlas and all the textures in it are disposed
atlas.dispose();

The textures we loaded previously seperate we can now load like this:

christmasTree=atlas.findRegion("tree");
ball=atlas.findRegion("ball");
snow=atlas.findRegion("snow");

(atlas.findRegion() returns a AtlasRegion which is a subclass of TextureRegion, so you probably do not need to change much else in your code).

Ninepatch

A Ninepatch is an image that consist out of nine small patches. The middle ones of these patches are scaled. So you can get round edged or speech bubbles.

If you want to create such a NinePatch, you add a .9 ínto the filename before the extension (button.9.png). Then you have to make a 1px transparent border around it and color the parts, which should be scaled in the left and up part with a black line. (like in the right image).

Now we can draw a rect with this NinePatch somewhere (might be usefull for drawing a speech bubble):

Ninepatch patch;
patch=atlas.createPatch("button");
// [...] in render()
patch.draw(stage.getSpriteBatch(), 0, 0, Gdx.graphics.getWidth(), 100);

this looks like this:

You use such NinePatches if you want to create background for your ui-elements.

For creating your skin you put all the images and textures of fonts you need into a folder and let the texturepacker pack them to a textureatlas (e.g. called myskin).

Now you create additionally a .json-file which has a structure like this:(http://code.google.com/p/libgdx/wiki/Skin)

{
        className: {
                name: resource,
                ...
        },
        className: {
                name: resource,
                ...
        },
        ...
}

className is the complete name of the Style-class of the element you want to change. if you want to set the style of the TextButton this would be:
com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle

name is the name of the variable you want to set (you can find them in the javadochttp://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/scenes/scene2d/ui/TextButton.TextButtonStyle.html)

com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
        default: {
               down: button_up, up:button,
               font: default, fontColor: white
        }
},

Here we define the NinePatches button_up and button as backgrounds for the button. One in the normal state and one if the user presses the button. Additionally we defined, that every TextButton should use a font called default and that the color should be white. These both values we first have to define:

      com.badlogic.gdx.graphics.Color: {
                green: { a: 1, b: 0, g: 1, r: 0 },
                white: { a: 1, b: 1, g: 1, r: 1 },
                red: { a: 1, b: 0, g: 0, r: 1 },
                black: { a: 1, b: 0, g: 0, r: 0 }
        },

        com.badlogic.gdx.graphics.g2d.BitmapFont: {
                default: {file:small.fnt}
        },

It’s quite usefull to compare to the default skin or to look in the api to see all the options you have got.

If you have enough time, you can create a skin that fits to your game. (a really great example is Operation Stormfront)

Tomorrow we will hopefully learn how to create animations by switching textures (called frame-animation).