Einführung
Du hast nun deine Map fertig gezeichnet. In diesem Tutorial lernst du, wie du die MAP tatsächlich auf das Spielfeld bringst und die Kamera im Spiel nutzt, damit du deine Figur über die ganze Karte steuern kannst.
Videotutorial
Wie gewohnt schaue dir gerne das folgende Video an:
Schritt 1: Bringe deine MAP auf das Spielfeld.
Deine Map ist fertig. Wenn du das Spiel startest, erscheint die MAP aber noch nicht auf dem Spielfeld. Um das zu ändern, gehe auf TAB 1 in die _draw() Funktion und füge eine Zeile überhalb der spr() Funktion den folgenden Code ein:
map(0,0)Die beiden Werte 0,0 geben den Startpunkt unserer Karte an. Kannst du dich noch an das letzte Tutorial erinnern? Jede Kachel hat einen X und einen Y Wert, der angibt, wo genau auf der Karte sich die Kachel befindet. Mit dieser Funktion geben wir Pico die Anweisung, beginnend ab der Kachel X = 0 und Y=0 (die Kachel ganz oben links) unsere Map zu zeichnen. Übermittelst du statt der ersten 0 den Wert 16, zeichnet Pico 8 unsere Karte beginnend ab der Kachel x = 16 und y=0. Alles von deiner gezeichneten Map, das sich links neben dieser Kachel befindet, wird nicht gezeichnet. Übermittelst du mehr Werte, kannst du auch steuern, wie „breit“ und „hoch“ deine Karte sein soll – aber das probieren wir heute nicht aus.
Euer Code sollte nun wie folgt aussehen:
Startest du jetzt das Spiel, siehst du deine Karte nun auf dem Spielfeld!
Schritt 2: Nutze die Kamera, um deiner Spielfigur über die MAP zu folgen
Wir müssen nun einige Zeilen Code einfügen. Gehe in TAB 0. In unserer _init() Funktion haben wir bereits unser Spieler-Objekt angelegt. Wir können aber nicht nur aus unserer Spielfigur ein Objekt machen, sondern auch aus unserer Kamera. Füge die folgenden Zeilen unterhalb deines Spieler-Objekts ein:
cam={
x = 0,
y = 0
}Genau wie bei unserem Spieler-Objekt bzw. unserer Spielfigur weisen wir unserer Kamera, die wir hier verkürzt „cam“ genannt haben, eine X und eine Y Eigenschaft zu. Die Werte, die wir später dynamisch verändern werden (je nachdem, wo wir uns mit unserer Figur entlang bewegen), setzen wir erst einmal auf 0. Verändern wir diese Werte, hat das keine Auswirkungen auf das Spiel. Sie sind erst einmal nur Platzhalter. Dieses Kamera-Objekt mit seinen Eigenschaft sagt unserem Programm also im Laufe des Spiels, wo genau es die Kamera platzieren soll
Euer Code sollte nun wie folgt aussehen:
Schritt 3: Begrenze die Kamera auf die MAP
Im nächsten Schritt müssen wir Pico-8 noch mitteilen, wo unsere MAP startet und wo sie endet. Ansonsten würde sie noch über den Kartenrand mitlaufen, was im Spiel seltsam aussehen würde. Wir könnten wieder ein Objekt namens „Karte“ anlegen und dort zwei Eigenschaften „Anfang“ und „Ende“ mit den jeweiligen Werten festlegen. Wie wir Objekte anlegen, kennen wir aber schon. Stattdessen probieren wir mal einen anderen Weg. Anstatt Werte in Objekten zu speichern, können wir auch einfach schnell zwei VARIABLEN anlegen.
Du fragst dich jetzt sicher, was VARIABLEN sind, oder?
Stell dir vor, du hast eine große Kiste, in die du verschiedene Sachen legen kannst. Diese Kiste hat einen Namen, damit du immer weißt, was in dieser Kiste ist.
Eine VARIABLE in der Programmierung ist so ähnlich wie diese Kiste. Hier ist eine einfache Erklärung:
1. Kiste mit einem Namen: Eine Variable ist wie eine Kiste, der du einen Namen gibst. Du könntest die Kiste zum Beispiel “Alter” oder “Punkte” nennen.
2. Etwas hineinlegen: Du kannst Dinge in diese Kiste legen. In der Programmierung sind das Daten oder Werte. Zum Beispiel könntest du in die Kiste “Alter” die Zahl 10 legen.
3. Wert ändern: Du kannst den Inhalt der Kiste jederzeit ändern. Wenn du also älter wirst, kannst du die Zahl in der Kiste “Alter” auf 11 ändern.In Pico 8 legst du eine Variable an, in dem du einfach den Namen der „Kiste“ schreibst, dahinter ein „=“ setzt und anschließend den Wert, den du in der Kiste speichern möchtest. Eine Variable mit Namen „Alter“, in dem du den Wert „10“ speicherst, sähe dann so aus:
alter = 10 Verstanden?
Dann legen wir jetzt mal zwei Variablen an, die wir jeweils „map_start“ und „map_end“ nennen. In diesen Werten speichern wir die Anzahl der Pixel. In map_start speichern wir den Wert 0 (die Map startet bei dem Pixel mit der Koordinate X = 0 und Y = 0 – also ganz oben links) und in map_end den Wert 1024 (die Map endet bei dem Pixel mit der Koordinate X = 1024 und y= 1024 – also ganz unten rechts).
Füge die folgende Zeile unter deinem Kamera-Objekt ein:
map_start = 0
map_end = 1024Dein Code sollte jetzt wie folgt aussehen:
Schritt 4: Füge die Kamerafunktion ein
Die Vorbereitungen sind abgeschlossen. Jetzt müssen wir dem Programm sagen, wie genau die Kamera funktionieren soll, bzw. was beachtet werden muss.
Dafür fügen wir in TAB 5 den folgenden Code ein:
function einfachekam()
cam.x=spieler.x-64
cam.y=spieler.y-64
if cam.x<map_start then
cam.x=map_start
end
if cam.x>map_end-128 then
cam.x=map_end-128
end
if cam.y<map_start then
cam.y=map_start
end
if cam.y>map_end-128 then
cam.y=map_end-128
end
camera(cam.x,cam.y)
endDein Code sollte nun wie folgt aussehen:
Was macht der Code?
Die If-Befehle sorgen dafür, dass die Kamera sich nicht weiterbewegt, wenn sich die Spielfigur über die gesetzen Grenzen (map_start und map_end) hinweg bewegen will.
Anschließend werden einer Pico8-Funktion namens „Camera“ die Werte aus unserem Objekt Cam.X und Cam.Y übermittelt. Diese Werte braucht die Funktion, damit sie die Kamera bewegen kann.
Aber warum werden dann in den Variablen Cam.X und Cam.Y wieder andee Variablen, nämlich „Spieler.X“ und Spieler.Y“ gespeichert. Und warum wird gleichzeitig die Zahl 64 von beiden Variablen abgezogen?
Das hat den folgenden Grund:
Die Pico-8 Bildschirmauflösung ist 128×128 Pixel. Wenn du möchtest, dass die Kamera den Spieler in der Bildschirmmitte zentriert, musst du die Kamera so platzieren, dass der Spieler im Zentrum des 128×128 Pixel großen Bildschirms bleibt.
Da der Bildschirm in der Mitte bei (64, 64) liegt (die Hälfte von 128), wird von den Koordinaten des Spielers 64 Pixel subtrahiert.
Das bedeutet, wenn der Spieler sich z.B. an der Position (64, 64) befindet, wird die Kamera auf die Position (0, 0) gesetzt, sodass der Spieler in der Bildschirmmitte zentriert ist.
Wenn wir anstatt 64 nur 32 abziehen (z.B.: cam.x = spieler.x – 32), dann ist der Spieler plötzlich nicht mehr in der Mitte der Kamera, sondern steht weiter links.
Die ersten Zeilen unseres Codes sorgen also dafür, dass sich der Spieler in der Mitte der Kamera befindet.
Schritt 5: Rufe die Kamerafunktion auf.
Zu guter Letzt müssen wir unsere Funktion, die wir in TAB 5 definiert haben, noch an der richtigen Stelle aufrufen.
Gehe in unsere _Update()-Funktion (TAB 2) und füge die folgende Code Zeile GENAU ÜBER dem letzten END ein:
einfachekam()
Hier siehst du noch einmal, an welcher Stelle der Funktionsaufruf „einfachekam()“ eingefügt werden sollte:
Starte nun das Spiel und TADA, die Kamera folgt nun unserem Spieler über das Feld 🙂
Im nächsten Tutorial lernst du, wie wir verhindern können, dass unsere Figur durch bestimmte Gegenstände läuft (Zum Beispiel durch Bäume).
