Phaser 020 – Animation Anleitung

Manche Itmes machen gerne durch Bewegungen und Animationen auf sich aufmerksam. Goldmünzen in Games zum Beispiel drehen sich klassischerweise um die eigene Achse, andere Items hüpfen. Das soll nun auch in Phaser realisiert werden.

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

Tip

Wie man eigene Münzen mit Inkscape erstellt könnt ihr in diesem Tutorial nachschauen.

Animation in Phaser

Eine Animation in Phaser funktioniert im Prinzip wie ein Daumenkino. Nur das die Bilder nicht wie beim Daumenkino untereinander auf einzelne Blätter verteilt sind, sondern nebeneinander und/oder zeilenweise. Das ganze nennt sich Spritesheet (siehe Bild unten).

Ablauf, Reihenfolge

Zeilenweise lesen, von links nach rechts

Ein einziges Bild und doch kann Phaser über Anweisung jedes Einzelbild hintereinander abspielen. Für das menschliche Auge wird so eine Animation daraus.

Die Reihenfolge wie die Bilder eingelesen und abgespielt werden ist zeilenweise von links nach rechts und von oben nach unten.

Beispiel

Das Beispiel unten zeigt die fertige Bilddatei (Spritesheet) für die Animation. Jedes einzelne der insgesamt 6 Bilder ist 34×34 Pixel groß. Das Gesamtbild dann 102 Pixel breit und 68 Pixel hoch (siehe Bild unten).

Eine Münzdrehung

ALLE Felder müssen gleich groß sein!

Erwähnenswert ist vielleicht noch, dass Computer nicht bei 1 (Eins) anfangen zu zählen, sondern bei 0 (Null). Die Zählweise lautet demnach nicht 1, 2, 3, 4, 5, 6 ist, sondern 0, 1, 2, 3, 4, 5.

Gezählt wird ab Null (0)

Erste Münze ist 0 (Null), dann 1 usw. …

Das soll es an Theorie auch schon gewesen sein. Ich komme später nochmal auf das Thema zurück, wenn beispielsweise ein Terrain bzw. ein Parkour für z.B. ein Jump ’n Run Spiel erstellt werden soll.

Das könnte Dich auch interessieren …

Translate »