{"id":346,"date":"2023-06-22T10:04:00","date_gmt":"2023-06-22T08:04:00","guid":{"rendered":"https:\/\/sora.fshcloud.de\/?p=346"},"modified":"2025-02-14T14:45:10","modified_gmt":"2025-02-14T13:45:10","slug":"pico-8-herausforderung-1-animiere-deine-spielfigur-wenn-sie-nach-oben-und-unten-laeuft","status":"publish","type":"post","link":"https:\/\/sora.fshcloud.de\/?p=346","title":{"rendered":"Pico 8 Herausforderung 1: Animiere deine Spielfigur, wenn sie nach oben und unten l\u00e4uft"},"content":{"rendered":"\n<p>Herzlich Willkommen zu deiner ersten Herausforderung. Anders als in den bisherigen Tutorials werde ich dich dieses Mal nicht &#8222;an die Hand&#8220; nehmen und Schritt f\u00fcr Schritt den Code schreiben. <\/p>\n\n\n\n<p>Stattdessen beschreibe ich dir in &#8222;Menschensprache&#8220;, was dein Code k\u00f6nnen sollte. Zus\u00e4tzlich gebe ich nat\u00fcrlich Tipps und Hinweise, wie diese Herausforderung gemeistert werden kann. <\/p>\n\n\n\n<p>Bevor du loslegst, solltest du noch einmal f\u00fcr dich \u00fcberpr\u00fcfen, ob du die folgenden Punkte auch wirklich verstanden hast:<\/p>\n\n\n\n<p><strong>Du verstehst&#8230;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8230; dass wir Pico 8 Anweisungen in der Programmiersprache LUA geben m\u00fcssen, damit es das macht, was wir von ihm wollen.<\/li>\n\n\n\n<li>&#8230; den Aufbau von Pico 8 und wei\u00dft, welche Anweisungen in die _init(), die _draw() und die _update() Funktion geschrieben werden.<\/li>\n\n\n\n<li>&#8230; was eine Funktion ist und warum wir sie beim Programmieren nutzen<\/li>\n\n\n\n<li>&#8230; dass Funktionen an einer Stelle im Code definiert bzw. erstellt und an einer anderen Stelle aufgerufen werden<\/li>\n\n\n\n<li>&#8230; dass man Funktionen Werte \u00fcbermitteln kann <\/li>\n\n\n\n<li>&#8230; dass es in Funktionen oft STELLVERTRETER gibt, die immer den Wert annehmen, der der Funktion beim Aufrufen mitgegeben bzw. \u00fcbermittelt wurden.<\/li>\n\n\n\n<li>&#8230; was unser Spieler-Objekt ist<\/li>\n\n\n\n<li>.. dass im Spieler-Objekt Eigenschaften von uns festgelegt werden k\u00f6nnen und dass jede Eigenschaft einen Wert zugewiesen bekommt.<\/li>\n\n\n\n<li>&#8230; dass unser Spielfeld aus waagerechten (X-Linien) und senkrechten (Y-Linien) besteht<\/li>\n\n\n\n<li>&#8230; dass wir der spr() Funktion mehrere Werte mitgeben k\u00f6nnen. <\/li>\n<\/ul>\n\n\n\n<p>Wenn du hinter jedem dieser Punkte nicken und &#8222;einen Haken dransetzen&#8220; kannst, bist du sehr gut auf die nun kommende Herausforderung vorbereitet. Wenn nicht, ist die Herausforderung die M\u00f6glichkeit, deine Wissensl\u00fccken zu schlie\u00dfen. Schaue dir die einzelnen Tutorials noch einmal in Ruhe an, wenn du nicht weiterkommst, lies dir die Beschreibung aufmerksam durch oder sprich mich gerne in der Schule an &#8211; wir k\u00f6nnen uns z.B. in der Vertiefungszeit mal anschauen, wo es noch &#8222;hakt&#8220;. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vorbereitung: Einen If-Befehl erweitern<\/h2>\n\n\n\n<p>Damit die Lauf-Animation sp\u00e4ter fl\u00fcssig l\u00e4uft, m\u00fcssen wir eine Anweisung in unserer Funktion _animation() ein bisschen ver\u00e4ndern. <\/p>\n\n\n\n<p>Gehe auf TAB 2. Dein Code sollte 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-20-um-16.10.54.png\" alt=\"\" class=\"wp-image-339\"\/><\/figure>\n\n\n\n<p>Schaue dir noch einmal den folgenden Befehl an: <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1560\" height=\"456\" src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2024\/07\/Bildschirmfoto-2024-07-22-um-10.50.53.png\" alt=\"\" class=\"wp-image-347\"\/><\/figure>\n\n\n\n<p>Welche Anweisung geben wir hier unserem Programm? Wir sagen ihm: Wenn der Wert in der Eigenschaft &#8222;Sprite&#8220; unseres Spielerobjekts GLEICH oder NIEDRIGER (also &lt;=) ist, DANN setze den Wert der Eigenschaft &#8222;Sprite&#8220; unseres Spielerobjekts wieder auf 1.75. <\/p>\n\n\n\n<p>Mit dieser Anweisung \u00fcberpr\u00fcfen wir nur eine Bedingung. F\u00fcr unsere weiteren Animationen m\u00fcssen wir aber an dieser Stelle auch \u00fcberpr\u00fcfen, ob der Wert in spieler.sprite GR\u00d6\u00dfER oder GLEICH 2 ist. Tun wir das nicht, zeichnet unser Programm sp\u00e4ter kein Bild von unserer Figur, wenn wir nach unten und dann direkt nach links oder rechts laufen. <\/p>\n\n\n\n<p>Gl\u00fccklicherweise k\u00f6nnen wir in Pico unseren if-Befehl ganz elegant erweitern, sodass wir keinen neuen If-Befehl schreiben m\u00fcssen. <\/p>\n\n\n\n<p>L\u00f6sche hinter der 0 das Wort THEN, dr\u00fccke anschlie\u00dfend ENTER und kopiere die folgende Zeile: <\/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-92bdc639c3336d964e974aa2ae90d7d6\"><code>or spieler.sprite >= 2 then <\/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-22-um-10.57.43.png\" alt=\"\" class=\"wp-image-348\"\/><\/figure>\n\n\n\n<p>\u00dcbersetzen wir den Befehl noch einmal in Menschensprache, damit klar wird, was wir hier gemacht haben: <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Anweisung in LUA<\/td><td>Anweisung in Menschensprache<\/td><\/tr><tr><td>if spieler.sprite &lt;= 0 <br>or spieler.sprite >= 2 then <br>spieler.sprite = 1.75<br>end<\/td><td>Wenn der Wert in der Eigenschaft &#8222;Sprite&#8220; unseres Spieler-Objekts KLEINER oder GLEICH 0 ist <br>ODER <br>Wenn der Wert in der Eigenschaft &#8222;Sprite&#8220; unseres Spieler-Objekts GR\u00d6\u00dfER oder GLEICH 2 ist <br>DANN <br>Setze den Wert in der Eigenschaft &#8222;Sprite&#8220; unseres Spieler-Objekts wieder auf 1.75<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Wir k\u00f6nnen also mit Hilfe des Wortes <strong><em>or<\/em><\/strong> nicht nur EINE, sondern gleich ZWEI Bedingungen in unserem if-Befehl \u00fcberpr\u00fcfen. Dieses Wissen brauchen wir f\u00fcr unsere Herausforderung. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Herausforderung <\/h2>\n\n\n\n<p>Kommen wir nun zur eigentlichen Herausforderung. Arbeite die folgenden Schritte ab, um deine Figur nach oben und unten laufen zu lassen und sie dabei zu animieren. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Figur animieren, wenn sie nach oben l\u00e4uft<\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Zeichne im Sprite-Editor in Fenster Nummer 003 und 004 zwei Bilder deiner Figur, wie sie nach oben l\u00e4uft (Kleiner Tipp: Sie sollte dabei von der R\u00fcckseite zu sehen sein) <\/li>\n\n\n\n<li>Gehe zur\u00fcck in den Code. Lege TAB 4 an und erstelle dort eine Funktion mit Namen<strong><em> _animation2()<\/em><\/strong>. Wenn du nicht mehr wei\u00dft, wie eine Funktion erstellt wird, schaue dir Schritt 2 unseres 5. Tutorials noch einmal an <a href=\"https:\/\/sora.fshcloud.de\/?p=301\">https:\/\/sora.fshcloud.de\/?p=301<\/a><\/li>\n\n\n\n<li>Schreibe in diese Funktion nun die folgenden Anweisungen: <\/li>\n<\/ol>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Anweisungen f\u00fcr die Funktion _animation2()<\/td><\/tr><tr><td>&#8211; Setze den Wert in der Eigenschaft &#8222;Schalter&#8220; unseres Spieler-Objekts auf <strong><em>false <\/em><\/strong><br>&#8211; WENN der Wert der Eigenschaft &#8222;Sprite&#8220; unseres Spieler-Objekts KLEINER ist als 3 <br>ODER wenn der Wert der Eigenschaft &#8222;Sprite&#8220; unseres Spieler-Objekts GR\u00d6\u00dfER ist als 4 <br>DANN setze den Wert der Eigenschaft &#8222;Sprite&#8220; unseres Spieler-Objekts auf 3 <br>&#8211; Beende den If-Befehl <br>&#8211; Rechne anschlie\u00dfend den Wert der Eigenschaft &#8222;Sprite&#8220; unseres Spielerobjekts um 0.25 dazu (Verwende hierf\u00fcr die folgenden beiden Zeichen += )<br><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>4.  Gehe in TAB 2 und rufe die <strong><em>_animation2()<\/em><\/strong> in unserem<strong><em> if btn (2) then<\/em><\/strong> auf. Deine Figur wird nun animiert, wenn sie nach oben l\u00e4uft <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Figur animieren, wenn sie nach unten l\u00e4uft <\/h4>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Zeichne im Sprite-Editor in Fenster 016 und 017 zwei Bilder deiner Figur, wie sie nach unten l\u00e4uft.<\/li>\n\n\n\n<li>Lege in TAB 4 UNTER der Funktion _animation2() eine neue Funktion an, die du _animation3() nennst. <\/li>\n\n\n\n<li>Schreibe in diese Funktion nun die folgenden Anweisungen: <\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Anweisungen f\u00fcr die Funktion _animation3()<\/td><\/tr><tr><td>&#8211; Setze den Wert in der Eigenschaft &#8222;Schalter&#8220; unseres Spieler-Objekts auf <strong><em>false<\/em><\/strong><br>&#8211; WENN der Wert der Eigenschaft &#8222;Sprite&#8220; unseres Spieler-Objekts KLEINER ist als 16<br>ODER wenn der Wert der Eigenschaft &#8222;Sprite&#8220; unseres Spieler-Objekts GR\u00d6\u00dfER ist als 17<br>DANN setze den Wert der Eigenschaft &#8222;Sprite&#8220; unseres Spieler-Objekts auf 16<br>&#8211; Beende den If-Befehl<br>&#8211; Rechne anschlie\u00dfend den Wert der Eigenschaft &#8222;Sprite&#8220; unseres Spielerobjekts um 0.25 dazu (Verwende hierf\u00fcr die folgenden beiden Zeichen += )<br><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>4.  Gehe in TAB 2 und rufe die <strong><em>_animation3()<\/em><\/strong> in unserem<strong><em> if btn (3) then<\/em><\/strong> auf. Deine Figur wird nun animiert, wenn sie nach unten l\u00e4uft .<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Herzlichen Gl\u00fcckwunsch. Du hast den ersten Teil unserer Tutorial-Reihe geschafft und kannst deine Spielfigur \u00fcber das Spielfeld laufen lassen. <\/h2>\n\n\n\n<p>In den weiteren Tutorials wirst du lernen, wie du eine sogenannte MAP erstellen kannst und wie deine Spielfigur mit dieser MAP interagiert.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Herzlich Willkommen zu deiner ersten Herausforderung. Anders als in den bisherigen Tutorials werde ich dich dieses Mal nicht &#8222;an die Hand&#8220; nehmen und Schritt f\u00fcr Schritt den Code schreiben. Stattdessen&hellip;<\/p>\n","protected":false},"author":1,"featured_media":349,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,13],"tags":[],"class_list":["post-346","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\/346","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=346"}],"version-history":[{"count":1,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/346\/revisions"}],"predecessor-version":[{"id":350,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/346\/revisions\/350"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/media\/349"}],"wp:attachment":[{"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=346"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=346"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=346"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}