{"id":352,"date":"2023-05-25T18:41:00","date_gmt":"2023-05-25T16:41:00","guid":{"rendered":"https:\/\/sora.fshcloud.de\/?p=352"},"modified":"2025-02-14T14:45:15","modified_gmt":"2025-02-14T13:45:15","slug":"pico-8-tutorial-7-zeichne-deine-map","status":"publish","type":"post","link":"https:\/\/sora.fshcloud.de\/?p=352","title":{"rendered":"Pico 8 Tutorial 7: Zeichne deine Map"},"content":{"rendered":"\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Was du am Ende des Tutorials k\u00f6nnen solltest: <br>&#8211; Du verstehst, was &#8222;Tiles&#8220; sind und wie die &#8222;Map&#8220; in Pico 8 funktioniert<br>&#8211; Du kannst deine eigene Map zeichnen<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Einf\u00fchrung:<\/h2>\n\n\n\n<p>Unsere Spielfigur l\u00e4uft nun \u00fcber unseren Bildschirm. ABER sie l\u00e4uft bisher nur auf einer schwarzen Fl\u00e4che. Und wenn sie zu weit in eine Richtung l\u00e4uft, verschwindet sie einfach. Wir werden deshalb heute eine sogenannte MAP zeichnen, damit sich unsere Figur in einer wirklichen Spielwelt bewegt.<\/p>\n\n\n\n<p>Was eine Map genau ist und wie sie in Pico 8 funktioniert, erf\u00e4hrst du in den folgenden Schritten. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Videotutorial<\/h2>\n\n\n\n<p>Wie gehabt kannst du dir gerne wieder das folgende Videotutorial anschauen, in welchem ich dir Schritt f\u00fcr Schritt zeige, wie du deine eigene MAP zeichnest.<\/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\/2023\/05\/Map_zeichnen.mp4\"><\/video><\/figure>\n\n\n\n<p>Kleine Korrektur: Bei Minute 9 spreche ich davon, dass der Bildausschnitt vom Haus 13 Pixel waagerecht und 13 Pixel senkrecht gro\u00df ist. Das ist falsch, der Ausschnitt ist 32*32 Pixel gro\u00df. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 1: Was ist eine MAP und wie funktioniert sie?<\/h2>\n\n\n\n<p>Eine MAP (Karte) in Pico-8 ist wie eine gro\u00dfe Zeichnung, die zeigt, wie die Welt in deinem Spiel aussieht. Stell dir vor, du zeichnest eine Stadt mit H\u00e4usern, B\u00e4umen und Stra\u00dfen auf ein gro\u00dfes St\u00fcck Papier. Die Map in Pico-8 funktioniert genauso, aber sie ist in kleine Quadrate (sogenannte \u201eTiles\u201c) unterteilt.Tiles ist Englisch und hei\u00dft so viel wie &#8222;Kachel&#8220;<\/p>\n\n\n\n<p>Tiles bestehen aus jeweils 8 Pixeln waagerecht und 8 Pixeln senkrecht (insgesamt 64 Pixel). Die kleinen Fenster, in denen du im Sprite-Editor z.B. deine Spielfigur gezeichnet hast, entspricht einem TILE auf der MAP. Schaue dir das folgende Bild einmal genau an: <\/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-26-um-19.41.03-2.png\" alt=\"\" class=\"wp-image-356\"\/><\/figure>\n\n\n\n<p>Die MAP in Pico 8 besteht aus insgesamt 127 Kacheln waagerecht und 127 Kacheln senkrecht. Insgesamt kannst du auf deiner Karte also 16.129 Kacheln zeichnen! <\/p>\n\n\n\n<p>Wie du siehst habe ich schon einmal angefangen, meine Karte zu zeichnen. Wie bin ich dabei vorgegangen? <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Schritt 2: Zeichne deine Karte <\/h2>\n\n\n\n<p>Starte wie gewohnt Pico 8 und gehe zun\u00e4chst auf den SPRITE-Editor. Klicke anschlie\u00dfend auf die NUMMER 01 im Sprite-Editor. Wie beim Programmieren gibt es auch im Sprite-Editor noch einmal TABS, die uns helfen, unsere gezeichneten Sprites zu organisieren. Auf dem Bild siehst du noch einmal, wo du die TABS findest: <\/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-26-um-20.05.24.png\" alt=\"\" class=\"wp-image-357\"\/><\/figure>\n\n\n\n<p>Zeichne nun zuerst einfach Erdbl\u00f6cke, die 8x 8 Pixel gro\u00df sind. Ich habe vier verschiedene Erdbl\u00f6cke untereinander gezeichnet. Links daneben habe ich kleinere B\u00e4ume erstellt, die auch 8&#215;8 Pixel gro\u00df sind. Links daneben gr\u00f6\u00dfere B\u00e4ume (16 x 16) und ganz rechts dann ein gro\u00dfes Haus, welches 32x 32 Pixel gro\u00df ist. Rechts neben meinen Erdbl\u00f6cken habe ich noch eine Stra\u00dfe gezeichnet. <\/p>\n\n\n\n<p>Ich empfehle euch, \u00e4hnlich vorzugehen: Zeichnet 8&#215;8 gro\u00dfe Erdbl\u00f6cke, die ihr dann sp\u00e4ter auf eurer MAP platzieren k\u00f6nnt. Daneben k\u00f6nnt ihr auch gr\u00f6\u00dfere Gegenst\u00e4nde zeichnen (z.B. ein Haus).<\/p>\n\n\n\n<p>Wechselt nach dem Zeichnen in den MAP-Editor (Das Symbol rechts neben dem Sprite-Editor. <\/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-26-um-20.11.51.png\" alt=\"\" class=\"wp-image-358\"\/><\/figure>\n\n\n\n<p>Der MAP-Editor ist zweigeteilt. Die obere H\u00e4lfte (dort, wo sich meine Maus befindet) ist unsere MAP. In den unteren H\u00e4lfte seht ihr die gezeichneten Sprites aus unserem SPRITE-Editor. <\/p>\n\n\n\n<p>Wenn ihr in den unteren H\u00e4lfte nun einen Sprite ausw\u00e4hlt, anschlie\u00dfend in der mittleren Leiste links auf den Stift klickt und zuletzt auf einen Punkt der (noch) schwarzen MAP klickt, k\u00f6nnt ihr eine Kachel auf eure Karte zeichnen, wie ihr auf dem folgenden Bild sehen k\u00f6nnt:  <\/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-26-um-20.13.40.png\" alt=\"\" class=\"wp-image-359\"\/><\/figure>\n\n\n\n<p>Durch das Ausw\u00e4hlen eurer jeweiligen Sprites und das Setzen auf der Karte zeichnet ihr eure MAP. <\/p>\n\n\n\n<p>Um mehrere Sprites auf einmal auf die Karte zu setzen (wie z.B. das Haus), k\u00f6nnt ihr folgendes tun. Dr\u00fcckt auf einen Sprite, haltet die Pfeiltaste nach oben gedr\u00fcckt und zieht gleichzeitig das wei\u00dfe K\u00e4stchen gr\u00f6\u00dfer (schaut euch unbedingt das Videotutorial an, falls euch noch nicht klar ist, wie ihr es macht). Ihr k\u00f6nnt nun mehrere Sprites auf einmal ausw\u00e4hlen und so z.B. ein ganzes Haus auf einmal setzen. <\/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-26-um-20.19.22.png\" alt=\"\" class=\"wp-image-360\"\/><\/figure>\n\n\n\n<p>Um  die anderen Teile eurer Karte auch noch zeichnen zu k\u00f6nnen, dr\u00fcckt ihr auf die Hand in der mittleren Leiste, dr\u00fcckt mit dem Zeigefinger auf das Touchpad eures Macbooks und bewegt euch dann mit dem Mittel- oder Ringfinger \u00fcber die Karte. <\/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-26-um-20.20.29.png\" alt=\"\" class=\"wp-image-361\"\/><\/figure>\n\n\n\n<p>Viel Spa\u00df beim Selberzeichnen! Im n\u00e4chsten Tutorial lernen wir, wie wir die Karte auf unser Spielfeld zeichnen und wir eine Kamera einbauen, die unserer Spielfigur \u00fcbers Feld folgt!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Was du am Ende des Tutorials k\u00f6nnen solltest: &#8211; Du verstehst, was &#8222;Tiles&#8220; sind und wie die &#8222;Map&#8220; in Pico 8 funktioniert&#8211; Du kannst deine eigene Map zeichnen Einf\u00fchrung: Unsere&hellip;<\/p>\n","protected":false},"author":1,"featured_media":353,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,13],"tags":[],"class_list":["post-352","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\/352","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=352"}],"version-history":[{"count":3,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/352\/revisions"}],"predecessor-version":[{"id":367,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/352\/revisions\/367"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/media\/353"}],"wp:attachment":[{"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}