Pico 8 Tutorial 3: Bringe deine Spielfigur aufs Spielfeld

Was du am Ende des Tutorials können solltest:
– Du kannst deine Spielfigur auf das „Spielfeld“ bringen
– Du verstehst, was eine Funktion ist und was die Funktionen _init(), _update() und _draw() „machen“
– Du kannst ein eigenes „Spieler-Objekt“ anlegen und Werte verändern.

Übung:
– Bringe deine Spielfigur auf unterschiedliche Positionen des Spielfelds, z.B.:
a) oben links
b) unten links
c) oben rechts
d) unten rechts

Einführung

In diesem Tutorial lernst du, wie du deinen Sprite auf die „Spielfläche“ bzw. das „Spielfeld“ bringen kannst. Hierfür musst du im Einzelnen verstehen…:

a) …was Funktionen sind.
b) … was die Funktionen _init(), _draw() und _update() „machen“
c) … wie man ein „Spieler-Objekt“ erstellt.
d)… wie man mit Hilfe des Befehls spr() eine Figur auf das Spielfeld bringt.

Videotutorial

Wie immer kannst du dir gerne das folgende Video anschauen, in dem ich Schritt für Schritt erkläre, wie ihr eure Figur auf die Spielfläche bringt

Schritt 1: Was ist eine Funktion?

Pico 8 besteht aus drei Funktionen: _init(), _update() und _draw().

Aber was sind überhaupt Funktionen?

Eine Funktion ist wie eine Anleitung, die dem Computer sagt, was er tun soll. Wenn wir den Computer bitten, etwas zu tun, folgt er dieser Anleitung Schritt für Schritt. Wenn wir dem Computer zum Beispiel den Befehl geben, die Funktion _init() auszuführen, sagen wir ihm im Grunde nur, dass er alle Befehle, die wir in die _init()-Funktion hineingeschrieben haben, nacheinander ausführen soll.

Funktionen sind hilfreich, um unseren Code zu ordnen und zu organisieren und dem Computer die Möglichkeit zu geben, alle Befehle wie gewünscht auszuführen.

Pico 8 ist so programmiert, dass es immer und völlig automatisch zunächst die _init()-Funktion, dann die _update() und schließlich die _draw() Funktion ausführt.

Schritt 2: Die _init() Funktion

Die _init()-Funktion ist wie der Startknopf für unser Spiel. Alles, was in _init() steht, passiert nur einmal – nämlich nur dann, wenn das Spiel gestartet wird. Das ist der beste Ort, um Dinge einzurichten, die nur einmal passieren müssen, wie das Erstellen der Spielfigur oder das Festlegen der Startposition unserer Spielfigur.

Schritt 3: Das Spieler-Objekt

Die _init() Funktion ist der Ort, an dem wir unser Spieler-Objekt erstellen.

Was ist ein Spieler-Objekt?

Stell dir vor, ein Objekt in einem Spiel ist wie ein Spielzeug. Es hat bestimmte Eigenschaften, die es beschreiben. Zum Beispiel könnte ein Spielzeugauto Räder haben, eine bestimmte Farbe und eine Geschwindigkeit, mit der es fährt. Ein Objekt im Spiel funktioniert genauso. Es hat Eigenschaften, die beschreiben, wie es aussieht und was es tun kann. Ein Spieler-Objekt ist also einfach die Figur, die du im Spiel steuerst. Es hat Eigenschaften wie Position (wo es sich befindet), Aussehen (wie es aussieht) und was es tun kann (wie sich bewegen).

Um nun dein eigenes Spieler-Objekt zu erstellen, musst du folgendes tun:

Starte dein Pico-8 Spiel, lade deinen Spielstand (load dein-name.p8) und drücke die ESC-Taste. Du siehst das folgende Fenster:

Wische mit drei Fingern nach rechts, um wieder auf diese Tutorial-Seite zu kommen. Kopiere dir den folgenden Code, in dem du alles in dem Block markierst (Ein Finger auf dem Touchpad bleibt gedrückt, mit einem anderem Finger ziehst du den Mauszeiger über alle Buchstaben und Zahlen. Anschließend drückst du command und c)

function _init()
spieler = {
  x = 64,
  y = 64,
  sprite = 1
}
end

3. Wische mit drei Fingern nach links, um wieder auf das Pico 8 Fenster zu kommen. Füge den Code ein, in dem du command und v drückst.

Schritt 4: Wie funktioniert der Code?

Wenn du im Einzelnen verstehen möchtest, was jede einzelne Zeile des Codes macht, lies dir noch einmal die folgende Erklärung durch. Wenn du Sachen nicht verstehst oder Hilfe brauchst, bitte deine Eltern oder Patrick um Rat.

function _init()   <-- Der Befehl lautet "function". _init() ist der Name der Funktion
spieler = {             <-- Wir legen ein Objekt an, in dem wir uns einen Namen für das Objekt ausdenken, z.B.  
                                 "Spieler". Anschließend setzen wir ein "=" und eine geschweifte Klammer "{" (Taste "option" 
                                   und 8 drücken, um eine offene geschweifte Klammer zu tippen.)
  x = 64,                   <-- Anschließend legen wir Wertpaare fest. Wir legen die Eigenschaft "x" an und geben ihr 
                                   den Wert 64. X beschreibt die waagerechte Positon auf dem Spielfeld
  y = 64,                  <--- Hier legen wir die Eigenschaft "y" fest und geben ihr den Wert 64. Y beschreibt die      
                                  senkrechte Position auf dem Spielfeld
  sprite = 2            <-- Hier legen wir fest, welches Bild aus unserem Sprite-Editor das Programm zeichnen soll
}                                <-- Mit der geschlossenen geschweiften Klammer (option und Taste 9 drücken) sagen wir 
                                  Pico 8, dass wir mit der Beschreibung des Objekts fertig sind. 
end                          <-- Mit dem Befehl "end" sagen wir Pico 8, dass es keine weiteren Befehle für die _init() 
                                  Funktion gibt

Schritt 5: Was bedeutet x = 64, y = 64 und sprite = 2?

Beim Kopieren ist dir vielleicht aufgefallen, dass wir unserer Spielfigur komische Eigenschaften gegeben haben. Es hat zum Beispiel die Eigenschaft x = 64 und die Eigenschaft y = 64. Was bedeutet das?

Stell dir das Spielfeld von Pico 8 wie ein Gitter vor. Es gibt waagerechte (von links nach rechts laufende) Linien, die wir X nennen. Und es gibt senkrechte (von oben nach unten) Linien, die wir Y nennen. Die X-Linien haben ganz links einen niedrigen Wert (sie fangen bei 0 an). Je weiter die Linie nach rechts wandert, desto höher wird ihr Wert. Genauso ist es mit den Y-Linien. Sie haben ganz oben einen niedrigen Wert. Je weiter sie nach unten wandern, desto höher wird ihre Zahl.

Wenn wir Pico 8 nun befehlen, dass es unsere Spielfigur auf Höhe der Y-Linie 64 und auf Höhe der X-Linie 64 zeichnen sollen, dann zeichnet er die Figur dort, wo sich Y auf Höhe 64 und X auf Höhe 64 treffen.

Soweit klar? Keine Sorge, wenn du noch nicht sofort verstanden hast, was es mit diesen X und Y Linien auf sich hat. Wir werden in Zukunft immer wieder auf das Thema zurückkommen und du wirst genug Zeit haben, es zu üben.

Schritt 5: Spielfigur auf das Spielfeld bringen.

Wir haben jetzt unseren ersten Code geschrieben, unsere Spielfigur erscheint aber noch nicht auf dem Spielfeld. Um das zu erreichen, öffnen wir zunächst einen neuen Tab. Dir ist vielleicht schon die Zahl 0 am oberen linken Bildschirmrand aufgefallen. In diesem „Tab“ haben wir unsere _init() Funktion geschrieben. Um unsere Spielfigur aufs Feld zu bringen, brauchen wir die _draw() Funktion. Diese schreiben wir in Tab 1.

Drücke das „+“ Zeichen neben der Null.

Daraufhin erscheint ein neuer Tab.

In diesem Tab kopierst du nun mit Hilfe von command und c den folgenden Code:

function _draw() 
cls()
spr(spieler.sprite,spieler.x,spieler.y)
end

Drücke nun die Taste command und r, um dein Spiel zu starten.

Du siehst nun einen schwarzen Bildschirm und in der Mitte deine Spielfigur.

Wenn du dein Wissen festigen möchtest, versuche, deine Spielfigur auf eine andere Position zu bringen, in dem du die y und x Werte des Spielerobjekts veränderst. Wichtig: Die Werte sollten nicht größer als 100 und kleiner als 0 sein.