Phaser 022 – Animation in der Praxis 2/2 (Walkcycle)

In diesem Teil soll sich ein Spieler vorwärts bewegen, wenn eine Pfeiltaste gedrückt wird. Nicht nur eine Strecke soll die Spielfigur zurücklegen, sondern auch ein Walkcycle werden hier animiert. Und das nur bei Tastendruck!

Tutorial Level: Intermediate [2.5]

 

Beispiel

Bitte Spielfeld anklicken und Pfeiltasten (links/rechts) zum Bewegen verwenden.

 

Spritesheet & Walkcycle

Die zusammengefassten Einzelbilder (Spritesheet) einer Walkcycles-Animation schaut so aus wie im Bild unten zu sehen ist. Das PNG kann man sich downloaden und gerne verwenden.
Spieler zum Downlaod

Ziele:

  • Character dazu zu bringen sich nach links zu drehen und gehen, wenn linke Pfeiltaste gedrückt ist.
  • Das Gleiche umgekehrt, wenn die rechte Maustaste gedrückt wird.
  • Wenn keine Taste gedrückt, soll der Character stehen bleiben und sich dem Monitor zuwenden.

Remember: Die Maschiene beginnt hier nicht bei 1 (Eins) anzuzählen, sondern bei 0 (Null).

PC Zaehlweise

Computer fangen bei Null zu zählen an

 

Die Scriptzeilen

function preload ()

Wie man sieht, gibt es in der function preload () kaum was Neues. Wer das Tutorial zur Loop-Animation durchgearbeitet hat, erkennt auch die Zeile mit der Bild-Info.

walkcycle.png wird geladen. Jeder Bildabschnitt ist 40 x 50 Pixel groß (40 breit, 50 hoch). Und die das Spritesheet besteht aus 7 Bildern.

function create ()

In der function create () gibt es alte wie neue Einträge.

Die Physics werden aktiviert und die Kollision mit dem Spielfeldrand, damit ‚kerlchen‘ nicht das Spielfeld verlassen kann.

Es gibt 2 Zeilen mit Neuigkeiten. Es werden zwei Animationen festgelegt. Eine soll left heißen (für laufen nach links) und eine right (für laufen nach rechts). Beide Animationen werden auf true (wahr) gestellt, also angeschaltet.

Und es werden die Bilder festgelegt die beiden Animationen (left & right) benutzen sollen. Im Falle von links sind es die Bilder 0, 1, 2 und für nach rechts sollen es die Bilder 4, 5, 6 sein.

Abspielgeschwindigkeit sind 6 Bilder in der Sekunde.

In der letzten Zeile von function create () werden dann wieder die Steuerungstasten festgelegt.

function update ()

player.animations.play(‚left‘); bedeutet: Wenn Pfeiltaste nach links gedrückt ist, dann spiele die Animation left.

Darunter dann das ganze nochmal für die Animation right (rechts), mit umgekehrten Werten.

Wenn dann keine Taste gedrückt ist soll die Animation mit player.animations.stop(); anhalten und Bild (frame) 3 erscheinen. Bild 3 war der stillstehende Character.

Reihe 1 falsch! - Reihe 2 richtg!

Statt  eines Characters könnte man hier genauso gut ein Spaceshuttle mit Triebwerkstrahl nehmen oder andere, alternative Fortbewegungsarten darstellen.

Das könnte Dich auch interessieren …

Translate »