Framework initialisieren
Dies ist das erste von 16 Tutorials, um zu lernen, wie man Gamedev Phaser verwendet. Nach Abschluss dieses Tutorials können Sie den Quellcode für diesen Abschnitt unter Gamedev-Phaser-Content-Kit/demos/lesson01.html finden.
Bevor wir mit der Funktionalität des Spiels beginnen, müssen wir eine grundlegende Struktur erstellen, um das Spiel darin anzuzeigen. Dies kann mit HTML erfolgen — das Phaser-Framework wird das erforderliche <canvas>
-Element generieren.
Das HTML des Spiels
Die Struktur des HTML-Dokuments ist ziemlich einfach, da das Spiel vollständig auf dem vom Framework generierten <canvas>
-Element angezeigt wird. Erstellen Sie mit Ihrem bevorzugten Texteditor ein neues HTML-Dokument, speichern Sie es als index.html
an einem geeigneten Ort und fügen Sie folgenden Code hinzu:
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Gamedev Phaser Workshop - lesson 01: Initialize the framework</title>
<style>
* {
padding: 0;
margin: 0;
}
</style>
<script src="js/phaser.min.js"></script>
</head>
<body>
<script>
const game = new Phaser.Game(480, 320, Phaser.CANVAS, null, {
preload,
create,
update,
});
function preload() {}
function create() {}
function update() {}
</script>
</body>
</html>
Herunterladen des Phaser-Codes
Als nächstes müssen wir den Prozess des Herunterladens des Phaser-Quellcodes durchlaufen und ihn auf unser HTML-Dokument anwenden. Dieses Tutorial verwendet Phaser V2 — es funktioniert nicht mit der aktuellen Version von Phaser (V3). Die V2-Bibliothek ist weiterhin auf der Phaser-Download-Seite verfügbar, unterhalb der Links für den V3-Download.
- Gehen Sie zur Phaser-Download-Seite.
- Wählen Sie eine Option, die Ihnen am besten passt — wir empfehlen die min.js-Option, da sie den Quellcode kleiner hält und es unwahrscheinlich ist, dass Sie den Quellcode durchgehen. Bitte stellen Sie sicher, dass Sie Phaser Version 2 verwenden, da dieses Tutorial dafür geschrieben wurde.
- Speichern Sie den Phaser-Code in einem
/js
-Verzeichnis am gleichen Ort wie Ihreindex.html
-Datei. - Aktualisieren Sie den
src
-Wert des ersten<script>
-Elements wie oben gezeigt.
Durchgehen, was wir bisher haben
Zu diesem Zeitpunkt haben wir ein charset
definiert, <title>
und einige grundlegende CSS im Header, um den Standard-margin
und padding
zurückzusetzen. Wir haben auch ein <script>
-Element, um den Phaser-Quellcode auf die Seite anzuwenden. Der Body enthält ein zweites <script>
-Element, in dem wir den JavaScript-Code schreiben, um das Spiel anzuzeigen und zu steuern.
Das <canvas>
-Element wird automatisch vom Framework generiert. Wir initialisieren es, indem wir ein neues Phaser.Game
-Objekt erstellen und es der Spielvariablen zuweisen. Die Parameter sind:
-
Die Breite und Höhe, um das
<canvas>
einzustellen. -
Die Render-Methode. Die drei Optionen sind
AUTO
,CANVAS
undWEBGL
. Wir können eine der beiden letzteren explizit einstellen oderAUTO
verwenden, damit Phaser entscheidet, welche zu verwenden ist. Normalerweise wird WebGL verwendet, wenn es im Browser verfügbar ist, und wechselt zu Canvas 2D, wenn nicht. -
Die
id
des<canvas>
, das zum Rendern verwendet werden soll, wenn bereits eines auf der Seite vorhanden ist (wir haben null angegeben, da wir möchten, dass Phaser sein eigenes erstellt). -
Die Namen, die für Phasers drei Schlüsselfunktionen verwendet werden, die das Spiel laden und starten und die Spielschleife bei jedem Frame aktualisieren; wir werden die gleichen Namen verwenden, um es sauber zu halten.
preload
kümmert sich um das Vorladen der Assetscreate
wird einmal ausgeführt, wenn alles geladen und bereit istupdate
wird bei jedem Frame ausgeführt.
Vergleichen Sie Ihren Code
Hier ist der vollständige Quellcode der ersten Lektion, live ausgeführt in einem JSFiddle:
Nächste Schritte
Jetzt haben wir das grundlegende HTML eingerichtet und ein wenig über die Phaser-Initialisierung gelernt. Lassen Sie uns mit der zweiten Lektion fortfahren und etwas über das Skalieren lernen.