Phaser 036 – Textur Atlas, Animation 1/3

Hier geht es um das Thema Texture Atlas. Ein Textur-Atlas ist ein Bild auf dem sich mehrere bis viele Einzelbilder befinden können. Die Zusammenstellung von Bilder können ein Hintergrundbild und Einzelbilder einer, oder verschiedener Animationen sein.

Tutorial Level: Easy 2 out of 5 stars (2 / 5)

Im unteren Bild sieht man einen typischen Textur Atlas. Auf dem Bild sieht man die Texturen für den Hintergrund des Games: Die Wand. Dann hat man einen grimmigen Stein und eine Bombe. Das sind drei verschiedene Game-Objekte, die auf einem einzigen Bild zusammengefasst sind.

Textur Atlas hat den Vorteil das die Ladezeit bzw. das Datenvolumen eingespart werden können. Eine externe Datei (JSON-Datei oder XML) verwaltet die Koordinaten.

Phaser Texture Atlas

Beispiel Texture Atlas

In Beispiel 1 wurden nur 2 Bildelemente verwendet, den Hintergrund und die Bombe.

In Beispiel 2 wurden alle 3 Elemente verwendet. Der Hintergrund, die Bombe und dazu den grimmigen Stein.

Um mit diesem Spritesheet umgehen zu können, benötigt Phaser eine zusätzliche Datei. Eine Json-Datei (oder XML). In dieser Json-Datei sind die Koordinaten der einzelnen Bildelemente aufgeführt.

Wie man ein Texture-Atlas erstellt könnt ihr in diesem Tutorial nachlesen.

Zu diesem Thema gibt es zwei weitere Artikel, die ich unten verlinkt habe.
Phaser 037 – Textur Atlas, Animation 2/3
Phaser 038 – Textur Atlas, Animation 3/3

Das könnte Dich auch interessieren …

Translate »