2D Breakout-Spiel mit Phaser

In diesem Schritt-für-Schritt-Tutorial erstellen wir ein einfaches mobiles MDN Breakout-Spiel, das in JavaScript geschrieben ist und das Phaser-Framework verwendet.

Jeder Schritt hat bearbeitbare, Live-Beispiele zum Ausprobieren, sodass Sie sehen können, wie die Zwischenstufen aussehen sollten. Sie lernen die Grundlagen der Verwendung des Phaser-Frameworks zur Implementierung grundlegender Spielmechaniken wie das Rendern und Bewegen von Bildern, Kollisionserkennung, Steuerungsmechanismen, framework-spezifische Hilfsfunktionen, Animationen und Tweening sowie Gewinn- und Verlustzustände.

Um das Beste aus dieser Artikelserie herauszuholen, sollten Sie bereits über grundlegende bis mittlere JavaScript-Kenntnisse verfügen. Nach der Durcharbeitung dieses Tutorials sollten Sie in der Lage sein, eigene einfache Web-Spiele mit Phaser zu erstellen.

Spielbildschirm des Spiels MDN Breakout, das mit Phaser erstellt wurde, wo Sie Ihr Paddle verwenden können, um den Ball zu schlagen und das Ziegel-Feld zu zerstören, wobei die Punkte und Leben erhalten bleiben.

Unterrichtsdetails

Alle Lektionen — und die verschiedenen Versionen des MDN Breakout-Spiels, die wir gemeinsam erstellen — sind auf GitHub verfügbar:

  1. Das Framework initialisieren
  2. Skalierung
  3. Laden Sie die Assets und drucken Sie sie auf dem Bildschirm aus
  4. Bewegen Sie den Ball
  5. Physik
  6. Von den Wänden abprallen
  7. Spieler-Paddle und Steuerung
  8. Spielende
  9. Das Ziegel-Feld erstellen
  10. Kollisionserkennung
  11. Der Punktestand
  12. Spiel gewinnen
  13. Extraleben
  14. Animationen und Tweens
  15. Schaltflächen
  16. Spielweise randomisieren

Ein Hinweis zu Lernpfaden — der Einstieg mit reinem JavaScript ist der beste Weg, um ein solides Wissen in der Webspiel-Entwicklung zu erlangen. Wenn Sie sich mit der reinen JavaScript-Spielentwicklung noch nicht auskennen, empfehlen wir Ihnen, zunächst die Gegenstück-Serie 2D Breakout-Spiel mit reinem JavaScript durchzuarbeiten.

Danach können Sie jedes beliebige Framework auswählen und es für Ihre Projekte verwenden; wir haben uns für Phaser entschieden, da es ein solides Framework mit guter Unterstützung und Community sowie einem guten Satz von Plugins ist. Frameworks beschleunigen die Entwicklungszeit und helfen, sich um die langweiligen Teile zu kümmern, sodass Sie sich auf die spaßigen Sachen konzentrieren können. Allerdings sind Frameworks nicht immer perfekt. Wenn etwas Unerwartetes passiert oder wenn Sie eine Funktionalität schreiben möchten, die das Framework nicht bietet, benötigen Sie einige Kenntnisse in reinem JavaScript.

Hinweis: Diese Artikelserie kann als Material für praktische Workshops zur Spielentwicklung verwendet werden. Sie können auch das auf diesem Tutorial basierende Gamedev Phaser Content Kit verwenden, wenn Sie einen Vortrag über Spielentwicklung mit Phaser halten möchten.

Nächste Schritte

Ok, lassen Sie uns beginnen! Gehen Sie zum ersten Teil der Serie — Das Framework initialisieren.