{"id":388,"date":"2022-07-13T17:05:00","date_gmt":"2022-07-13T15:05:00","guid":{"rendered":"https:\/\/sora.fshcloud.de\/?p=388"},"modified":"2024-10-11T13:17:32","modified_gmt":"2024-10-11T11:17:32","slug":"pico-8-tutorial-9-verhindere-dass-deine-spielfigur-durch-gegenstaende-laeuft","status":"publish","type":"post","link":"https:\/\/sora.fshcloud.de\/?p=388","title":{"rendered":"Pico 8 Tutorial 9: Verhindere, dass deine Spielfigur durch Gegenst\u00e4nde l\u00e4uft"},"content":{"rendered":"\n

Einf\u00fchrung <\/h2>\n\n\n\n

Du hast nun eine fertige Map und eine Kamera, die deiner Spielfigur folgt. In diesem Tutorial lernst du, wie du verhinderst, dass deine Spielfigur einfach durch Gegenst\u00e4nde l\u00e4uft (als w\u00e4re es ein Gespenst…).<\/p>\n\n\n\n

Videotutorial <\/h2>\n\n\n\n

Wie gewohnt schaue dir gerne das folgende Video an: <\/p>\n\n\n\n

Schritt 1: Markiere die Kacheln, durch die die Spielfigur nicht „hindurchgehen“ darf<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Wir m\u00fcssen Pico 8 irgendwie mitteilen, durch welche Objekte bzw. Gegenst\u00e4nde die Spielfigur laufen darf und durch welche nicht. Gehe in den SPRITE-Editor und klicke auf einen Sprite (bzw. eine Kachel), durch die man NICHT durchlaufen soll. <\/p>\n\n\n\n

Rechts neben dem Bild der Kachel siehst du insgesamt 8 nebeneinanderliegende Kreise (siehe Mauszeiger auf dem Bild oben). Diese Kreise sind sogenannte „FLAGS“. Wenn du jetzt den Kreis ganz links anklickst, hast du die FLAG 0 f\u00fcr die ausgew\u00e4hlte Kachel gesetzt.<\/p>\n\n\n\n

Setze nun f\u00fcr alle Kacheln, durch die dein Spieler NICHT einfach so durchlaufen soll, die FLAG auf 0. <\/p>\n\n\n\n

Schritt 2: \u00dcberpr\u00fcfe, wann eine Kachel mit gesetztem FLAG vom Spieler ber\u00fchrt wird <\/h2>\n\n\n\n

Die FLAG einer Kachel zu setzen, reicht leider nicht aus. Die Figur gleitet immer noch durch ausgew\u00e4hlten Kacheln. Wir m\u00fcssen Pico 8 genau sagen, was er tun soll, wenn der Spieler die gesetzte Kachel ber\u00fchrt. Hierf\u00fcr brauchen wir zwei insgesamt zwei Funktionen. Wie im letzten Tutorial mache ich es dir ein bisschen einfach(er). Du kannst dir die von mir erstellte Funktion in deinen Code kopieren, solltest aber ungef\u00e4hr verstehen, was genau der Code macht. <\/p>\n\n\n\n

Schauen wir uns zun\u00e4chst die Funktion check_map_<\/em>flag an:<\/p>\n\n\n\n

Funktion 1: check_map_flag<\/h4>\n\n\n\n
function check_map_kollision      <--Name der Funktion\n(x, y, w, h, flag)                                     <-- Hier werden  f\u00fcnf Werte f\u00fcr die Funktion \u00fcbergeben. \n\nlocal function tile_flag_at             <-- In dieser Funktion gibt es eine zweite Funktion\n(px, py)                                                   <-- Diese Funktion \u00fcberpr\u00fcft, ob f\u00fcr die Kachel, an die der Spieler st\u00f6\u00dft,\n                                                                   ein Flag gesetzt wurde\nlocal tile_x = flr(px \/ 8)\nlocal tile_y = flr(py \/ 8)\nreturn fget(mget(tile_x, tile_y), flag)\n\nend                                                           <-- Hier endet die zweite Funktion \n    \nreturn tile_flag_at(x, y) or            <-- Hier wird nun \u00fcberpr\u00fcft, ob der Spieler die gesetzte Kachel oben links...\ntile_flag_at(x + w - 1, y) or             <-- ... oder oben rechts...\ntile_flag_at(x, y + h - 1) or              <-- ... oder unten links...\ntile_flag_at(x + w - 1, y + h - 1)     <-- ... oder unten rechts... ber\u00fchrt\n                                                                   <-- Wenn der Spieler einer der Ecken der Kachel ber\u00fchrt, gibt die Funktion  \n                                                                   den Wert TRUE zur\u00fcck\nend                                                          <-- Zum Schluss wird die Funktion beendet<\/code><\/pre>\n\n\n\n
Was macht diese Funktion?<\/strong> <\/h4>\n\n\n\n
Diese Funktion \u00fcberpr\u00fcft, ob der Spieler eine Kachel ber\u00fchrt, f\u00fcr die ein FLAG gesetzt wurde. <\/p>\n\n\n\n
Schritt 3: Die Kollisionsfunktion <\/h2>\n\n\n\n
Die zweite Funktion ist nun unsere eigentliche Kollisionsfunktion: <\/p>\n\n\n\n
function kollision(obj,flag,dirx,diry) <-- Name der Funktion. Die Funktion erh\u00e4lt bei Auruf 4 Werte. Der erste \n                                                                                   Wert ist ein Objekt\n\nif check_map_flag(obj.x,                    <-- Hier \u00fcberpr\u00fcfen wir, ob unsere erste Funktion (check_map_flag) ein  \nobj.y,obj.w,obj.h,flag)                          TRUE (Kachel ber\u00fchrt) oder FALSE (Kachel nicht ber\u00fchrt) ausgibt. An \n                                                                        unsere check_map_flag-Funktion m\u00fcssen wir wieder f\u00fcnf Werte \n                                                                         \u00fcbermitteln \nthen          \n\nspieler.speed = 0                                    <-- Wenn check_map_flag TRUE ausgibt, wird die Geschwindigkeit des \n                                                                       Spielers auf 0 gesetzt (damit er nicht weiterlaufen kann)\n\nspieler.x += dirx                                      <-- Diese beiden Zeilen sto\u00dfen den Spieler bei Kollision kurz zur\u00fcck, damit \nspieler.y += diry                                      er nicht an dem Objekt kleben bleibt\n\n\nelse\n\nspieler.speed = 1.5                              <-- Sobald der Spieler vom kollidierten Objekt zur\u00fcckgesto\u00dfen wurde, soll \n                                                                    er sich wieder normal bewegen k\u00f6nnen. Deshalb m\u00fcssen wir spieler.speed \n                                                                    wieder auf 1.5 setzen\n\nend                                                           <-- Hier endet der If-Befehl\n\nend                                                           <-- Hier endet unsere Funktion <\/code><\/pre>\n\n\n\n
Schritt 4: F\u00fcge die beiden Funktionen in deinen Code ein<\/h2>\n\n\n\n
Kopiere dir die beiden Funktion (cmd und c) und f\u00fcge sie in TAB 6 ein (cmd und v) <\/p>\n\n\n\n
function kollision(obj,flag,dirx,diry)\n\nif check_map_flag(obj.x,\nobj.y,obj.w,obj.h,flag)\nthen\n\nspieler.speed = 0\n\nspieler.x += dirx\nspieler.y += diry\n\n\nelse\n\nspieler.speed = 1.5\n\nend\n\nend\n\n\nfunction check_map_flag\n(x, y, w, h, flag)\n\nlocal function tile_flag_at\n(px, py)\n\nlocal tile_x = flr(px \/ 8)\nlocal tile_y = flr(py \/ 8)\nreturn fget(mget(tile_x, tile_y), flag)\n\nend\n    \nreturn tile_flag_at(x, y) or -- obere linke ecke\ntile_flag_at(x + w - 1, y) or -- obere rechte ecke\ntile_flag_at(x, y + h - 1) or -- untere linke ecke\ntile_flag_at(x + w - 1, y + h - 1) -- untere rechte ecke\n\nend<\/code><\/pre>\n\n\n\n
Schritt 5: F\u00fcge deinem Spieler-Objekt zwei weitere Eigenschaften hinzu<\/h2>\n\n\n\n
Damit unsere Funktionen \u00fcberpr\u00fcfen k\u00f6nnen, ob ein Spieler mit einer markierten Kachel kollidiert, brauchen sie zwei weitere „Eigenschaften“ unseres Spielerobjekts: H\u00f6he der Spielerfigur in Pixel und Breite der Spielfigur in Pixel.<\/p>\n\n\n\n
Gehe auf TAB 0 und f\u00fcge deinem Spielerobjekt die folgende Eigenschaften hinzu:<\/p>\n\n\n\n
h=8,\nw=8<\/code><\/pre>\n\n\n\n
Dein Spielerobjekt sollte nun wie folgt aussehen: <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Schritt 6: Rufe unsere Kollisionsfunktion in der Update-Funktion auf<\/h2>\n\n\n\n
Zu guter Letzt m\u00fcssen wir unsere Kollisionsfunktion an den richtigen Stellen aufrufen und ihm die korrekten Werte f\u00fcr den jeweiligen Fall \u00fcbermitteln. <\/p>\n\n\n\n
Gehe in TAB 2 <\/p>\n\n\n\n
F\u00fcge nun innerhalb des ersten IF-Befehls (if btn(0) then), direkt unter dem Funktionsaufruf _animation(false) die folgende Zeile ein: <\/p>\n\n\n\n
kollision(spieler,0,1.5,0)<\/code><\/pre>\n\n\n\n
Dein Code sollte nun wie folgt aussehen: <\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Wir \u00fcbermitteln unserer Funktion mit Namen „Kollision“ 4 Werte:<\/p>\n\n\n\n
    \n
  1. Wert: Spieler (unser Spieler-Objekt aus TAB0)<\/li>\n\n\n\n
  2. 0: Der Wert der FLAG, die unsere Kollisionsfunktion \u00fcberpr\u00fcfen soll (In unserem Fall ist es 0)<\/li>\n\n\n\n
  3. 1.5: Der X – Wert, um den die Spielfigur zur\u00fcckgesto\u00dfen werden soll, wenn es eine markierte Kachel links ber\u00fchrt. Verhindert, dass die Spielfigur an einem Objekt kleben bleibt <\/li>\n\n\n\n
  4. 0: Der Y-Wert, um den die Spielfigur zur\u00fcckgesto\u00dfen werden soll, wenn es eine markierte Kachel oben oder unten ber\u00fchrt. Da sich unsere Figur in diesem IF-BLOCK nach links bewegt, soll sie nicht nach oben oder unten zur\u00fcckgesto\u00dfen werden (sondern nach rechts). Deshalb \u00fcbermitteln wir hier den Wert 0. <\/li>\n<\/ol>\n\n\n\n
    F\u00fcge nun f\u00fcr die folgenden If-Bl\u00f6cke die folgenden Codezeilen ein: <\/p>\n\n\n\n
    If Block:<\/td>Codezeile:<\/td><\/tr>
    if btn(1) then<\/td>kollision(spieler,0,-1.5,0)<\/td><\/tr>
    if btn(2) then<\/td>kollision(spieler,0,0,1.5)<\/td><\/tr>
    if btn(3) then<\/td>kollision(spieler,0,0,-1.5)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
    Deine gesamte UPDATE-Funktion in TAB2 sollte nun wie folgt aussehen: <\/p>\n\n\n\n
    function _update()\n\n\nif btn(0) then \n\nspieler.x -= spieler.speed\n\n_animation(false)\n\nkollision(spieler,0,1.5,0)\n\nend\n\nif btn(1) then\n\nspieler.x += spieler.speed\n\n_animation(true)\n\nkollision(spieler,0,-1.5,0)\n\nend \n\nif btn(2) then\n\nspieler.y -= spieler.speed\n\n\n_animation2()\n\nkollision(spieler,0,0,1.5)\n\n\nend\n\nif btn(3) then\n\nspieler.y += spieler.speed\n\n_animation3()\n\nkollision(spieler,0,0,-1.5)\n\n\nend\n\n einfachekam()\n\nend<\/code><\/pre>\n\n\n\n
    Starte das Spiel. Unsere Spielfigur l\u00e4uft nun nicht mehr durch die markierten Gegenst\u00e4nde \ud83d\ude42 <\/p>\n","protected":false},"excerpt":{"rendered":"
    Einf\u00fchrung Du hast nun eine fertige Map und eine Kamera, die deiner Spielfigur folgt. In diesem Tutorial lernst du, wie du verhinderst, dass deine Spielfigur einfach durch Gegenst\u00e4nde l\u00e4uft (als…<\/p>\n","protected":false},"author":1,"featured_media":389,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,13],"tags":[],"class_list":["post-388","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\/388","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=388"}],"version-history":[{"count":3,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/388\/revisions"}],"predecessor-version":[{"id":395,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/posts\/388\/revisions\/395"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=\/wp\/v2\/media\/389"}],"wp:attachment":[{"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sora.fshcloud.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}