Tag 7 – Texturen packen

veröffentlicht am: 7. Dezember 2012

Heute wollen wir lernen, wie man mehrere Texturen automatisch in eine große Textur packt, ohne alle TextureRegions selber definieren zu müssen.

libgdx hat dafür das Tool TexturePacker2. Dies ist allerdings ist der gdx-tools.jar enthalten, so dass das starten dieses Tools etwas kompliziert ist. Der TexturePacker2 hat auch standartmäßig keine graphische Oberfläche, sondern folgende Syntax

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]

Falls du Hilfe beim starten des TexturePacker2 brauchst, schreib ein Kommentar oder chatte mit mir bei Skype (bitowl).

Man packt einfach alle Texturen, die man in eine große Textur (TexturAtlas genannt) haben will in einen Ordner und führt dann den TexturePacker2 aus. Dieser erzeugt dann im Zielverzeichnis zwei Dateien. Eine testPack.png mit der fertigen Textur und eine testPack.atlas, in der gespeichert ist, wo sich die Texturen in der großen Textur befinden.

Den TextureAtlas kann man nun wieder ganz einfach im Spiel laden:

TextureAtlas atlas;
atlas = new TextureAtlas(Gdx.files.internal("graphics/testPack.atlas"));
// [...] wir brauchen nur noch den Atlas disposen :)
atlas.dispose();

Unsere bisherigen Texturen kann man nun laden. (bei atlas.findRegion() bekommen wir eine AtlasRegion zurück, was eine Unterklasse von TextureRegion ist, wir können den Rest also fast genauso belassen):

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

Ninepatch

Ein Ninepatch ist ein Bild, das aus neun kleinen Teilen besteht. Die mittleren dieser Teile werden dann gestreckt. So kann man z.B. abgerundete Ecken oder Sprechblasen realisieren.

Wenn man einen Ninepatch in einen TextureAtlas packt, nennt man die Datei vor der Endung .9, also z.b. button.9.png, der TexturePacker2 weiß dann automatisch, was er machen soll. Damit der auch weiß, welche Teile des Bildes gestreckt werden sollen, muss man einen 1px großen, transparenten Rand um das Bild lassen und links und oben die streckbaren Bereiche durch eine durchgehende schwarze Linie kennzeichnen. (Im Bild rechts kann man das gut erkennen).

Wir können den Ninepatch direkt in beliebiger Größe irgendwo hinmalen (nützlich, wenn man den Hintergrund einer Sprechblase rendern will):

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

Das sieht dann so aus:

Solche NinePatches verwendet man für Buttons und andere Elemente wenn man seinen eigenen Skin bastelt.

Dazu packt man alle Bilder und Bilder von Schriften in einen Ordner und packt sie mit dem Texture-Packer zu einem TextureAtlas z.B. myskin.

Nun erstellt man zusätzlich noch eine .json-Datei, die laut (http://code.google.com/p/libgdx/wiki/Skin) folgendermaßen aufgebaut ist:

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

className ist dabei der komplette Klassen-Name des Styles, den man beschreibt. Für den TextButton wäre das:
com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle

name sind nun die Namen der Variablen, die man setzen will (findet man im JavaDoc http://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
        }
},

Hier definieren wir die NinePatches button_up und button für die Drawable als down und up. Diese NinePatches werden somit als Hintergrund für den Button genommen. Einmal im normalen Zustand und einmal im Zustand, dass der Nutzer den Knopf gerade drückt. Zu dem haben wir definiert, dass die Schriftart die Schriftart namens default sein soll und dass die Schriftfarbe weiß sein soll. Diese beiden Werte müssen wir allerdings vorher schon definieren:

      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}
        },

Hier hilft es oft, in das defaultskin oder die API zu schauen, um zu gucken, was für Optionen es gibt.

Falls du also genug Zeit hast, kannst du dir so ein deinem Spiel angepasstes Skin für das Menü erstellen. (Vllt. sogar so cool wie das von Operation Stormfront)


Morgen werde ich hoffentlich lernen, wie man Animationen durch das Auswechseln von Texturen erzeugt (Frame-Animationen).

geposted in libgdx

3 Antworten zu “Tag 7 – Texturen packen”

  1. Jan sagt:

    Hi,

    einfachere Alternative wäre das ganze mit dem Texturepacker mit UI zu machen:
    https://code.google.com/p/libgdx-texturepacker-gui/downloads/detail?name=gdx-texturepacker-3.2.0.zip

  2. Foxtale sagt:

    Moin,
    es gibt auch gdx-texturepacker.jar. Dieser erzeugt .pack file statt .file. Ich habe die Frage, ob es nicht zufällig dasselbe ist, und wenn ich durch rename jetzt sage, es sei atlas und nicht mehr pack, wird LibGdx das verstehen? Das Fiel sieht von innen so aus:

    graphics.png
    format: RGBA8888
    filter: Nearest,Nearest
    repeat: none
    disclaimer
    rotate: false
    xy: 1, 109
    size: 405, 256
    orig: 405, 256
    offset: 0, 0
    index: -1
    field
    rotate: false
    xy: 408, 273
    size: 469, 92
    orig: 469, 92
    offset: 0, 0
    index: -1

    ….etc
    MfG, Olga
    PS wäre schön, dich in skype online zu kriegen, wenn es möglich ist 🙂

    • bitowl sagt:

      Heyho,

      Das ist genau das selbe Format, wie .atlas, es scheint dort also keinen Unterschied zu geben.

      Bei Skype bin ich eigentlich ständig online (bitowl), z.B. jetzt gerade. Falls du mich als Kontakt hinzugefügt hast, solltest du mich eigentlich anschreiben können.

      Viele Grüße
      bitowl

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.