Pico 8 Tutorial 5: Animiere deine Spielfigur Teil 1

Was du am Ende des Tutorials können solltest: – Du kannst deine Spielfigur in unterschiedlichen Bewegungspositionen zeichnen – Du kannst die Bewegungen deiner Spielfigur mit Hilfe des if-Befehls „animieren“

Einführung

Du kannst deine Spielfigur nun über das Spielfeld bewegen. Dir ist aber bestimmt aufgefallen, dass die Bewegung, die deine Figur macht, noch sehr unnatürlich aussieht. Sie läuft nicht über das Spielfeld, sondern gleitet oder schwebt. In diesem Tutorial lernst du, wie du deine Figur möglichst „natürlich“ laufen lässt.

Videotutorial

Schaue dir gerne wie gewohnt das Videotutorial an.

Schritt 1: Zeichne deine Spielfigur in unterschiedliche Positionen

Um eine Spielfigur zu animieren, sollten wir kurz klären, was wir unter einer „Animation“ verstehen. Animation ist, wenn wir viele Bilder schnell hintereinander zeigen, damit es so aussieht, als würde sich etwas bewegen. Denk an ein Daumenkino. Wenn du die Seiten schnell durchblätterst, sehen die Bilder aus, als würden sie sich bewegen.

In Pico 8 machen wir das gleiche mit unserer Spielfigur.

Öffne wie gewohnt Pico 8 und gehe in den Sprite-Editor (Alien-Gesicht oben rechts)

Damit der Code, den wir nachher schreiben werden, funktioniert, müssen wir unsere Figuren in die jeweils passenden Fenster zeichnen.

Das Bild deiner Spielfigur, welches zum Start des Spiels gezeigt werden soll, sollte im Fenster mit der Nummer 002 gezeichnet werden.

Im Fenster mit der Nummer 001 zeichnest du nun ein Bild deiner Spielfigur, wie sie nach LINKS läuft. Im Fenster mit der Nummer 000 zeichnest du ein weiteres Bild, wie deine Figur nach links läuft (diesmal aber mit einem anderen, sichtbaren Bein)

Schritt 2: Schreibe deine erste, eigene Funktion

Um deine Figur nun zum Laufen zu bekommen, brauchen wir eine eigene Funktion. Du erinnerst dich – Pico 8 besteht aus drei Funktionen: _init(), _update() und _draw(). Sie sind das Herzstück unseres Programms. Als Programmierer haben wir aber die Möglichkeit, Pico 8 weitere Funktionen hinzuzufügen.

Funktionen sind dafür da, unseren Code zu ordnen und Anweisungen, die wir an einer Stelle im Code geschrieben haben, an einer anderen Stelle erneut aufzurufen. Ohne Funktionen müssten wir ständig Anweisungen, die wir bereits geschrieben haben, nochmal schreiben. Programmierer sind faul, deshalb haben sie Funktionen erfunden.

Um eine eigene Funktion zu erstellen, lege am besten einen neuen Tab an. (Tab Nummer 3). Kopiere die den folgenden Code (markieren und command und c drücken) und füge ihn in Tab Nummer 3 (command und v drücken) ein:

function _animation()

end

Um eine Funktion mehrfach benutzen zu können, müssen wir sie vorher einmal aufschreiben bzw. erstellen. Genau das machen wir gerade. Eine Funktion erstellt man, in dem man den Befehl function eintippt, anschließend der Funktion einen Namen gibt (ich habe sie jetzt Animation genannt, du könntest sie aber auch „Wurstwasser“ nennen, auch wenn du später vielleicht nicht mehr weißt, was die Funktion „Wurstwasser“ eigentlich genau macht…) und hinter dem Namen eine geöffnete Klammer ( und eine geschlossene Klammer ) setzt. Auf dem Macbook kannst du eine geöffnete Klammer tippen, in dem du die Pfeiltaste nach oben und 8 drückst. Eine geschlossene Klammer tippst du, in dem du die Pfeiltaste nach oben und 9 drückst. Die Funktion musst du noch mit dem Befehl end abschließen.

In diese Funktion schreiben wir unsere Anweisungen. Aber bevor wir das machen, überlegen wir uns erst einmal, wie unsere Anweisung in LUA eigentlich aussehen müsste, damit das Programm genau das macht, was wir von ihm wollen.

Schritt 3: Wechsel die Bilder deiner Spielfigur beim Laufen.

Kannst du dich erinnern, dass wir unserem Spieler-Objekt in der _init() Funktion eine Eigenschaft namens „Sprite“ gegeben und ihr den Wert 2 zugewiesen haben? Wir könnten es uns einfach machen und dem Programm die folgende Anweisung geben:

Anweisung in Menschensprache	Anweisung in LUA
„Wenn die linke Pfeiltaste gedrückt wird, nimm für unsere Spielfigur nicht mehr das Bild aus dem Fenster Nummer 2, sondern nimm das Bild aus dem Fenster Nummer 1“	if btn(0) then spieler.sprite = 1 end

Probieren wir es einmal aus. Wir gehen in Tab Nummer 2 und fügen die Zeile:

spieler.sprite = 1

in unseren ersten if btn(0) Befehl ein.

Dein Code sollte nun so aussehen:

Wenn du dein Spiel nun mit command und r startet, wechselt deine Spielfigur beim Drücken der linken Pfeiltaste vom Bild aus dem Fenster Nummer 002 zum Bild aus dem Fenster Nummer 001. Es bleibt aber bei Bild Nummer 001, es entsteht nicht der Eindruck, als ob die Figur laufen würde. Wir müssen uns also etwas Kompliziertes ausdenken…

Schritt 4: Wechsel mehrere Bilder hintereinander

Geben wir dem Programm eine neue Anweisung:

Anweisung in Menschensprache	Anweisung in LUA
„Wenn die linke Pfeiltaste gedrückt wird, hole dir zunächst den Wert der Eigenschaft „Sprite“ des Spieler-Objekts und ziehe von diesem Wert 0,25 ab. Wenn der Wert der Eigenschaft „Sprite“ des Spieler-Objekts kleiner als 0 wird, setze den Wert auf 1,75″	spieler.sprite -= 0.25 if spieler.sprite <= 0 then spieler.sprite = 1.75 end

Du fragst dich jetzt vielleicht, wie diese Anweisung zu verstehen ist. Wenn wir die linke Pfeiltaste drücken bzw. gedrückt halten, zieht das Programm 30 mal pro Sekunde 0.25 von 2 (das ist die Sprite-Nummer im Spieler-Objekt) ab. Beim ersten Drücken ist der Wert von spieler.prite nicht mehr 2, sondern nur noch 1.75. Da dort jetzt eine 1 vor dem Komma steht, nimmt Pico 8 für unsere Spielfigur nicht mehr das Bild aus dem Fenster Nummer 002, sondern jetzt aus dem Fenster Nummer 001. Wenn wir die linke Pfeiltaste weiter gedrückt halten, wird der Wert von spieler.sprite immer kleiner. Irgendwann ist er kleiner als 1 und Pico 8 nimmt für unsere Spielfigur das Bild aus dem Fenster 000.

Wenn die Zahl irgendwann gleich oder kleiner als 0 ist (das bedeutet dieses Zeichen < = in unserer if-Bedingung) weisen wir das Programm an, den Wert von spieler.sprite wieder auf 1.75 zu setzen. Pico nimmt dann für unsere Spielfigur wieder das Bild aus dem Fenster 001 und so weiter…

Schritt 5: Anweisung in die Funktion einfügen

Wir haben unsere Anweisung fertig, müssen sie aber noch in die Funktion einfügen.

Kopiere dir die Anweisung:

spieler.sprite -= 0.25
if spieler.sprite <= 0 then 
spieler.sprite = 1.75
end

und füge sie in Tab Nummer 3 in die Funktion ein.

Dein Code sollte jetzt so aussehen:

Drücken wir jetzt command und r, passiert aber noch nichts… Warum?

Wir haben in Tab Nummer 3 unsere Funktion definiert bzw. erstellt, müssen sie aber an anderer Stelle im Code aufrufen, damit Pico 8 die Anweisung auch „abarbeitet“.

Wir möchten, dass Pico 8 die Anweisungen aus unserer Animationsfunktion immer dann abarbeitet, wenn wir die linke Pfeiltaste drücken. Wir gehen also auf den Tab Nummer 2, löschen in unserem if btn(0) then Befehl die Zeile

spieler.sprite = 1

und rufen stattdessen unsere Animationsfunktion auf. Wir fügen also folgende Zeile ein:

_animation()

Dein Code sollte nun wie folgt aussehen:

Drücken wir nun command und r, „trippelt“ bzw. läuft unsere Spielfigur nach links, solange wie wir die linke Pfeiltaste gedrückt halten.

Im nächsten Tutorial werden wir lernen, wie wir unsere Figur animieren können, wenn sie in die anderen Richtungen laufen soll.