{"id":265,"date":"2023-10-17T14:16:31","date_gmt":"2023-10-17T12:16:31","guid":{"rendered":"https:\/\/sora.fshcloud.de\/?p=265"},"modified":"2025-02-14T14:44:40","modified_gmt":"2025-02-14T13:44:40","slug":"pico-8-tutorial-3-spielfigur-auf-das-spielfeld-bringen","status":"publish","type":"post","link":"https:\/\/sora.fshcloud.de\/?p=265","title":{"rendered":"Pico 8 Tutorial 3: Bringe deine Spielfigur aufs Spielfeld"},"content":{"rendered":"\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Was du am Ende des Tutorials k\u00f6nnen solltest: <\/strong><br>&#8211; Du kannst deine Spielfigur auf das &#8222;Spielfeld&#8220; bringen <br>&#8211; Du verstehst, was eine Funktion ist und was die Funktionen _init(), _update() und _draw() &#8222;machen&#8220;<br>&#8211; Du kannst ein eigenes &#8222;Spieler-Objekt&#8220; anlegen und Werte ver\u00e4ndern.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>\u00dcbung: <\/strong><br>&#8211; Bringe deine Spielfigur auf unterschiedliche Positionen des Spielfelds, z.B.: <br>a) oben links<br>b) unten links <br>c) oben rechts <br>d) unten rechts<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Einf\u00fchrung<\/h2>\n\n\n\n<p>In diesem Tutorial lernst du, wie du deinen Sprite auf die &#8222;Spielfl\u00e4che&#8220; bzw. das &#8222;Spielfeld&#8220; bringen kannst. Hierf\u00fcr musst du im Einzelnen verstehen&#8230;: <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>a) &#8230;was Funktionen sind.<br>b) &#8230; was die Funktionen _init(), _draw() und _update() &#8222;machen&#8220;<br>c) &#8230; wie man ein &#8222;Spieler-Objekt&#8220; erstellt.<br>d)&#8230; wie man mit Hilfe des Befehls spr() eine Figur auf das Spielfeld bringt.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Videotutorial <\/h2>\n\n\n\n<p>Wie immer kannst du dir gerne das folgende Video anschauen, in dem ich Schritt f\u00fcr Schritt erkl\u00e4re, wie ihr eure Figur auf die Spielfl\u00e4che bringt<\/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_Spielfeld.mp4\"><\/video><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 1: Was ist eine Funktion?<\/h2>\n\n\n\n<p>Pico 8 besteht aus drei Funktionen: <strong>_init(), _update() und _draw().<\/strong> <\/p>\n\n\n\n<p><strong>Aber was sind \u00fcberhaupt Funktionen? <\/strong><\/p>\n\n\n\n<p> Eine Funktion ist wie eine Anleitung, die dem Computer sagt, was er tun soll. Wenn wir den Computer bitten, etwas zu tun, folgt er dieser Anleitung Schritt f\u00fcr Schritt. Wenn wir dem Computer zum Beispiel den Befehl geben, die Funktion _init() auszuf\u00fchren, sagen wir ihm im Grunde nur, dass er alle Befehle, die wir in die _init()-Funktion hineingeschrieben haben, nacheinander ausf\u00fchren soll. <\/p>\n\n\n\n<p>Funktionen sind hilfreich, um unseren Code zu ordnen und zu organisieren und dem Computer die M\u00f6glichkeit zu geben, alle Befehle wie gew\u00fcnscht auszuf\u00fchren.<\/p>\n\n\n\n<p>Pico 8 ist so programmiert, dass es immer und v\u00f6llig automatisch zun\u00e4chst die _init()-Funktion, dann die _update() und schlie\u00dflich die _draw() Funktion ausf\u00fchrt. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 2: Die _init() Funktion<\/h2>\n\n\n\n<p>Die _init()-Funktion ist wie der Startknopf f\u00fcr unser Spiel. Alles, was in _init() steht, passiert nur einmal &#8211; n\u00e4mlich nur dann, wenn das Spiel gestartet wird. Das ist der beste Ort, um Dinge einzurichten, die nur einmal passieren m\u00fcssen, wie das Erstellen der Spielfigur oder das Festlegen der Startposition unserer Spielfigur.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 3: Das Spieler-Objekt<\/h2>\n\n\n\n<p>Die _init() Funktion ist der Ort, an dem wir unser Spieler-Objekt erstellen. <\/p>\n\n\n\n<p><strong>Was ist ein Spieler-Objekt?<\/strong><\/p>\n\n\n\n<p>Stell dir vor, ein Objekt in einem Spiel ist wie ein Spielzeug. Es hat bestimmte <strong>Eigenschaften<\/strong>, die es beschreiben. Zum Beispiel k\u00f6nnte ein Spielzeugauto R\u00e4der haben, eine bestimmte Farbe und eine Geschwindigkeit, mit der es f\u00e4hrt. Ein Objekt im Spiel funktioniert genauso. Es hat Eigenschaften, die beschreiben, wie es aussieht und was es tun kann. Ein Spieler-Objekt ist also einfach die Figur, die du im Spiel steuerst. Es hat Eigenschaften wie Position (wo es sich befindet), Aussehen (wie es aussieht) und was es tun kann (wie sich bewegen).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"6912\" height=\"3456\" src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2024\/07\/Objekt-Auto.png\" alt=\"\" class=\"wp-image-267\" style=\"width:840px;height:auto\"\/><\/figure>\n\n\n\n<p>Um nun dein eigenes Spieler-Objekt zu erstellen, musst du folgendes tun: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Starte dein Pico-8 Spiel, lade deinen Spielstand (load dein-name.p8) und dr\u00fccke die ESC-Taste. Du siehst das folgende Fenster: <\/li>\n<\/ul>\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-17-um-14.40.27.png\" alt=\"\" class=\"wp-image-276\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Wische mit drei Fingern nach rechts, um wieder auf diese Tutorial-Seite zu kommen. <strong>Kopiere <\/strong>dir den folgenden Code, in dem du alles in dem Block markierst (Ein Finger auf dem Touchpad bleibt gedr\u00fcckt, mit einem anderem Finger ziehst du den Mauszeiger \u00fcber alle Buchstaben und Zahlen. Anschlie\u00dfend dr\u00fcckst du<strong> command <\/strong>und <strong>c<\/strong>)<\/li>\n<\/ul>\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 has-medium-font-size wp-elements-f313ab3c40f427e9a39cfe4733fd682e\"><code>function _init()\nspieler = {\n  x = 64,\n  y = 64,\n  sprite = 1\n}\nend<\/code><\/pre>\n\n\n\n<p>3. Wische mit drei Fingern nach links, um wieder auf das Pico 8 Fenster zu kommen. F\u00fcge den Code ein, in dem du <strong>command und v<\/strong> dr\u00fcckst.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 4: Wie funktioniert der Code? <\/h2>\n\n\n\n<p>Wenn du im Einzelnen verstehen m\u00f6chtest, was jede einzelne Zeile des Codes macht, lies dir noch einmal die folgende Erkl\u00e4rung durch. Wenn du Sachen nicht verstehst oder Hilfe brauchst, bitte deine Eltern oder Patrick um Rat. <\/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-a194cc8ee93b2520df252e609e4066c0\"><code>function _init()   &lt;-- Der Befehl lautet \"function\". _init() ist der Name der Funktion\nspieler = {             &lt;-- Wir legen ein Objekt an, in dem wir uns einen Namen f\u00fcr das Objekt ausdenken, z.B.  \n                                 \"Spieler\". Anschlie\u00dfend setzen wir ein \"=\" und eine geschweifte Klammer \"{\" (Taste \"option\" \n                                   und 8 dr\u00fccken, um eine offene geschweifte Klammer zu tippen.)\n  x = 64,                   &lt;-- Anschlie\u00dfend legen wir Wertpaare fest. Wir legen die Eigenschaft \"x\" an und geben ihr \n                                   den Wert 64. X beschreibt die waagerechte Positon auf dem Spielfeld\n  y = 64,                  &lt;--- Hier legen wir die Eigenschaft \"y\" fest und geben ihr den Wert 64. Y beschreibt die      \n                                  senkrechte Position auf dem Spielfeld\n  sprite = 2            &lt;-- Hier legen wir fest, welches Bild aus unserem Sprite-Editor das Programm zeichnen soll\n}                                &lt;-- Mit der geschlossenen geschweiften Klammer (option und Taste 9 dr\u00fccken) sagen wir \n                                  Pico 8, dass wir mit der Beschreibung des Objekts fertig sind. \nend                          &lt;-- Mit dem Befehl \"end\" sagen wir Pico 8, dass es keine weiteren Befehle f\u00fcr die _init() \n                                  Funktion gibt<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 5: Was bedeutet x = 64, y = 64 und sprite = 2?<\/h2>\n\n\n\n<p>Beim Kopieren ist dir vielleicht aufgefallen, dass wir unserer Spielfigur komische Eigenschaften gegeben haben. Es hat zum Beispiel die Eigenschaft x = 64 und die Eigenschaft y = 64. Was bedeutet das? <\/p>\n\n\n\n<p>Stell dir das Spielfeld von Pico 8 wie ein Gitter vor. Es gibt waagerechte (von links nach rechts laufende) Linien, die wir X nennen. Und es gibt senkrechte (von oben nach unten) Linien, die wir Y nennen. Die X-Linien haben ganz links einen niedrigen Wert (sie fangen bei 0 an). Je weiter die Linie nach rechts wandert, desto h\u00f6her wird ihr Wert. Genauso ist es mit den Y-Linien. Sie haben ganz oben einen niedrigen Wert. Je weiter sie nach unten wandern, desto h\u00f6her wird ihre Zahl. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"500\" src=\"https:\/\/sora.fshcloud.de\/wp-content\/uploads\/2024\/07\/x.png\" alt=\"\" class=\"wp-image-277\"\/><\/figure>\n\n\n\n<p>Wenn wir Pico 8 nun befehlen, dass es unsere Spielfigur auf H\u00f6he der Y-Linie 64 und auf  H\u00f6he der X-Linie 64 zeichnen sollen, dann zeichnet er die Figur dort, wo sich Y auf H\u00f6he 64 und X auf H\u00f6he 64 treffen. <\/p>\n\n\n\n<p>Soweit klar? Keine Sorge, wenn du noch nicht sofort verstanden hast, was es mit diesen X und Y Linien auf sich hat. Wir werden in Zukunft immer wieder auf das Thema zur\u00fcckkommen und du wirst genug Zeit haben, es zu \u00fcben. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 5: Spielfigur auf das Spielfeld bringen.<\/h2>\n\n\n\n<p>Wir haben jetzt unseren ersten Code geschrieben, unsere Spielfigur erscheint aber noch nicht auf dem Spielfeld. Um das zu erreichen, \u00f6ffnen wir zun\u00e4chst einen neuen Tab. Dir ist vielleicht schon die Zahl 0 am oberen linken Bildschirmrand aufgefallen. In diesem &#8222;Tab&#8220; haben wir unsere _init() Funktion geschrieben. Um unsere Spielfigur aufs Feld zu bringen, brauchen wir die _draw() Funktion. Diese schreiben wir in Tab 1. <\/p>\n\n\n\n<p>Dr\u00fccke das &#8222;+&#8220; Zeichen neben der Null. <\/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-17-um-15.32.04.png\" alt=\"\" class=\"wp-image-278\"\/><\/figure>\n\n\n\n<p>Daraufhin erscheint ein neuer Tab.<\/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-17-um-15.32.45.png\" alt=\"\" class=\"wp-image-279\"\/><\/figure>\n\n\n\n<p>In diesem Tab kopierst du nun mit Hilfe von command und c 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-97dc648b3e2d5cdc6f1cd67d323a42d4\"><code>function _draw() \ncls()\nspr(spieler.sprite,spieler.x,spieler.y)\nend<\/code><\/pre>\n\n\n\n<p>Dr\u00fccke nun die Taste command und r, um dein Spiel zu starten. <\/p>\n\n\n\n<p>Du siehst nun einen schwarzen Bildschirm und in der Mitte deine Spielfigur. <\/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-17-um-13.34.50.png\" alt=\"\" class=\"wp-image-266\"\/><\/figure>\n\n\n\n<p>Wenn du dein Wissen festigen m\u00f6chtest, versuche, deine Spielfigur auf eine andere Position zu bringen, in dem du die y und x Werte des Spielerobjekts ver\u00e4nderst. Wichtig: Die Werte sollten nicht gr\u00f6\u00dfer als 100 und kleiner als 0 sein. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Was du am Ende des Tutorials k\u00f6nnen solltest: &#8211; Du kannst deine Spielfigur auf das &#8222;Spielfeld&#8220; bringen &#8211; Du verstehst, was eine Funktion ist und was die Funktionen _init(), _update()&hellip;<\/p>\n","protected":false},"author":1,"featured_media":266,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,13],"tags":[],"class_list":["post-265","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\/265","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=265"}],"version-history":[{"count":7,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/265\/revisions"}],"predecessor-version":[{"id":297,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/265\/revisions\/297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/media\/266"}],"wp:attachment":[{"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=265"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=265"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=265"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}