| Was du am Ende des Tutorials können solltest – Du verstehst, wie man Funktionen Werte übermittelt – Du verstehst, was der „Stellvertreter“ in einer Funktion macht – Du spiegelst die Bewegung deiner Spielfigur, damit es so aussieht, als würde sie nach rechts laufen. |
Einführung
Unsere Spielfigur läuft nun nach links. Drücken wir die Pfeiltaste nach rechts, nach oben oder unten, schwebt oder gleitet die Figur aber noch. In diesem Tutorial lernst du, deine FIgur auch „nach rechts“ trippeln bzw. laufen zu lassen.
Videotutorial
Schaue dir gerne wie gewohnt das Videotutorial an.
Schritt 1: Wir machen es uns leicht
Wir haben unsere Spielfigur jetzt in drei unterschiedlichen Positionen gezeichnet.
Damit unsere Figur auch nach rechts „animiert“ wird, könnten wir in die Fenster Nummer 003 und 004 unsere Spielfigur in zwei weiteren Positionen zeichnen und diese dann mithilfe unserer _animation() Funktion animieren. Es gibt aber eine Möglichkeit, wie wir unsere Figur nach rechts laufen lassen können, ohne sie in diesen Positionen noch einmal zeichnen zu müssen.
Hierfür schauen wir uns in TAB 1 nochmal unseren spr() Befehl an.
Schritt 2: spr() verstehen und für uns nutzen
Streng genommen ist spr() kein Befehl sondern eine bereits festgelegte Funktion von Pico 8 – ähnlich wie _init(), _update() oder _draw(). Damit die Anweisungen, die in spr() definiert bzw. erstellt worden sind (die wir aber nicht sehen können), auch tatsächlich funktionieren, braucht spr() Werte, die wir ihr mitteilen müssen. Die Funktion kann also nur dann richtig arbeiten, wenn sie Werte von uns bekommt. Das ist nicht bei allen Funktionen der Fall. Die Funktion cls() direkt über spr() benötigt zum Beispiel keine Werte, um zu funktionieren.
Wir geben spr() drei Werte aus unserem Spieler-Objekt mit: spieler.sprite (Welches Bild unserer Spielfigur soll zum Start des Spiels gezeichnet werden?), spieler.x (Wo auf der X-Linie soll unsere Figur bei Start des Spiels gezeichnet werden?) und spieler.y ( Wo auf der Y-Linie soll unsere Figur bei Start des Spiels gezeichnet werden?)
spr() akzeptiert aber weitere Werte. Wir können ihr zum Beispiel einen Wert dafür mitgeben, wie viele Spielfigur-Bilder rechts und links von unserem aktuellen Spielfiguren-Bild mit angezeigt werden sollen. Wir können ihr einen weiteren Wert dafür mitgeben, wie viele Spielfigur-Bilder oben und unten von unserer aktuellen Spielfigur angezeigt werden sollen. So können wir Spielfiguren zeichnen, die größer sind als unsere aktuelle Figur.
Probieren wir es doch einmal aus.
Gehe in den Sprite-Editor und klicke auf das Fenster Nummer 005. Siehst du den Regler rechts im Editor unter den Farben und direkt über den Kreisen?
Schiebe den Regler um eins nach oben. Der weiße Rahmen umrandet jetzt nicht mehr nur das Fenster Nummer 005, sondern zusätzlich die Fenster 006, 021 und 022. In diese vier ausgewählten Fenster können wir nun GLEICHZEITIG ein neues Bild zeichnen, z.B. das Bild einer Spielfigur. Diese Spielfigur ist dann aber insgesamt viermal so groß wie unsere Anfangs-Spielfigur. Eine vergrößerte Spielfigur könnte so aussehen:
Lass uns doch mal unsere vergrößerte Spielfigur auf das Spielfeld bringen.
Gehe in Tab 0 und ändere den Wert der Eigenschaft Sprite unseres Spielerobjekts von 2 auf 5:
Gehe anschließend wieder in TAB 1 und füge der Sprite Funktion zwei weitere Werte zu. Diese Werte speichern wir vorher nicht als Eigenschaften in einem Objekt, sondern geben sie direkt mit. Wir übermitteln für den ersten und zweiten Wert jeweils die Zahl 2.
Dein Code sollte jetzt so aussehen:
Was „machen“ diese Zahlen? spr() bekommt von uns die Anweisung, dass er ZWEI waagerecht-hintereinanderliegende Bilder und jeweils ZWEI übereinanderliegende Bilder aus unseren Sprite-Fenstern nehmen soll. Er nimmt also zuerst das Bild aus dem Fenster 005, holt sich das Bild, dass rechts neben ihm liegt (Fenster 006), schnappt sich anschließend das Bild aus dem Fenster, welches unter 005 liegt (also 021) und nimmt zuletzt das Bild, welches unter dem Fenster 006 liegt (also Fenster 022).
Drückst du nun command und r, siehst du deine vergrößerte Spielfigur auf dem Feld:
Schritt 3: Einen Schalter einbauen
Wie hilft uns die vergrößerte Spielfigur denn jetzt weiter? Wir wollten doch unsere kleinere Spielfigur animieren.
Wie du dich vielleicht erinnerst, brauchen wir die spr() Funktion, um unsere Figur auch nach rechts laufen zu lassen. Dieser kleine Versuch hat gezeigt, dass spr() auch noch andere Werte akzeptiert und wir somit beeinflussen können, wie groß unsere Spielfigur sein soll. Der Einfachheit halber werden wir aber wieder unsere kleinere Spielfigur verwenden.
Gehe wieder in TAB 0 und ändere den Wert der Eigenschaft „sprite“ unseres Spieler-Objekts von 5 auf 2.
Füge jetzt eine weitere Eigenschaft zu unserem Spieler-Objekt hinzu. Diese Eigenschaft nennen wir „schalter“. Was es damit auf sich hat, werde ich gleich erklären. Gib dieser Eigenschaft den Wert false .
Dein Code sollte jetzt so aussehen:
Was bedeutet hier false? Beim Programmieren ist es oft sehr nützlich, so etwas wie einen Schalter zu haben, der dem Programm mitteilt, ob etwas „an“ oder „aus“ ist. „False“ ist ein festgelegtes Wort beim Programmieren und teilt unserem Pico mit, dass etwas „aus“ ist. Um den Schalter anzuschalten, müssten wir „true“ tippen.
Schritt 4: Lege den Schalter um und spiegel die Bewegungen deiner Figur
Unsere spr() Funktion kann nicht nur eine vergrößerte Figur zeichnen, sie kann Figuren auch „spiegeln“ – also spiegelverkehrt aufzeichnen. Damit die Funktion das macht, braucht sie einen weiteren Wert, der ihr sagt, ob sie spiegeln soll oder nicht. Der Wert, der wir spr() geben werden, wird unser „AN-UND-AUS“-Schalter sein, den wir in unserem Spieler-Objekt erstellt haben.
Wir gehen in den TAB 1 und schreiben hinter der letzten 2 in unserer spr() Funktion spieler.schalter.
Außerdem ersetzen wir die beiden ZWEIEN durch zwei EINSEN. Dadurch sagen wir der spr() Funktion, dass sie nur noch das Bild von einem Fenster für unsere Spielfigur nehmen soll.
Dein Code sollte jetzt so aussehen:
Wie habe ich geschafft, dass spieler.y in der nächsten Zeile ist? Ich habe einfach den rot-blinkenden Block auf den Buchstaben S von spieler.y gesetzt und dann ENTER gedrückt.
Unser Schalter ist momentan ausgestellt. Deshalb wird unsere Figur noch nicht gespiegelt, wenn wir command und r drücken. Was passiert aber, wenn wir unseren Schalter anstellen? Probieren wir es aus!
Gehe in den Tab 0, lösche das Wort „false“ und schreibe stattdessen „true“. Drücke command und r
Deine Figur wird nun spiegelverkehrt auf den Bildschirm gezeichnet.
Schritt 5: Baue den Schalter in die Animationsfunktion ein
Cool oder? Wir sind aber noch nicht am Ziel. Wir werden unseren Schalter nutzen, um unsere Laufanimation zu spiegeln. Wie wir das erreichen, zeige ich dir jetzt.
Gehe zunächst wieder in den TAB 0 und „mach den Schalter wieder aus“. Lösche das Wort true und schreibe false
Gehe in den TAB 3. Schreibe in die Klammer hinter dem Funktionsnamen _animation das Wort „stellv“.
Dein Code sollte so aussehen:
Was bedeutet „stellv“ ? Und warum schreiben wir das Wort in die Klammer hinter unserem Funktionsnamen? Nun stellv ist eine von mir ausgedachte Abkürzung und steht für „Stellvertreter“.
Kannst du dich erinnern, dass wir Funktionen Werte übermitteln können? Wenn wir in TAB 2 gehen und unsere Funktion _animation() aufrufen, können wir dort in der Klammer einen Wert übermitteln, zum Beispiel „true“ (also „an“ oder „wahr“). In TAB 3 nimmt stellv immer den Wert an, den wir in TAB 2 übermittelt haben (z.B. true). STELLV ist also unser STELLVERTRETER, der immer den Wert annimmt, den wir an anderer Stelle übermittelt haben.
Wir können jetzt folgende Anweisung schreiben:
| Anweisung in Menschensprache | Anweisung in LUA |
| Wenn der Stellvertreter mit Namen stellv den Wert „true“ hat, dann soll er den Wert der Eigenschaft „Schalter“ unseres Spieler-Objekts auf „true“ setzen (Wir machen unseren Schalter an!) Wenn stellv nicht den Wert „true“ hat, soll der Schalter wieder auf „false“ gesetzt werden (Wir machen den Schalter aus!) | if stellv == true then spieler.schalter = true else spieler.schalter = false end |
Moment mal – was bedeutet die Zeile „else“?
Wir sehen hier einen erweiterten if-Befehl. Normalerweise prüft der if-Befehl, ob eine von uns festgelegte Bedingung eingetroffen ist (z.B., ob der Wert von stellv gleich „true“ ist). Wenn die Bedingung eingetroffen ist, dann führt das Programm eine Anweisung aus (z.B.: Ändere den Wert von spieler.schalter auf „true“). Wir können aber auch noch eine Anweisung für den Fall machen, dass der Wert von stellv NICHT „TRUE“ ist. In dem Fall schreiben wir einfach direkt hinter unserer ersten Anweisung else und machen eine Anweisung, die ausgeführt werden soll, wenn stellv nicht „true“ ist. In dem Fall wollen wir unseren Schalter wieder ausstellen (spieler.schalter = false). Wir beenden den Befehl wie gehabt mit „end“.
Dein Code sollte jetzt so aussehen:
Zum Schluss gehen wir in TAB 2.
In unserem ersten if-Befehl (if btn(0) – „Wenn die linke Pfeiltaste gedrückt wird“) rufen wir unsere _animation()-Funktion auf, übermitteln ihr im Moment aber noch kein Wert. Das müssen wir nachholen! Wenn die linke Pfeiltaste gedrückt wird, soll unsere Figur NICHT GESPIEGELT, unser SCHALTER ALSO AUS bleiben. Wir schreiben in die Klammer der _animation() -Funktion false.
In unserem zweiten if-Befehl (if btn(1) – „Wenn die rechte Pfeiltaste gedrückt wird“) müssen wir unsere _animation()-Funktion auch noch aufrufen. Wir schreiben unter unserer Anweisung:
animation(true)Wir übermitteln unserer _animation()-Funktion dieses Mal den Wert true, weil wir unsere Figur spiegeln wollen, sobald wir die rechte Pfeiltaste drücken.
Dein Code sollte nun so aussehen:
Drücke command und r, drücke die rechte Pfeiltaste und voila, unsere Figur läuft nun auch nach rechts! 🙂
