{"id":301,"date":"2023-08-19T13:05:00","date_gmt":"2023-08-19T11:05:00","guid":{"rendered":"https:\/\/sora.fshcloud.de\/?p=301"},"modified":"2025-02-14T14:44:58","modified_gmt":"2025-02-14T13:44:58","slug":"pico-8-tutorial-5-animiere-deine-spielfigur-teil-1","status":"publish","type":"post","link":"https:\/\/sora.fshcloud.de\/?p=301","title":{"rendered":"Pico 8 Tutorial 5: Animiere deine Spielfigur Teil 1"},"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 deine Spielfigur in unterschiedlichen Bewegungspositionen zeichnen <br>&#8211; Du kannst die Bewegungen deiner Spielfigur mit Hilfe des if-Befehls &#8222;animieren&#8220;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Einf\u00fchrung<\/h2>\n\n\n\n<p>Du kannst deine Spielfigur nun \u00fcber das Spielfeld bewegen. Dir ist aber bestimmt aufgefallen, dass die Bewegung, die deine Figur macht, noch sehr unnat\u00fcrlich aussieht. Sie l\u00e4uft nicht \u00fcber das Spielfeld, sondern gleitet oder schwebt. In diesem Tutorial lernst du, wie du deine Figur m\u00f6glichst &#8222;nat\u00fcrlich&#8220; laufen l\u00e4sst. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Videotutorial <\/h2>\n\n\n\n<p>Schaue dir gerne wie gewohnt das Videotutorial 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\/2024\/07\/Spieler_animieren_1.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 1: Zeichne deine Spielfigur in unterschiedliche Positionen <\/h2>\n\n\n\n<p>Um eine Spielfigur zu animieren, sollten wir kurz kl\u00e4ren, was wir unter einer &#8222;Animation&#8220; verstehen. Animation ist, wenn wir viele Bilder schnell hintereinander zeigen, damit es so aussieht, als w\u00fcrde sich etwas bewegen. Denk an ein Daumenkino. Wenn du die Seiten schnell durchbl\u00e4tterst, sehen die Bilder aus, als w\u00fcrden sie sich bewegen.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/ab\/Flip_Book_-_Messi_Example.webm\"><\/video><\/figure>\n\n\n\n<p>In Pico 8 machen wir das gleiche mit unserer Spielfigur. <\/p>\n\n\n\n<p>\u00d6ffne wie gewohnt Pico 8 und gehe in den Sprite-Editor (Alien-Gesicht oben rechts)<\/p>\n\n\n\n<p>Damit der Code, den wir nachher schreiben werden, funktioniert, m\u00fcssen wir unsere Figuren in die jeweils passenden Fenster zeichnen. <\/p>\n\n\n\n<p>Das Bild deiner Spielfigur, welches zum Start des Spiels gezeigt werden soll, sollte im Fenster mit der Nummer 002 gezeichnet werden. <\/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-19-um-11.42.25.png\" alt=\"\" class=\"wp-image-304\"\/><\/figure>\n\n\n\n<p>Im Fenster mit der Nummer 001 zeichnest du nun ein Bild deiner Spielfigur, wie sie nach LINKS l\u00e4uft. Im Fenster mit der Nummer 000 zeichnest du ein weiteres Bild, wie deine Figur nach links l\u00e4uft (diesmal aber mit einem anderen, sichtbaren Bein)<\/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-19-um-11.47.33.png\" alt=\"\" class=\"wp-image-306\"\/><\/figure>\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-19-um-11.47.58.png\" alt=\"\" class=\"wp-image-307\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 2: Schreibe deine erste, eigene Funktion<\/h2>\n\n\n\n<p>Um deine Figur nun zum Laufen zu bekommen, brauchen wir eine eigene Funktion. Du erinnerst dich &#8211; Pico 8 besteht aus drei Funktionen: _init(), _update() und _draw(). Sie sind das Herzst\u00fcck unseres Programms. Als Programmierer haben wir aber die M\u00f6glichkeit, Pico 8 weitere Funktionen hinzuzuf\u00fcgen.<\/p>\n\n\n\n<p>Funktionen sind daf\u00fcr da, unseren Code zu ordnen und Anweisungen, die wir an einer Stelle im Code geschrieben haben, an einer anderen Stelle erneut aufzurufen. Ohne Funktionen m\u00fcssten wir st\u00e4ndig Anweisungen, die wir bereits geschrieben haben, nochmal schreiben. Programmierer sind faul, deshalb haben sie Funktionen erfunden. <\/p>\n\n\n\n<p>Um eine eigene Funktion zu erstellen, lege am besten einen neuen Tab an. (Tab Nummer 3). Kopiere die den folgenden Code (markieren und command und c dr\u00fccken) und f\u00fcge ihn in Tab Nummer 3 (command und v dr\u00fccken) 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-9e739ad3d640b5ed50b29a73621ae36e\"><code>function _animation()\n\nend<\/code><\/pre>\n\n\n\n<p> Um eine Funktion mehrfach benutzen zu k\u00f6nnen, m\u00fcssen wir sie vorher einmal aufschreiben bzw. erstellen. Genau das machen wir gerade. Eine Funktion erstellt man, in dem man den Befehl <em>function<\/em> eintippt, anschlie\u00dfend der Funktion einen Namen gibt (ich habe sie jetzt Animation genannt, du k\u00f6nntest sie aber auch &#8222;Wurstwasser&#8220; nennen, auch wenn du sp\u00e4ter vielleicht nicht mehr wei\u00dft, was die Funktion &#8222;Wurstwasser&#8220; eigentlich genau macht&#8230;) und hinter dem Namen eine ge\u00f6ffnete Klammer ( und eine geschlossene Klammer ) setzt. Auf dem Macbook kannst du eine ge\u00f6ffnete Klammer tippen, in dem du die Pfeiltaste nach oben und 8 dr\u00fcckst. Eine geschlossene Klammer tippst du, in dem du die Pfeiltaste nach oben und 9 dr\u00fcckst. Die Funktion musst du noch mit dem Befehl end abschlie\u00dfen.<\/p>\n\n\n\n<p>In diese Funktion schreiben wir unsere Anweisungen. Aber bevor wir das machen, \u00fcberlegen wir uns erst einmal, wie unsere Anweisung in LUA eigentlich aussehen m\u00fcsste, damit das Programm genau das macht, was wir von ihm wollen. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 3: Wechsel die Bilder deiner Spielfigur beim Laufen. <\/h2>\n\n\n\n<p>Kannst du dich erinnern, dass wir unserem Spieler-Objekt in der _init() Funktion eine Eigenschaft namens &#8222;Sprite&#8220; gegeben und ihr den Wert 2 zugewiesen haben? Wir k\u00f6nnten es uns einfach machen und dem Programm die folgende Anweisung geben: <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Anweisung in Menschensprache<\/td><td>Anweisung in LUA<\/td><\/tr><tr><td><em>&#8222;Wenn die linke Pfeiltaste gedr\u00fcckt wird, nimm f\u00fcr unsere Spielfigur nicht mehr das Bild aus dem Fenster Nummer 2, sondern nimm das Bild aus dem Fenster Nummer 1&#8220;<\/em><\/td><td>if btn(0) then <br>spieler.sprite = 1<br>end<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Probieren wir es einmal aus. Wir gehen in Tab Nummer 2 und f\u00fcgen die 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-9531648cfeffda71ea40cc6e37be60ac\"><code>spieler.sprite = 1<\/code><\/pre>\n\n\n\n<p>in unseren ersten if btn(0) Befehl ein. <\/p>\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-19-um-12.34.03.png\" alt=\"\" class=\"wp-image-308\"\/><\/figure>\n\n\n\n<p>Wenn du dein Spiel nun mit command und r startet, wechselt deine Spielfigur beim Dr\u00fccken der linken Pfeiltaste vom Bild aus dem Fenster Nummer 002 zum Bild aus dem Fenster Nummer 001. Es bleibt aber bei Bild Nummer 001, es entsteht nicht der Eindruck, als ob die Figur laufen w\u00fcrde. Wir m\u00fcssen uns also etwas Kompliziertes ausdenken&#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 4: Wechsel mehrere Bilder hintereinander<\/h2>\n\n\n\n<p>Geben wir dem Programm eine neue Anweisung: <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Anweisung in Menschensprache<\/td><td>Anweisung in LUA<\/td><\/tr><tr><td><em>&#8222;Wenn die linke Pfeiltaste gedr\u00fcckt wird, hole dir zun\u00e4chst den Wert der Eigenschaft &#8222;Sprite&#8220; des Spieler-Objekts und ziehe von diesem Wert 0,25 ab. <br>Wenn der Wert der Eigenschaft &#8222;Sprite&#8220; des Spieler-Objekts kleiner als 0 wird, setze den Wert auf 1,75&#8243;<\/em><\/td><td>spieler.sprite -= 0.25<br>if spieler.sprite &lt;= 0 then <br>spieler.sprite = 1.75<br>end<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Du fragst dich jetzt vielleicht, wie diese Anweisung zu verstehen ist. Wenn wir die linke Pfeiltaste dr\u00fccken bzw. gedr\u00fcckt halten, zieht das Programm 30 mal pro Sekunde 0.25 von 2 (das ist die Sprite-Nummer im Spieler-Objekt) ab. Beim ersten Dr\u00fccken ist der Wert von spieler.prite nicht mehr 2, sondern nur noch 1.75. Da dort jetzt eine 1 vor dem Komma steht, nimmt Pico 8 f\u00fcr unsere Spielfigur nicht mehr das Bild aus dem Fenster Nummer 002, sondern jetzt aus dem Fenster Nummer 001. Wenn wir die linke Pfeiltaste weiter gedr\u00fcckt halten, wird der Wert von spieler.sprite immer kleiner. Irgendwann ist er kleiner als 1 und Pico 8 nimmt f\u00fcr unsere Spielfigur das Bild aus dem Fenster 000.<\/p>\n\n\n\n<p>Wenn die Zahl irgendwann gleich oder kleiner als 0 ist (das bedeutet dieses Zeichen &lt; = in unserer if-Bedingung) weisen wir das Programm an, den Wert von spieler.sprite wieder auf 1.75 zu setzen. Pico nimmt dann f\u00fcr unsere Spielfigur wieder das Bild aus dem Fenster 001 und so weiter&#8230;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 5: Anweisung in die Funktion einf\u00fcgen<\/h2>\n\n\n\n<p>Wir haben unsere Anweisung fertig, m\u00fcssen sie aber noch in die Funktion einf\u00fcgen. <\/p>\n\n\n\n<p>Kopiere dir die Anweisung: <\/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-5ece747a970395fbbcc686a96d7809ac\"><code>spieler.sprite -= 0.25\nif spieler.sprite &lt;= 0 then \nspieler.sprite = 1.75\nend<\/code><\/pre>\n\n\n\n<p>und f\u00fcge sie in Tab Nummer 3 in die Funktion ein. <\/p>\n\n\n\n<p>Dein Code sollte jetzt 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-19-um-12.54.47.png\" alt=\"\" class=\"wp-image-309\"\/><\/figure>\n\n\n\n<p>Dr\u00fccken wir jetzt command und r, passiert aber noch nichts&#8230; Warum? <\/p>\n\n\n\n<p>Wir haben in Tab Nummer 3 unsere Funktion definiert bzw. erstellt, m\u00fcssen sie aber an anderer Stelle im Code aufrufen, damit Pico 8 die Anweisung auch &#8222;abarbeitet&#8220;. <\/p>\n\n\n\n<p>Wir m\u00f6chten, dass Pico 8 die Anweisungen aus unserer Animationsfunktion immer dann abarbeitet, wenn wir die linke Pfeiltaste dr\u00fccken. Wir gehen also auf den Tab Nummer 2, l\u00f6schen in unserem <em><strong>if btn(0) then<\/strong><\/em> Befehl die 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-9531648cfeffda71ea40cc6e37be60ac\"><code>spieler.sprite = 1<\/code><\/pre>\n\n\n\n<p>und rufen stattdessen unsere Animationsfunktion auf. Wir f\u00fcgen also folgende Zeile 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-330695487290fce0f15ab91a0f83910e\"><code>_animation()<\/code><\/pre>\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-19-um-13.02.27.png\" alt=\"\" class=\"wp-image-310\"\/><\/figure>\n\n\n\n<p>Dr\u00fccken wir nun command und r, &#8222;trippelt&#8220; bzw. l\u00e4uft unsere Spielfigur nach links, solange wie wir die linke Pfeiltaste gedr\u00fcckt halten.<\/p>\n\n\n\n<p>Im n\u00e4chsten Tutorial werden wir lernen, wie wir unsere Figur animieren k\u00f6nnen, wenn sie in die anderen Richtungen laufen soll.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Was du am Ende des Tutorials k\u00f6nnen solltest: &#8211; Du kannst deine Spielfigur in unterschiedlichen Bewegungspositionen zeichnen &#8211; Du kannst die Bewegungen deiner Spielfigur mit Hilfe des if-Befehls &#8222;animieren&#8220; Einf\u00fchrung&hellip;<\/p>\n","protected":false},"author":1,"featured_media":307,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,13],"tags":[],"class_list":["post-301","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\/301","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=301"}],"version-history":[{"count":5,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/301\/revisions"}],"predecessor-version":[{"id":320,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/301\/revisions\/320"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/media\/307"}],"wp:attachment":[{"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}