Das Ziel: Spiel mit Phaser.io programmieren
Der Fahrplan zum Phaser.io-Spiel
| Zeitstunden, je 14 – 16 Uhr | Inhalt |
|---|---|
| 1/2 11.01.2021 | 1. Spiel spielen und analysieren (15 Min.) 2. Grundlagen: Internet, HTML, Developertools (30 Min.) 3. repl.it + HTML (45 Min.) |
| 3/4 18.01.2021 | 4. Phaser.io-Projekt starten (15 Min.) 5. Spielwelt anlegen (20 Min.) 6. Spieler als Sprite laden und hinzufügen (20 Min.) 7. Spieler animieren und bewegen (20 Min.) (8. Sterne hinzufügen (30 Min.) ) |
| 5/6 25.01.2021 | (8. Sterne hinzufügen (30 Min.) ) 9. Sterne aufsammeln und Punkte zählen (20 Min.) 10. Bombe hinzufügen (30 Min.) |
1. Spiel spielen und analysieren
| Schritt | Aktion | Erfolg |
|---|---|---|
| 1. Spiel spielen | phaser-game.coderdojosaar.repl.co/part10.html | selber spielem |
| 2. Spiel erklären | * Browsergame * Hintergrundbild * Aufbau der Spielwelt * Steuerung des Männchens * Physik bei Sternen und Springen * „Was passiert, wenn …“ … Männchen berührt Stern … letzter Stern gefangen | Sammeln in Etherpad: luchs.lpm.uni-sb.de/p/spiel_analyse * Spiel verstehen * Wie wird gespielt * Wann gewonnen Vortrag: * Das Besondere an einer Game-Engine * Das Besondere an Phaser.io |
Was kann man im Spiel beobachten?
- Fragen:
- Wie wird das Spiel gesteuert?
- Auf welche Eingaben reagiert das Spiel?
- Was soll man machen?
- Wie kann man gewinnen?
- Wie kann man verlieren?
- Wie ist die Spielwelt aufgebaut?
- Wie bewegt sich der Spieler?
- Gibt es Animationen? Was ist animiert?
- Steuerung mit den Cursor-/Pfeiltasten
- Spieler wird beim Laufen animiert.
- Spieler springt in einem Bogen, was sehr realistisch wirkt
- Sterne fallen „nach unten“, hüpfen unterschiedlich hoch
- Kollisionen werden erkannt zwischen Spieler, Sternen und Boden
- Sterne verschwinden, wenn der Spieler sie berührt
- Es werden Punkte gezählt.
- Jeder Stern bringt 10 Punkte.
- Immer, wenn man alle Sterne aufgesammelt hat, kommt eine Bombe dazu.
- Die Bomben bleiben nicht liegen und prallen nicht nur von Plattformen und Boden sondern auch vom Rand ab.
Was ist eine Game Engine?
- Bringt einen Game Loop mit. In diesem Loop kann man Ereignisse abfragen, z.B. Tastendrücke oder Kollisionen.
- Verwaltet „Assets“ (Vermögen) des Spiels: Bilder, Töne, Sprites, Texturen, …
- Erkennt Kollisionen zwischen Spielern
- definiert eine Physik: Wo ist unten? Wie schnell fallen Gegenstände?
- erlaubt es Spielwelten zu definieren
Was ist das Besondere an Phaser.io?
- Game Engine für 2D-Spiele in Javascript
- Läuft in jedem Webbrowser
- Der Benutzer muss nichts installieren
- Spiele können in Webseiten integriert werden.
2. Grundlagen: Internet, HTML, Developertools
| Schritt | Aktion | Erfolg |
|---|---|---|
| 1. Webseite aufrufen | * Adresszeile * Bestandteile einer Adresse: Protokoll, Subdomain, Domain, Topleveldomain, … * Angezeigter Inhalt | Verstehen: Das Internet ist ein Computernetzwerk. |
| 2. Developertools aufrufen | * HTML * verschiedene Tabs * verschiedene Tools, z.B. „Select an element“, „Toggle device toolbar“ | * Navigieren durch den HTML-Code * Erster Blick ins HTML * Unterschied zwischen Desktop und mobilem Endgerät |
| 3. w3schools | Wo man nachschauen kann, welche Tags es gibt: www.w3schools.com/html/ (Englisch) oder www.selfhtml.org (Deutsch) | Webseite gefunden |
Das Internet
- Netzwerk von Computern
- Damit die Computer Daten austauschen können, müssen sie eine gemeinsame „Sprache“ haben.
- Für das WWW/Internet ist es HTTP(S) = Hypertext Transfer Protocol (Secure)
- Um Inhalt aus dem Internet zu bekommen, muss man ihn „anfordern“. Das geschieht meist mit einem Webbrowser.
- http(s) steht am Anfang der Adresszeile im Webbrowser
- Computer sind nicht direkt miteinander verbunden. Anfragen werden weitergeleitet. Dafür braucht es ein Adresssystem.
- Die gewünschte Adresse steht in der Adresszeile des Webbrowsers
- Im Webbrowser kann man die Adresse direkt eingeben oder eine Suchmaschine benutzen, z.B. Google.
- Meistens fordert man neuen Inhalt an, indem man in einem Webbrowser auf einen Link klickt.
3. Repl.it kennenlernen
| Schritt | Aktion | Erfolg |
|---|---|---|
| 1. repl.it aufrufen | Seite gefunden | |
| 2. Anmelden | erfolgreich angemeldet | |
| 3. Neues repl „HTML, CSS, JS“erzeugen | * repls gibt es für verschiedene Programmier-sprachen * Oberfläche für „HTML, CSS, JS“-Projekte kennenlernen: Dateien, Editor, Ausgabe, Konsole | neues repl „HTML, CSS, JS“ erzeugt |
| 4. repl teilen | „Share“-Knopf finden | repl geteilt |
| 5. Start-Template anschauen + Text ergänzen | * HTML-Tags lesen * Text ergänzen * „Run“ drücken * Wer mehr wissen will: w3schools | eigener Text sichtbar |
| 6. Webseite über eigene Subdomain erreichbar | * „Open in a new tab“ * Eigene Seite mit den Developertools untersuchen | * neuen Tab geöffnet und gefunden * Developertools geöffnet und ausprobiert |
4. Phaser.io-Projekt starten
| Schritt | Aktion | Erfolg |
|---|---|---|
| 1. Ziel (Folie 3) | Noch einmal das Spiel zeigen/spielen lassen * Phaser einbinden * Spiel + Physik definieren * Spielwelt anlegen Männchen + Sterne hinzufügen * Bewegung + Animationen programmieren * Punkte für eingesammelte * Sterne vergeben + anzeigen * Tutorial auf Englisch: phaser.io/tutorials/making-your-first-phaser-3-game/part1 | Spiel spielen: phaser-game.coderdojosaar.repl.co/part10.html |
| 2. Start-repl aufrufen | Start-repl finden: repl.it/@CoderDojoSaar/phaser-game-template | Start repl gefunden |
| 3. Start-repl forken | Knopf „Fork“ neben „Run“ drücken. Eigene Kopie erstellen. | * Eigene Kopie des Projekts * Eigener Loginname vor dem Projektnamen sichtbar |
| 4. Eigene Kopie des Start-Templates teilen | Projekt teilen | Projekt mit Dozenten geteilt |
| 5. Start-repl anschauen (part01, Folie 5) | * index.html + „assets“-Ordner * assets: hier nur Bilder index.html: Zeile 5: * Phaser.io einbinden im Head Zeile 10: * „script“-Tag für Javascript. Ab jetzt werden wir nur noch in diesem Tag Javascript programmieren. Zeile 11: * Schlüsselwort „var“ * Definition der Variablen „config“ * Phaser.AUTO = Wahl des Renderes: WebGL, wenn der Browser das kann. Canvas sonst. * Zuweisung mit „=“ * Schlüssel-Wert-Paare Zeile 22: * Erzeugen eines Objekts mit Namen „game“ der Klasse „Phaser.Game“ https://photonstorm.github.io/phaser3-docs/Phaser.Game.html * config als Parameter Zeilen 24 – 31: * Funktionsdefinition mit Schlüsselwort „function“ * Parameterliste * Funktionskörper (noch leer) * Mehr zu Javascript: www.w3schools.com/js/ | – |
| 6. Repl testen | „Run“ drücken | * schwarzes Fenster im Ausgabebereich * keine Fehlermeldungen auf der Konsole |
| 7. Projekt über Subdomain anschauen | * „Open in a new tab“ * Developertools im Browser öffnen | * Phaser.io meldet sich in der Konsole der Developertools * phaser-game.coderdojosaar.repl.co/part01.html |
5. Spielwelt anlegen
| Schritt | Aktion | Erfolg |
|---|---|---|
| 1. Hintergrund laden und anzeigen (part02 + part03, Folie 7 + 9) | * this = dieses Phaser.Game mit Namen „game“ aus Zeile 22 * Funktionsaufruf mit 2 Parametern vom Typ Zeichenkette („String“) * Name des Assets frei wählbar * Asset ist im Spiels unter seinem Namen benutzbar. -> leichtes Tauschen der Asset-Datei * Angabe der Asset-Datei muss stimmen * Bei create: Funktionsaufruuf mit 3 Parametern – 2-mal Zahl, 1-mal String | * Hintergrundbild wird angezeigt * phaser-game.coderdojosaar.repl.co/part03.html |
| 2. Physik definieren (Folie 11) | * im config-Objekt * es gibt verschiedene „Physiken“ * Schwerkraft nach unten („y“) kann später angepasst werden | – |
| 3. Plattformen laden und platzieren (part04, Folie 12 + 13) | * Plattform als asset laden * Variable „platforms“ global definieren * alle Plattformen sind in einer staticGroup * Spielwelt hat Koordinatensystem * (0, 0) ist oben rechts * nach Skalierung ist „refresh“ notwendig | 3 Plattformen und Boden sichtbar |
6. Spieler als Sprite laden und hinzufügen
| Schritt | Aktion | Erfolg |
|---|---|---|
| 1. Sprite hinzufügen + laden (part05, Folie 16) | * Spieler als spritesheet laden * Breite des Bildes ist ein Vielfaches der „frameWidth“ | – |
| 2. Sprite hinzufügen (Folie 17) | * Spieler hinzufügen * „Bounce“ definieren * Spieler fällt nicht aus der Welt | Spieler wird angezeigt, fällt nach unten, hüpft am unteren Rand der Spielwelt. |
| 3. Spieler steht auf Plattform (part06, Folie 19) | Spieler mit den staticGroup „plattforms“ kollidieren lassen. | Spieler steht auf dem Boden. |
7. Spieler animieren und bewegen
| Schritt | Aktion | Erfolg |
|---|---|---|
| 1. Animation definieren (part07, Folie 21) | Animationen für „left“, „right“ und „turn“ mit den entsprechenden Frames aus dem Sprite definieren. Animationen sind Objekte mit Schlüssel-Wert-Paaren | – |
| 2. Cursortasten definieren (Folie 22) | Cursortasten als Eingaben für das Spiel definieren. | – |
| 3. Animationen an Cursortasten hängen (Folie 23) | * Animationen und Cursortasten zusammenbringen. * „Wenn .. dann“-Abfragen mit Wahrheitswert * Zum ersten Mal in „update“! | Spieler läuft auf der Stelle, wenn man die Cursortasten drückt. |
| 4. Bewegung des Spielers hinzufügen (Folie 24) | * Animation mit Bewegung verbinden. * „Wenn .. dann“-Abfragen mit Wahrheitswert | Spieler kann nach rechts und links laufen. |
| 5. Springen hinzufügen (Folie 25) | Springen, wenn die Cursortaste nach oben gedrückt und der Boden berührt wird. Logisches und: „&&“ | Spieler kann auf die oberen Plattformen springen. |
8. Sterne laden, anzeigen und „bouncen“
| Schritt | Aktion | Erfolg |
|---|---|---|
| 1. Asset laden (part08, Folie 27) | * Asset-Namen angeben * Dateiname muss stimmen | – |
| 2. Alle Sterne erzeugen (Folie 28) | * Gruppe von 12 Sternen mit „physics.add.group“ erzeugen, gleichmäßig verteilen * Schleife | 12 Sterne werden erzeugt und fallen herunter bis ans untere Ende der Spielwelt |
| 3. Sterne ablegen (Folie 28) | Sterne liegen auf Plattformen | Sterne bleiben auf den Plattformen und dem Boden liegen |
| 4. „Bounciness“ angeben (Folie 28) | * Sterne hüpfen beim Aufprall („bounce“) zufällig stark * Iterator * Fließkommazahl (float) * Zufallszahl | Jeder Stern hüpft zufällig hoch, wenn er aufkommt. |
9. Sterne aufsammeln und Punkte zählen
| Schritt | Aktion | Erfolg |
|---|---|---|
| 1. Sterne aufsammeln (Folie 30) | * Spieler kann Sterne „aufsammeln“ * eigene Funktion „collectStar“ definieren | Sterne verschwinden bei Kontakt mit dem Spieler |
| 2. Punkte zählen (part09, Folie 32) | * Variable für Punkte anlegen * Initialisieren mit 0 * Hochzählen bei jedem Aufruf von „collectStar“ | Anzeige des Wertes der Variablen „score“ über Konsole oder Debugger der Developertools. |
| 3. Textfeld für Punkteanzeige anlegen (Folie 33) | * Textfeld erzeugen * passend plaztieren * Initialtext angeben * Textstil setzen | Textfeld mit Initialtext wird an der gewünschten Position angezeigt. |
| 4. Aktuelle Punkte werden angezeigt (Folie 34) | Bei jedem Aufruf von collectStar den Text im Anzeigefeld anpassen. | Anzeige ändert sich passend zum Spielstand. |
10. Bombe hinzufügen
| Schritt | Aktion | Erfolg |
|---|---|---|
| 1. Asset für die Bombe laden (part10, Folie 36) | Das benannte Asset steht nach dem Laden zur Verfügung. | – |
| 2. Gruppe für die Bomben anlegen (Folie 37) | Es kann mehrere Bomben geben | – |
| 3. Verhalten der Bomben definieren (Folie 37) | Bomben können mit den Plattformen und dem Spieler kollidieren. Bei Kollision mit dem Spieler wird die Methode „hitBomb“ aufgerufen. | – |
| 4. Alle Sterne wieder anzeigen und eine Bombe erzeugen (Folie 38) | * Wenn alle Sterne eingesammelt sind, werden sie wieder neu erzeugt. * Außerdem wird eine Bombe erzeugt * die Bombe wird an einer zufälligen Stelle in der Spielhälfte erzeugt, in der der Spieler gerade nicht ist * Eigenschaften der Bombe: ** bounced maximal ** kollidiert mit den Rändern der Welt ** zufälliger Abprallwinkel ** keine Schwerkraft | Jedesmal wenn alle Sterne eingesammelt sind, erscheint eine Bombe mehr. |
| 5. Aktion definieren, wenn der Spieler eine Bombe trifft (Folie 39) | * Anhalten der Physik * Spieler rot färben * Spieleranimation auf „turn“ setzen * globale Variable „gameOver“ auf „true“ setzen (Wahrheitswert, boolescher Wert) | Spiele bis mindestens eine Bombe erscheint spielen und das Spielende ausprobieren. |