{"id":368,"date":"2022-07-28T19:55:00","date_gmt":"2022-07-28T17:55:00","guid":{"rendered":"https:\/\/sora.fshcloud.de\/?p=368"},"modified":"2025-02-14T14:45:20","modified_gmt":"2025-02-14T13:45:20","slug":"pico-8-tutorial-8-nutze-die-kamera-um-deine-figur-ueber-die-map-zu-steuern","status":"publish","type":"post","link":"https:\/\/sora.fshcloud.de\/?p=368","title":{"rendered":"Pico 8 Tutorial 8: Nutze die Kamera, um deine Figur \u00fcber die MAP zu steuern"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Einf\u00fchrung <\/h2>\n\n\n\n<p>Du hast nun deine Map fertig gezeichnet. In diesem Tutorial lernst du, wie du die MAP tats\u00e4chlich auf das Spielfeld bringst und die Kamera im Spiel nutzt, damit du deine Figur \u00fcber die ganze Karte steuern kannst.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Videotutorial<\/h2>\n\n\n\n<p>Wie gewohnt schaue dir gerne das folgende Video an: <\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1152 \/ 720;\" width=\"1152\" controls src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2022\/07\/Map_Spielfeld.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 1: Bringe deine MAP auf das Spielfeld. <\/h2>\n\n\n\n<p>Deine Map ist fertig. Wenn du das Spiel startest, erscheint die MAP aber noch nicht auf dem Spielfeld. Um das zu \u00e4ndern, gehe auf TAB 1 in die _draw() Funktion und f\u00fcge eine Zeile \u00fcberhalb der spr() Funktion den folgenden Code ein:<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-96af2b80f1b579fb50ef292bea621717\"><code>map(0,0)<\/code><\/pre>\n\n\n\n<p>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. \u00dcbermittelst 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. \u00dcbermittelst du mehr Werte, kannst du auch steuern, wie &#8222;breit&#8220; und &#8222;hoch&#8220; deine Karte sein soll &#8211; aber das probieren wir heute nicht aus. <\/p>\n\n\n\n<p>Euer Code sollte nun wie folgt aussehen: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"1800\" src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2024\/07\/Bildschirmfoto-2024-07-28-um-19.29.46.png\" alt=\"\" class=\"wp-image-369\"\/><\/figure>\n\n\n\n<p>Startest du jetzt das Spiel, siehst du deine Karte nun auf dem Spielfeld! <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 2: Nutze die Kamera, um deiner Spielfigur \u00fcber die MAP zu folgen<\/h2>\n\n\n\n<p>Wir m\u00fcssen nun einige Zeilen Code einf\u00fcgen. Gehe in TAB 0. In unserer _init() Funktion haben wir bereits unser Spieler-Objekt angelegt. Wir k\u00f6nnen aber nicht nur aus unserer Spielfigur ein Objekt machen, sondern auch aus unserer Kamera. F\u00fcge die folgenden Zeilen unterhalb deines Spieler-Objekts ein:<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-5b826cb199233bba73d1df44095ba03a\"><code>cam={\nx = 0, \ny = 0\n}<\/code><\/pre>\n\n\n\n<p>Genau wie bei unserem Spieler-Objekt bzw. unserer Spielfigur weisen wir unserer Kamera, die wir hier verk\u00fcrzt &#8222;cam&#8220; genannt haben, eine X und eine Y Eigenschaft zu. Die Werte, die wir sp\u00e4ter dynamisch ver\u00e4ndern werden (je nachdem, wo wir uns mit unserer Figur entlang bewegen), setzen wir erst einmal auf 0. Ver\u00e4ndern 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<\/p>\n\n\n\n<p>Euer Code sollte nun wie folgt aussehen: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"1800\" src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2024\/07\/Bildschirmfoto-2024-07-28-um-19.43.27.png\" alt=\"\" class=\"wp-image-370\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 3: Begrenze die Kamera auf die MAP<\/h2>\n\n\n\n<p>Im n\u00e4chsten Schritt m\u00fcssen wir Pico-8 noch mitteilen, wo unsere MAP startet und wo sie endet. Ansonsten w\u00fcrde sie noch \u00fcber den Kartenrand mitlaufen, was im Spiel seltsam aussehen w\u00fcrde. Wir k\u00f6nnten wieder ein Objekt namens &#8222;Karte&#8220; anlegen und dort zwei Eigenschaften &#8222;Anfang&#8220; und &#8222;Ende&#8220; 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\u00f6nnen wir auch einfach schnell zwei VARIABLEN anlegen.<\/p>\n\n\n\n<p>Du fragst dich jetzt sicher, was VARIABLEN sind, oder? <\/p>\n\n\n\n<p>Stell dir vor, du hast eine gro\u00dfe Kiste, in die du verschiedene Sachen legen kannst. Diese Kiste hat einen Namen, damit du immer wei\u00dft, was in dieser Kiste ist.<\/p>\n\n\n\n<p>Eine VARIABLE in der Programmierung ist so \u00e4hnlich wie diese Kiste. Hier ist eine einfache Erkl\u00e4rung:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>1.  Kiste mit einem Namen: Eine Variable ist wie eine Kiste, der du einen Namen gibst. Du k\u00f6nntest die Kiste zum Beispiel \u201cAlter\u201d oder \u201cPunkte\u201d nennen.\n2.  Etwas hineinlegen: Du kannst Dinge in diese Kiste legen. In der Programmierung sind das Daten oder Werte. Zum Beispiel k\u00f6nntest du in die Kiste \u201cAlter\u201d die Zahl 10 legen.\n3.  Wert \u00e4ndern: Du kannst den Inhalt der Kiste jederzeit \u00e4ndern. Wenn du also \u00e4lter wirst, kannst du die Zahl in der Kiste \u201cAlter\u201d auf 11 \u00e4ndern.<\/code><\/pre>\n\n\n\n<p>In Pico 8 legst du eine Variable an, in dem du einfach den Namen der &#8222;Kiste&#8220; schreibst, dahinter ein &#8222;=&#8220; setzt und anschlie\u00dfend den Wert, den du in der Kiste speichern m\u00f6chtest. Eine Variable mit Namen &#8222;Alter&#8220;, in dem du den Wert &#8222;10&#8220; speicherst, s\u00e4he dann so aus: <\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-1c636fc9bcd794730bb39ae18bbcbb30\"><code>alter = 10 <\/code><\/pre>\n\n\n\n<p>Verstanden? <\/p>\n\n\n\n<p>Dann legen wir jetzt mal zwei Variablen an, die wir jeweils &#8222;map_start&#8220; und &#8222;map_end&#8220; 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 &#8211; 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 &#8211; also ganz unten rechts). <\/p>\n\n\n\n<p>F\u00fcge die folgende Zeile unter deinem Kamera-Objekt ein: <\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-b0fc67175e0ae53cda55652b122ba8b8\"><code>map_start = 0\nmap_end = 1024<\/code><\/pre>\n\n\n\n<p>Dein Code sollte jetzt wie folgt aussehen: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"1800\" src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2024\/07\/Bildschirmfoto-2024-07-28-um-19.54.25.png\" alt=\"\" class=\"wp-image-371\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 4: F\u00fcge die Kamerafunktion ein<\/h2>\n\n\n\n<p>Die Vorbereitungen sind abgeschlossen. Jetzt m\u00fcssen wir dem Programm sagen, wie genau die Kamera funktionieren soll, bzw. was beachtet werden muss. <\/p>\n\n\n\n<p>Daf\u00fcr f\u00fcgen wir in TAB 5 den folgenden Code ein: <\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-8d760f21b6eaca57132c82701102b024\"><code>function einfachekam()\n\n  cam.x=spieler.x-64\n  cam.y=spieler.y-64\n  \n  if cam.x&lt;map_start then\n     cam.x=map_start\n  end\n  if cam.x&gt;map_end-128 then\n     cam.x=map_end-128\n  end\n  \n  if cam.y&lt;map_start then\n     cam.y=map_start\n  end\n  if cam.y&gt;map_end-128 then\n     cam.y=map_end-128\n  end \n  \n  camera(cam.x,cam.y)\n\nend<\/code><\/pre>\n\n\n\n<p>Dein Code sollte nun wie folgt aussehen: <\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"1800\" data-id=\"380\" src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2024\/07\/Bildschirmfoto-2024-10-07-um-17.33.20.png\" alt=\"\" class=\"wp-image-380\"\/><\/figure>\n<\/figure>\n\n\n\n<p><strong>Was macht der Code? <\/strong><\/p>\n\n\n\n<p>Die If-Befehle sorgen daf\u00fcr, dass die Kamera sich nicht weiterbewegt, wenn sich die Spielfigur \u00fcber die gesetzen Grenzen (map_start und map_end) hinweg bewegen will. <\/p>\n\n\n\n<p>Anschlie\u00dfend werden einer Pico8-Funktion namens &#8222;Camera&#8220; die Werte aus unserem Objekt Cam.X und Cam.Y \u00fcbermittelt. Diese Werte braucht die Funktion, damit sie die Kamera bewegen kann. <\/p>\n\n\n\n<p>Aber warum werden dann in den Variablen Cam.X und Cam.Y  wieder andee Variablen, n\u00e4mlich &#8222;Spieler.X&#8220; und Spieler.Y&#8220; gespeichert. Und warum wird gleichzeitig die Zahl 64 von beiden Variablen abgezogen? <\/p>\n\n\n\n<p>Das hat den folgenden Grund: <\/p>\n\n\n\n<p>Die Pico-8 Bildschirmaufl\u00f6sung ist 128&#215;128 Pixel. Wenn du m\u00f6chtest, dass die Kamera den Spieler in der Bildschirmmitte zentriert, musst du die Kamera so platzieren, dass der Spieler im Zentrum des 128&#215;128 Pixel gro\u00dfen Bildschirms bleibt.<br>Da der Bildschirm in der Mitte bei (64, 64) liegt (die H\u00e4lfte von 128), wird von den Koordinaten des Spielers 64 Pixel subtrahiert.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Wenn wir anstatt 64 nur 32 abziehen (z.B.: cam.x = spieler.x &#8211; 32), dann ist der Spieler pl\u00f6tzlich nicht mehr in der Mitte der Kamera, sondern steht weiter links. <\/p>\n\n\n\n<p>Die ersten Zeilen unseres Codes sorgen also daf\u00fcr, dass sich der Spieler in der Mitte der Kamera befindet. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 5: Rufe die Kamerafunktion auf. <\/h2>\n\n\n\n<p>Zu guter Letzt m\u00fcssen wir unsere Funktion, die wir in TAB 5 <em>definiert<\/em> haben, noch an der richtigen Stelle <em>aufrufen.<\/em><\/p>\n\n\n\n<p>Gehe in unsere _Update()-Funktion (TAB 2) und f\u00fcge die folgende Code Zeile GENAU \u00dcBER dem letzten END ein: <\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-2fcb6676b2e80b48255f95512b92a82d\"><code>  einfachekam()\n<\/code><\/pre>\n\n\n\n<p>Hier siehst du noch einmal, an welcher Stelle der Funktionsaufruf &#8222;einfachekam()&#8220; eingef\u00fcgt werden sollte: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2880\" height=\"1800\" src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2024\/07\/Bildschirmfoto-2024-10-07-um-17.48.53.png\" alt=\"\" class=\"wp-image-381\"\/><\/figure>\n\n\n\n<p>Starte nun das Spiel und  TADA, die Kamera folgt nun unserem Spieler \u00fcber das Feld \ud83d\ude42<\/p>\n\n\n\n<p>Im n\u00e4chsten Tutorial lernst du, wie wir verhindern k\u00f6nnen, dass unsere Figur durch bestimmte Gegenst\u00e4nde l\u00e4uft (Zum Beispiel durch B\u00e4ume). <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Einf\u00fchrung Du hast nun deine Map fertig gezeichnet. In diesem Tutorial lernst du, wie du die MAP tats\u00e4chlich auf das Spielfeld bringst und die Kamera im Spiel nutzt, damit du&hellip;<\/p>\n","protected":false},"author":1,"featured_media":382,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,13],"tags":[],"class_list":["post-368","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-pico-8","category-tutorial"],"_links":{"self":[{"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=368"}],"version-history":[{"count":6,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/368\/revisions"}],"predecessor-version":[{"id":387,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/368\/revisions\/387"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/media\/382"}],"wp:attachment":[{"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=368"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=368"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}