ballon-jagd.md

Ballon Jagd

Link zur Website:
https://arcade.makecode.com/

Ziel

Das Ziel ist es ein Spiel zu erstellen, in welchem du mit einem Flugzeug Luftballons jagst und diese zum Zerplatzen bringst.

Kurze Übersicht der Schritte

• Hintergrund festlegen
• Flugzeug erstellen
• Flugzeug steuerbar machen
• Flugzeug im Bild behalten
• Flugzeug in Flugrichtung rotieren
• Ballons erstellen
• Auf Kollision mit Ballon reagieren
• Neuen Ballon erzeugen
• Punktestand hinzufügen

Generelle Hinweise

Das Spiel hat ein Koordinaten System.
Dieses hat (0, 0) oben links in der Ecke und ist 160 Einheiten in x Richtung breit und 120 Einheiten in y tief.
Zudem werden Geschwindigkeiten mit vx und vy für Geschwindigkeit in x und y Richtung bezeichnet.
Negative Geschwindigkeiten bedeuten, dass wir uns in die andere Richtung bewegen.

Bei beweglichen Objekten und statischen Objekten, mit denen wir interagieren können, reden wir von Sprites.
Im Grunde ist das ein englisches Wort für Grafik.

Sollte das Spiel irgendwann nicht so funktionieren wie du es erwartest, obwohl du etwas verändert hast, kann es sich lohnen die Website einmal neu zu laden.

Los gehts!

Eine Landschaft

Als erstes wollen wir das Setting für das Spiel setzen.

• Wähle hierfür den Block Szene/setze Hintergrundbild auf (...)
• Platziere ihn ganz oben im beim Start-Block.
  • Um eine Grafik zu wählen, kannst du auf das weiße Oval im platzierten Block klicken. Du kannst sie jederzeit ändern.
  • Wähle dann einen der vorgefertigten Hintergründe aus dem Reiter Galerie aus
  • Klicke unten rechts auf den Knopf Fertig

Das Flugzeug I - Erstellung

Als nächstes wollen wir uns darum kümmern, dass wir ein steuerbares Flugzeug bekommen.
Dafür brauchen wir eine neue Sprite.

• Geh in den Reiter Sprites und wähle den Block setze mySprite auf (...)
• Ziehe ihn un die beim Start Routine unterhalb des Setzen des Hintergrundes
• Klicke auf das Feld zum Auswählen einer Grafik und wähle das rote Flugzeug
• Alle anderen Einstellungen des Blocks können wir so lassen

Wenn wir das Spiel jetzt starten, sollte das Flugzeug vor dem von dir gewählten Hintergrund zu sehen sein.

Steuerung

Als nächstes wollen wir das Flugzeug steuerbar machen.
Hierzu brauchen wir einen Controller-Block.

• Finde den Controller Block bewege mySprite mit Knöpfen
• Ziehe ihn unter die Erstellung des des Flugzeuges
  • Damit ist das Flugzeug nun steuerbar.
  • Klicke auf das +, um die Geschwindigkeitseinstellungen zu öffnen
  • Experimentier etwas mit den Werten, bis sich die Steuerung des Flugzeugs gut anfühlt
    • Wenn das Flugzeug aus dem Rahmen fliegt und du es nicht wieder findest, kannst du das Programm mit den Pfeilen die "im Kreis zeigen" (neben dem "Menu"-Knopf) neustarten.

Hier geblieben!

Bei deinen Tests ist dir vielleicht schon aufgefallen, dass dass das Flugzeug aus dem Screen fliegen kann und es dann schwer wird das Flugzeug zurück in den Screen zu navigieren.
Also wollen wir dafür sorgen, dass das Flugzeug nicht aus dem Screen fliegen kann.

• Finde im Reiter Sprites ein Block, mit dem du das Flugzeug im Screen halten kannst
• Baue den Block in dein Programm ein

Flugzeug II

Beim Steuern des Flugzeugs ist dir sicherlich aufgefallen, dass das Flugzeug immer in die selbe Richtung ausgerichtet ist, egal in welche Richtung es gesteuert wird. Das wollen wir im folgenden ändern.

Das Ziel ist es die visuelle Flugrichtung des Flugzeugs an die Bewegungsrichtung anzupassen.

Auf Events reagieren

Bislang haben wir uns nur in dem Beim Start Block bewegt, welcher immer einmalig am Anfang des Programms ausgeführt wird.

Nun wollen wir einen neuen Block beginnen, der ausgeführt wird, wenn ein bestimmtes Event eintritt.
Ein solches Event kann u.A. sein, dass wir etwas tun wollen, wenn ein Knopf gedrückt wird.

Auf Knopfdruck reagieren

• Finde im Reiter Controller ein Element, das einen neuen Block startet, der dann ausgeführt werden soll, wenn ein Knopf gedrückt wird
  • Ziehe den Block an eine beliebige Stelle auf dem Feld
  • Stelle ein, dass der Block reagieren soll, wenn rechts gedrückt wird
• Nun soll das Bild des Flugzeugs in die entsprechende Richtung geändert werden
• Hierzu brauchen wir den Block setze mySprite Bild auf (...) aus dem Reiter Sprites
  • Füge ihn in den neuen Block ein

Das neue Flugzeugbild

In der Galerie befinden sich nur Flugzeuge, welche nach links ausgerichtet sind.
Wir müssen uns während der Bildauswahl also noch darum kümmern das Bild zu spiegeln.

• Klicke auf das Feld, um ein Bild auszuwählen
  • Wähle aus der Galerie das Flugzeugbild aus, welches du auch beim Start verwendet hast
  • Nach der Auswahl des Bildes wird das Bild im Editor geöffnet
  • Hier kannst du das Bild spiegeln
    • Die Option findest du in der horizontalen Leiste oberhalb des Bildes
      • Hinweis: Um den Namen eines Werkzeugs zu sehen, kannst du mit der Maus einfach einen Moment über dem Werkzeug stehen bleiben
  • Klicke anschließend auf Fertig

Testflug

Teste die neue Funktionalität.
Wie dir auffällt kann sich das Flugzeug nun einmal nach rechts drehen, aber dreht sich danach nicht mehr zurück nach links.

Um das Problem zu beheben, brauchen wir noch einen entsprechenden Block, welcher das Flugzeug zurück rotiert, wenn links gedrückt wird.

• Erstelle diesen neuen Block analog zu dem gerade erstellten Block

Ballons

Nun haben wir ein Flugzeug, welches sinnvoll steuerbar ist.
Als nächstes können wir uns den Ballons widmen.
Das erste Ziel ist es beim Start des Programms einen Ballon auf dem Screen zu platzieren.

• Ziehe einen neuen Block zum Erstellen eines Sprites unten in den Startblock
  • Tipp: Schau nach wie du das Flugzeug am Anfang erstellst
• Wähle eine Grafik für den Luftballon
  • Die Galerie bietet keinen guten Luftballon, daher hast du zwei Optionen:
    • Pixel dir im Editor einen eigenen Luftballon
    • Suche dir ein nicht-lebendiges Objekt aus der Galerie aus, welches erstmal als Platzhalter fungieren soll (du kannst Grafiken später immer noch ändern)

Als Typ ist dieses Sprite kein Player.
Da wir die Luftballons effektiv einsammeln wollen, sind sie so eine Art Essen, wie man es in Klassikern wie Snake oder Pac-Man vorfindet.
An sich ist das einfach nur eine vorgefertigte Kategorie und hat inhaltich keine tiefere Bedeutung für das Programm.

• Setze den Typ des Sprites daher auf Food (engl. für Essen)
• Nun wollen wir den Ballon irgendwo auf dem Screen platzieren
  • Gehe hierbei analog zum Platzieren des Flugzeugs vor.
    • Wähle dabei beliebige andere x und y Koordinaten (ungleich denen des Flugzeugs)

Kollisionserkennung zwischen Flugzeug und Ballons

Nun wollen wir uns darum kümmern, dass erkannt wird, wenn das Flugzeug den Ballon getroffen hat.
Das ist der Fall, wenn sich das Bild des Flugzeugs und des Ballons überlappen. In dem Fall wollen wir dann etwas tun.
Das Überlappen ist ein Event, ähnlich zum Drücken eines Knopfes.

Wenn der Ballon getroffen wird, soll dieser an eine andere Stelle auf dem Screen gesetzt werden.

• Finde einen Block, der das gewünschte Verhalten ermöglicht
  • Stell sicher, dass die Art der Blocke, die überlappen sollen auf Player und Food gesetzt sind
  • Warum da sprite und otherSprite steht können wir für jetzt ignorieren
• Innerhalb dieses Blocks wollen wir dann die Position des Ballons verändern
  • Setze einen Block zum Verändern des Ballon Position in den neuen Block ein
  • Setze dabei x und y auf andere beliebige Werte ungleich der Werte, die du als erste Ballon position gewählt hast

Testflug

Teste das Spiel. Wenn du das Spiel startest sollte nun ein Ballon erscheinen und wenn du in ihn rein fliegst, sollte er an einer anderen Stelle erscheinen.
Was passiert danach?
Bewegt sich der Ballon nach der ersten Kollision noch an andere Stellen?

Zufall

Wie dir aufgefallen ist bewegt sich der Ballon nur einemal an eine andere Stelle.
Theoretisch bewegt er sich danach bei jeder Kollision auch noch, nur halt jedes Mal wieder an die exakt selbe Stelle, sodass er für uns statisch aussieht.
Das ist für das Spiel natürlich ziemlich witzlos.

Wir könnten jetzt von Hand eine dritte und vierte und fünfte Position eingeben. Aber dann hätten wir immer nur eine fest begrenzte Anzahl an Positionen, die auch noch immer in der selben Reihenfolge auftreten.
Das ist nicht wünschenswert.
Stattdessen wollen wir dafür sorgen, dass der Computer für uns die Positionierung übernimmt und dabei jedes Mal eine neue zufällige Position, also ein zufälliges x und y wählt.

• Im Bereich Mathematik findest du einen Block mit dem du eine zufällige Zahl wählen lassen kannst
• Diesen Block kannst du in den Block zum Verändern der Position in das x oder y Feld einsetzen
  • Setze den Block sowohl für x als auch y ein
  • Erinnerung: Der Screen ist 160 Einheiten in x Richtung breit und 120 Einheiten in y tief
  • Wähle die die Werte so, dass der Ballon innerhlab unseres Screen erscheinen wird
    • Hinweis: Es ist sinnvoll bisschen Puffer am Rand zu lassen, sodass der Ballon nicht ganz am Rand des Screens erscheinen kann. Experimeitiere hierzu gerne etwas mit den Werten rum.
• Teste ob sich der Ballon nun wie erwartet verhält
  • Erinnerung: Er sollte an einer zufälligen Stelle erscheinen, sobald das Flugzeug ihn berühert hat

Kleine Animation

Bevor wir den Ballon bewegen wollen wir ihn noch kurz eine sehr einfache Animation anzeigen, in der der Ballon zerplatz.
Diese "Animation" besteht aus einem einzigen Bild, welches den zerplatzten Ballon für einen kurzen Moment anzeigt, bevor er an einer anderen Stelle als "neuer" Ballon erscheint.
Aus Gründen der Einfachehit nutzen wir die selbe Sprite für das Anzeigen des Platzens und erstellen keine neue Sprite, welche wir dann separat verwalten müssen.

Hierzu wollen wir den Block der Kollisionserkennung erweitern.

• Sobald eine Kollision erkannt ist soll das das Bild des Ballon Sprites auf ein Bild des geplatzen Ballons ersetzt werden
  • Such dir hierzu eine Sprite aus der Galerie aus.
  • Achte dabei darauf, dass du dich an unsere Richtlinien zum Thema Gewalt hälst

Wenn du das Spiel nun ausführst, merkst du, dass die Ballon Sprite nun dauerhaft die Explosion ist.
Das ist natürlich noch nicht das gewünschte Verhalten.
Nach der Explosion wollen wir den Sprite wieder auf den Balloon zurück ändern.

• Ändere den Ballon anschließend unterhab der Explosion auf den Ballon zurück

Wenn du das Spiel nun ausführst, stelltst du fest, dass die Explosion nur sehr kurz, fast unmerkbar kurz, angezeigt wird.
Daher wollen wir kurz einen Moment warten, bis wir das Bild der Sprite wieder auf den Ballon zurück ändern.

• Im Reiter Schleifen findest du hierzu einen Block mit dem du kurz warten kannst
  • Ziehe ihn an die richtige Stelle
  • Stell die Wartezeit so ein, dass es sich im Spiel gut anfühlt

Wenn du das Spiel nun ausführst, solltest du immer weiter Ballons jagen können, welche eine kurze Explosion darstellen, bevor der Ballon an einer neuen Stelle erscheint.

Zählen

Aktuell läuft das Spiel ja unendlich lang.
Dabei ist ja auf jeden Fall spannend zu zählen wie viele Ballons schon geplatzt wurden.
Die geplatzten Ballons können als Punktzahl aufgefasst werden.

• Unter Info findest du dazu einen passenden Block
• Setze den Block an der passenden Stelle ein, an der du den Punktestand erhöhen willst
• Teste das Spiel
  • Fühlt sich das Zählen der Punkte "schnell" an, oder gibt es da vielleicht eine kurze Verzögerung?
  • Falls es eine Verzögerung gibt, woran könnte das liegen?
    • Experimentier ein wenig mit der Position des Blocks und schau ob sich das Verhalten verbessert

Weitere Ideen:

• Wähle Erscheinungsort des ersten Ballons auch zufällig
• Zeichne eine Landebahn auf dem Hintergrund ein und lass das Flugzeug beim Start auf ihr erscheinen
• Win Screen bei einer beliebigen, aber festen Zahl zerstörter Ballons
• Zeitbasierte Punkte: Der Ballon gibt weniger Punkte je länger du brauchst, um ihnzu zerstören