{"id":284,"date":"2023-09-18T11:45:00","date_gmt":"2023-09-18T09:45:00","guid":{"rendered":"https:\/\/sora.fshcloud.de\/?p=284"},"modified":"2025-02-14T14:44:53","modified_gmt":"2025-02-14T13:44:53","slug":"pico-8-tutorial-4-spielfigur-bewegen","status":"publish","type":"post","link":"https:\/\/sora.fshcloud.de\/?p=284","title":{"rendered":"Pico 8 Tutorial 4: Bewege deine Spielfigur"},"content":{"rendered":"\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Was du am Ende des Tutorials k\u00f6nnen solltest: <\/strong><br>&#8211; Du kannst mit Hilfe des if- Befehls deine Spielfigur in alle vier Richtungen bewegen<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>\u00dcbung: <\/strong><br>&#8211; Bewege deine Figur nach rechts, oben und unten, in dem du den if-Befehl anwendest.<br>&#8211; Ver\u00e4ndere die Geschwindigkeit deiner Figur, in dem du den Wert der Eigenschaft &#8222;Speed&#8220; deines Spieler-Objekts ver\u00e4nderst.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Einf\u00fchrung <\/h2>\n\n\n\n<p>Im letzten Tutorial hast du deine Spielfigur auf das Spielfeld gebracht. Nun willst du sie nat\u00fcrlich noch bewegen k\u00f6nnen. In Pico 8 erreichen wir das, in dem wir dem Programm befehlen, immer dann eine entsprechende Entscheidung zu treffen, wenn wir eine bestimmte Taste dr\u00fccken. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Videotutorial<\/h2>\n\n\n\n<p>Wie immer k\u00f6nnt ihr euch gerne das Videotutorial anschauen, in dem ich euch Schritt f\u00fcr Schritt erkl\u00e4re, wie ihr eure Spielfigur bewegen k\u00f6nnt: <\/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\/2024\/07\/Spielfigur_bewegen.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 1: Befehle in der Programmiersprache LUA schreiben<\/h2>\n\n\n\n<p>Vereinfacht wollen wir dem Programm folgende Befehle geben: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>A) Wenn der Spieler die linke Pfeiltaste dr\u00fcckt, bewege die Figur nach links.<\/li>\n\n\n\n<li>B) Wenn der Spieler die rechte Pfeiltaste dr\u00fcckt, bewege die Figur nach rechts.<\/li>\n\n\n\n<li>C) Wenn der Spieler die Pfeiltaste nach oben dr\u00fcckt, bewege die Figur nach oben.<\/li>\n\n\n\n<li>D) Wenn der Spieler die Pfeiltaste nach unten dr\u00fcckt, bewege die Figur nach unten. <\/li>\n<\/ul>\n\n\n\n<p>W\u00fcrden wir diese Befehle, so wie sie da stehen, in das Programm schreiben, k\u00f6nnte uns Pico 8 aber nicht verstehen. Anders als eine KI wie ChatGPT versteht Pico-8 keine &#8222;Menschensprache&#8220;. Wir m\u00fcssen diese Befehle also in eine Computersprache \u00fcbersetzen, mit der das Programm etwas &#8222;anfangen&#8220; kann. Pico 8 versteht nur die Programmiersprache LUA. <\/p>\n\n\n\n<p>Schauen wir uns an, wie wir unsere Befehle auf LUA \u00fcbersetzen m\u00fcssen: <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Befehl auf Deutsch<\/td><td>\u00dcbersetzung in LUA<\/td><\/tr><tr><td> &#8222;Wenn der Spieler die linke Pfeiltaste dr\u00fcckt, bewege die Figur nach links.&#8220;<\/td><td>if btn(0) then <br>spieler.x -= spieler.speed <br>end<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Wie du siehst, besteht eine Programmiersprache aus Zahlen, Buchstaben, Abk\u00fcrzungen und W\u00f6rtern. <\/p>\n\n\n\n<p>Der Befehl in LUA wiederum besteht vereinfacht gesagt aus drei Teilen. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2245\" height=\"1587\" src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2024\/07\/if-else-Ekrlaerung.png\" alt=\"\" class=\"wp-image-285\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Die <strong>LILA-W\u00f6rter <\/strong>bilden den eigentlich <strong>BEFEHL<\/strong>. \u00dcbersetzt in Menschensprache hie\u00dfe das: <strong>WENN<\/strong> (&#8222;if&#8220;) [BEDINGUNG ERF\u00dcLLT IST], <strong>DANN<\/strong> (&#8222;then&#8220;) [F\u00dcHRE BEFEHL AUS ] UND <strong>BEENDE DEN BEFEHL<\/strong> (&#8222;end&#8220;) <\/li>\n\n\n\n<li>Die W\u00f6rter in T\u00dcRKIS bilden die <strong>BEDINGUNG<\/strong>. <strong>BTN(0)<\/strong> l\u00e4sst sich \u00fcbersetzen als: Button mit der zugewiesenen Nummer 0 ist gedr\u00fcckt worden. Aber warte mal &#8211; was hat es mit der &#8222;zugewiesenen Nummer 0&#8220; auf sich? Soll sich die Figur nicht nur dann bewegen, wenn man die linke Pfeiltaste dr\u00fcckt, und nicht die Taste 0? In Pico 8 funktioniert das etwas anders. Jede Pfeiltaste sowie Aktionstaste hat eine Zahl zugewiesen bekommen, die wir beim Schreiben der Bedingung &#8222;\u00fcbermitteln&#8220; m\u00fcssen. Du kannst die Zuordnung auf dem folgenden Bild sehen: <\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1082\" height=\"592\" src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2024\/07\/Bildschirmfoto-2024-07-18-um-11.48.28.png\" alt=\"\" class=\"wp-image-288\" style=\"width:491px;height:auto\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Die W\u00f6rter in <strong>ROT<\/strong> bilden die ANWEISUNG. Wie genau die Anweisung zu verstehen ist, bzw. was die Anweisung im Einzelnen macht, werden wir im folgenden Schritt kl\u00e4ren. <\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 2: Die Anweisung verstehen: &#8222;Bewege die Spielfigur nach links&#8220;<\/h2>\n\n\n\n<p>Programme sind leider nicht sehr intelligent. W\u00fcrden wir Pico-8 befehlen: &#8222;Bewege die Figur nach links&#8220;, k\u00f6nnte es mit diesem Befehl nicht viel anfangen &#8211; die Anweisung w\u00e4re zu &#8222;ungenau&#8220;. Wir m\u00fcssen dem Programm GANZ GENAU sagen, was es tun soll. <\/p>\n\n\n\n<p>Kannst du dich noch erinnern, wie wir im letzten Tutorial ein Objekt mit dem Namen Spieler angelegt haben? Dieses Objekt IST unsere Spielfigur. Wir haben ihm im vorangegangenen Tutorial eine Eigenschaft &#8222;X&#8220; mit dem Wert 64 gegeben. X gibt an, auf WELCHER H\u00d6HE DER X-LINIE sich unsere Spielfigur befindet. Wenn das Spiel startet, befindet sich die Figur auf der H\u00d6HE 64. Wollen wir sie nach links bewegen, k\u00f6nnen wir dem Programm also sagen, dass es den Wert &#8222;X&#8220; KLEINER machen soll. Wenn der Spieler die linke Pfeiltaste dr\u00fcckt, soll sich unsere Figur nicht mehr auf der H\u00f6he 64 befinden, sondern auf H\u00f6he 63, 62, 61 oder noch kleiner&#8230; Die Figur &#8222;springt&#8220; damit  z.B. von H\u00f6he 64 auf H\u00f6he 63 &#8211; f\u00fcr den Spieler sieht das dann so aus, als w\u00fcrde sich die Figur nach links bewegen. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2245\" height=\"1587\" src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2024\/07\/Pico-8-Bewegung.png\" alt=\"\" class=\"wp-image-289\"\/><\/figure>\n\n\n\n<p>Woher wei\u00df Pico 8 aber jetzt, UM WIE VIEL es den X-Wert unseres Spieler BEI JEDEM DR\u00dcCKEN DER LINKEN PFEILTASTE senken soll? <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 3: Neue Eigenschaft &#8222;Speed&#8220; hinzuf\u00fcgen<\/h2>\n\n\n\n<p>Euch ist vielleicht schon das folgende Wort in der Anweisung aufgefallen: &#8222;spieler.speed&#8220;. &#8222;Spieler&#8220; ist der Name unseres Spieler-Objekts, &#8222;speed&#8220; eine weitere Eigenschaft. Wenn ihr jetzt in eurem Code vom letzten Tutorial schaut, m\u00fcsste dort folgendes zu sehen sein: <\/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-18-um-12.27.59.png\" alt=\"\" class=\"wp-image-290\"\/><\/figure>\n\n\n\n<p>Unser Objekt hat bisher nur drei Eigenschaften: &#8222;X, Y und SPRITE&#8220;. Wir wollen ihm eine weitere Eigenschaft hinzuf\u00fcgen, die wir &#8222;SPEED&#8220; also Geschwindigkeit nennen. Diese Eigenschaft beschreibt, wie schnell sich die Figur \u00fcber das Spielfeld bewegen kann. <\/p>\n\n\n\n<p>Setze hinter der 2 bei &#8222;sprite = 2&#8220; EIN KOMMA und f\u00fcge die folgende Zeile hinzu: <\/p>\n\n\n\n<p>speed = 2 <\/p>\n\n\n\n<p>Dein 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-18-um-12.27.49.png\" alt=\"\" class=\"wp-image-291\"\/><\/figure>\n\n\n\n<p>Je h\u00f6her die Zahl bei &#8222;speed&#8220; ist, desto schneller bewegt sich die Figur \u00fcber das Spielfeld. Die Zahl sagt unserem Programm also, um wie viel es den WERT VON X BEI JEDEM DR\u00dcCKEN DER LINKEN PFEILTESTE senken soll.  Probiere es gerne am Ende des Tutorials einmal aus und lasse deine Figur schneller oder langsamer werden. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 4: Die _update() Funktion verstehen. <\/h2>\n\n\n\n<p>Im letzten Tutorial habe ich dir erkl\u00e4rt, dass Pico 8 aus drei grundlegenden Funktionen besteht: _init(), _draw() und _update(). In die _init() Funktion erstellen wir unser Spieler-Objekt, dass NUR EINMAL zu BEGINN des Spiels erzeugt werden soll. In die _draw() Funktion schreiben wir alles, was das Programm ZEICHNEN soll (also zum Beispiel unsere Spielfigur). <\/p>\n\n\n\n<p><strong>Was macht nun die _update() Funktion? <\/strong><\/p>\n\n\n\n<p>Stell dir vor, _update() ist wie das Herz unseres Spiels. Es schl\u00e4gt 30 mal pro Sekunde und \u00fcberpr\u00fcft mit jedem Herzschlag, ob sich etwas ge\u00e4ndert hat. Hier programmieren wir, was passieren soll, wenn der Spieler eine Taste dr\u00fcckt oder wenn sich etwas im Spiel bewegen soll.<\/p>\n\n\n\n<p>F\u00fcge in deinem Programm einen neuen Tab hinzu (dr\u00fccke auf das Kreuz oben rechts neben dem Tab 1) und kopiere den folgenden Code: <\/p>\n\n\n\n<pre class=\"wp-block-code has-pale-pink-color has-black-background-color has-text-color has-background has-link-color wp-elements-2310e048fec7f5f812a5e385f5f32aa6\"><code>function _update() \n\nend<\/code><\/pre>\n\n\n\n<p>Dein Code sollte nun so 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-18-um-12.43.46.png\" alt=\"\" class=\"wp-image-292\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 5: Die Spielfigur nach links bewegen<\/h2>\n\n\n\n<p>Wir k\u00f6nnen nun unsere LUA-Anweisung (Wenn die linke Pfeiltaste gedr\u00fcckt wird, bewege die Figur nach links) in unsere _update() Funktion einf\u00fcgen. Kopiere hierf\u00fcr den folgenden Code mit command und c und f\u00fcge ihn in Pico 8 ein, in dem du command und v dr\u00fcckst. <\/p>\n\n\n\n<pre class=\"wp-block-code has-pale-pink-color has-black-background-color has-text-color has-background has-link-color wp-elements-d9a45d15bed312a17db4075ee1724e0b\"><code>if btn(0) then \nspieler.x -= spieler.speed\nend<\/code><\/pre>\n\n\n\n<p>Dein Code sollte nun so 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-18-um-12.47.30.png\" alt=\"\" class=\"wp-image-293\"\/><\/figure>\n\n\n\n<p>Dr\u00fccke jetzt command und S und anschlie\u00dfend command und R, um dein Spiel auszuprobieren. Deine Figur bewegt sich nach links, wenn du die linke Pfeiltaste dr\u00fcckst. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00dcbung <\/h2>\n\n\n\n<p>Deine Figur kann sich bisher nur nach links bewegen. Um sie nach rechts, oben und unten bewegen zu k\u00f6nnen, musst du weitere Zeilen des if-Befehls hinzuf\u00fcgen. Auf dem folgenden Bild siehst du, wie ich einen weiteren Befehl hinzugef\u00fcgt habe, damit meine Figur auch nach rechts laufen kann: <\/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-18-um-12.50.04.png\" alt=\"\" class=\"wp-image-294\"\/><\/figure>\n\n\n\n<p>F\u00fcge weitere Befehle hinzu, um die Figur auch nach oben und unten laufen zu lassen. Auf dem folgenden Bild siehst du, welche Teile des Codes du hierf\u00fcr ver\u00e4ndern musst: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"2245\" height=\"1587\" src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2024\/07\/1.png\" alt=\"\" class=\"wp-image-295\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">HILFE?<\/h2>\n\n\n\n<p>Wenn du Hilfe brauchst oder nicht weiterkommst, sprich mich gerne in der Schule an. Wir schauen uns das Problem dann gemeinsam an. Versuche es aber immer erst ALLEINE zu l\u00f6sen. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Was du am Ende des Tutorials k\u00f6nnen solltest: &#8211; Du kannst mit Hilfe des if- Befehls deine Spielfigur in alle vier Richtungen bewegen \u00dcbung: &#8211; Bewege deine Figur nach rechts,&hellip;<\/p>\n","protected":false},"author":1,"featured_media":289,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,13],"tags":[],"class_list":["post-284","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\/284","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=284"}],"version-history":[{"count":4,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/284\/revisions"}],"predecessor-version":[{"id":300,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/284\/revisions\/300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/media\/289"}],"wp:attachment":[{"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=284"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=284"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=284"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}