Phaser 037 – Textur Atlas, Animation 2/3

Spritesheets und Texture Atlas sind eine praktische Sache. Viele Elemente auf einem Sheet, unabhängig voneinander eingesetzt, spart Ladezeit, Platz und man behält die Übersicht. Kurze Ladezeiten und Platz kommen dem (mobilen) Gamer zu Gute.

Tutorial Level: Intermediate 2.5 out of 5 stars (2,5 / 5)

Hinweis

Wie man Spritesheets erstellt: Hier geht es zu dem TexturePacker-Tutorial.

Beispielhttp://rgb-labs.com/texturepacker-spritesheets-texture-atlas-erstellen/

Beispiel hier bitte ansehen.

Spritesheet

Hier kommt das unten abgebildete Spritesheet zum Einsatz. Man sieht es beinhaltet den Hintergrund (die Wand), den grimmigen Stein und die klassische Bombe. Verwendet werden in diesem Beispiel nur zwei von den drei Objekten, Hintergrund und Bombe.

Das macht deutlich: Mann kann, muss aber nicht alle vorhanden Objekte auf einem Sheet auf einmal verwenden. Weitere auf dem Bild beinhaltende Elemente, können auch später, in z.B. weiteren Leveln erst zum Einsatz kommen.

Spritesheet

Download

[wpdm_package id=’15656′]

 

function preload ()

In der function preload zeigt sich schnell, wie praktisch ein Spritesheet bzw. Texture Atlas ist. In einem Schritt laden wir drei Objekte. Es können sich sogar mehr Elemente, sogar alle für das Spiel benötigten Grafiken auf einem Sheet befinden.

Es wird in einer einzigen Codezeile das Bild (wallani.png) und der Texture Atlas (wallani.json) geladen.

function create ()

  • Zeile 8 und 14 ist bekannt und hatten wir schon öfter. Hintergrund und das erste Bild werden auf Position gebracht.
  • In Zeile 15 wird eine Animation hinzugefügt (geaddet – add).
  • Zeile 16 spielt die Animation ab.
Details zu Zeile 15

In Zeile 15 wird eine Animation geaddet (add) und die Bedingungen festgelegt. Als erstes wird bestimmt das die Animation den Namen ‚explo‘ (von explodieren) erhält. Somit ist sie später ansprechbar für Zeile 16 wo sie auf play gesetzt wird.

Dann wird eingeleitet, das alle Frames der Ani genutzt werden sollen, die in der json-Datei den Filenamen ‚bomb/b‘ tragen. Das wird erreicht indem mit generateFrameNames die Bilder von 0 bis Bild 5 aufgerufen werden bzw. ‚bomb/b‘ wird automatisch die Zahl des Frame angehangen. Was dann ergibt: bomb/b001; bomb/b002; bomb/b003; bomb/b004 und bomb/b005.

Die Zahl 30 legt die Framerate fest. Hier also 30 wechselnde Bilder in der Sekunde.

Das true am Ende ist der Loop-Effekt. Schreibt man statt dessen false wird die Animation nur einmal abgespielt.

Script – Copy & Paste

Das könnte Dich auch interessieren …

Translate »