Erste Schritte mit Phaser für die Spieleentwicklung
Phaser ist ein Framework zum Erstellen von 2D-Videospielen. Es verwendet HTML5 Canvas, um das Spiel anzuzeigen, und JavaScript, um das Spiel auszuführen. Der Vorteil der Verwendung von Phaser gegenüber Vanille-JavaScript besteht darin, dass eine umfangreiche Bibliothek vorhanden ist, die einen Großteil der Physik von Videospielen vervollständigt, sodass Sie sich auf das Entwerfen des Spiels selbst konzentrieren können.
Phaser reduziert die Entwicklungszeit und vereinfacht den Workflow. Lassen Sie uns lernen, wie man mit Phaser ein einfaches Spiel erstellt.
Warum mit Phaser entwickeln?
Phaser ähnelt anderen visuellen Programmiersprachen darin, dass das Programm auf geloopten Updates basiert. Phaser besteht aus drei Hauptphasen: Vorladen, Erstellen und Aktualisieren.
Beim Vorladen werden die Assets des Spiels hochgeladen und dem Spiel zur Verfügung gestellt.
Erstellen initialisiert das Spiel und alle Elemente des Startspiels. Jede dieser Funktionen wird einmal ausgeführt, wenn das Spiel gestartet wird.
Das Update hingegen läuft während des gesamten Spiels in einer Schleife. Es ist das Arbeitstier, das die Elemente des Spiels aktualisiert, um es interaktiv zu machen.
Richten Sie Ihr System für die Entwicklung von Spielen mit Phaser ein
Obwohl Phaser unter HTML und JavaScript ausgeführt wird, werden die Spiele tatsächlich serverseitig und nicht clientseitig ausgeführt. Dies bedeutet, dass Sie Ihr Spiel auf Ihrem lokalen Host ausführen müssen. Wenn Sie das Spiel serverseitig ausführen, kann Ihr Spiel auf zusätzliche Dateien und Assets außerhalb des Programms zugreifen. Ich empfehle die Verwendung von XAMPP zum Einrichten eines lokalen Hosts, wenn Sie noch kein Setup haben.
Mit dem folgenden Code können Sie loslegen. Es richtet eine grundlegende Spielumgebung ein.
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var gamePiece;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}
</script>
</body>
</html>Zum Ausführen des Spiels ist ein PNG-Image namens "gamePiece" erforderlich, das in einem "img" -Ordner auf Ihrem lokalen Host gespeichert ist. In diesem Beispiel wird der Einfachheit halber ein orangefarbenes 60xgame de60px-Quadrat verwendet. Dein Spiel sollte ungefähr so aussehen:
Wenn Sie auf ein Problem stoßen, verwenden Sie den Debugger Ihres Browsers, um herauszufinden, was schief gelaufen ist. Das Fehlen eines einzigen Zeichens kann zu Chaos führen, aber im Allgemeinen wird Ihr Debugger diese kleinen Fehler abfangen.
Erklären des Setup-Codes
Bisher macht das Spiel nichts. Aber wir haben schon viel unternommen! Schauen wir uns den Code genauer an.
Damit ein Phaser-Spiel ausgeführt werden kann, müssen Sie die Phaser-Bibliothek importieren. Wir tun dies in Zeile 3. In diesem Beispiel haben wir einen Link zum Quellcode erstellt, aber Sie können ihn auf Ihren lokalen Host herunterladen und auch auf die Datei verweisen.
Ein Großteil des Codes konfiguriert bisher die Spielumgebung, die in der Variablen config gespeichert ist. In unserem Beispiel richten wir ein Phaser-Spiel mit einem blauen Hintergrund (CCFFFF in hexadezimalem Farbcode) von 600 x 600 Pixel ein. Im Moment wurde die Spielphysik auf Arcade eingestellt , aber Phaser bietet eine andere Physik an.
Schließlich weist die Szene das Programm an, die Vorladefunktion auszuführen, bevor das Spiel beginnt, und die Erstellungsfunktion , um das Spiel zu starten. Alle diese Informationen werden an das Spielobjekt namens Spiel übergeben .
Im nächsten Codeabschnitt nimmt das Spiel wirklich Gestalt an. Mit der Preload-Funktion möchten Sie alles initialisieren, was Sie zum Ausführen Ihres Spiels benötigen. In unserem Fall haben wir das Bild unserer Spielfigur vorinstalliert. Der erste Parameter von .image benennt unser Bild und der zweite teilt dem Programm mit, wo sich das Bild befindet.
Das gamePiece-Bild wurde dem Spiel in der Erstellungsfunktion hinzugefügt. Zeile 29 besagt, dass wir das Bild gamePiece als Sprite 270px links und 450px unten in der oberen linken Ecke unseres Spielbereichs hinzufügen.
Unser Spielstück bewegen
Bisher kann dies kaum als Spiel bezeichnet werden. Zum einen können wir unser Spielstück nicht bewegen. Um Dinge in unserem Spiel ändern zu können, müssen wir eine Update-Funktion hinzufügen. Wir müssen auch die Szene in der Konfigurationsvariablen anpassen, um dem Spiel mitzuteilen, welche Funktion ausgeführt werden soll, wenn wir das Spiel aktualisieren.
Hinzufügen einer Aktualisierungsfunktion
Neue Szene in der Konfiguration:
scene: {
preload: preload,
create: create,
update: update
}Fügen Sie als Nächstes eine Aktualisierungsfunktion unterhalb der Erstellungsfunktion hinzu:
function update(){
}Tasteneingaben abrufen
Damit der Spieler die Spielfigur mit den Pfeiltasten steuern kann, müssen wir eine Variable hinzufügen, um zu verfolgen, welche Tasten der Spieler drückt. Deklarieren Sie eine Variable namens keyInputs, in der wir gamePieces deklariert haben. Wenn Sie es dort deklarieren, können alle Funktionen auf die neue Variable zugreifen.
var gamePiece;
var keyInputs;Die Variable keyInput sollte initialisiert werden, wenn das Spiel in der Funktion create erstellt wird.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}Jetzt können wir in der Update-Funktion überprüfen, ob der Spieler eine Pfeiltaste drückt, und wenn ja, unsere Spielfigur entsprechend verschieben. Im folgenden Beispiel wird die Spielfigur um 2 Pixel verschoben, aber Sie können eine größere oder kleinere Zahl festlegen. Das Verschieben des Stücks um jeweils 1 Pixel schien etwas langsam zu sein.
function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}Das Spiel hat jetzt einen beweglichen Charakter! Aber um wirklich ein Spiel zu sein, brauchen wir ein Ziel. Fügen wir einige Hindernisse hinzu. Das Ausweichen vor Hindernissen war die Grundlage für viele Spiele in der 8-Bit-Ära.
Hinzufügen von Hindernissen zum Spiel
In diesem Codebeispiel werden zwei Hindernis-Sprites verwendet, die als Hindernis1 und Hindernis 2 bezeichnet werden. Hindernis1 ist ein blaues Quadrat und Hindernis2 ist grün. Jedes Bild muss genau wie das Gamepiece-Sprite vorinstalliert werden.
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}Dann muss jedes Hindernis-Sprite genau wie das Spielstück in der Erstellungsfunktion initialisiert werden.
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}Die Hindernisse bewegen
Um die Teile dieses Mal zu verschieben, möchten wir keine Spielereingaben verwenden. Lassen Sie stattdessen ein Stück von oben nach unten und das andere von links nach rechts bewegen. Fügen Sie dazu der Update-Funktion folgenden Code hinzu:
obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}
obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}Der obige Code bewegt Hindernis1 auf dem Bildschirm und Hindernis2 4px pro Bild über den Spielbereich. Sobald ein Quadrat außerhalb des Bildschirms ist, wird es an einer neuen zufälligen Stelle auf die gegenüberliegende Seite zurückbewegt. Dadurch wird sichergestellt, dass es für den Spieler immer ein neues Hindernis gibt.
Kollisionen erkennen
Aber wir sind noch nicht ganz fertig. Sie haben vielleicht bemerkt, dass unser Spieler direkt durch die Hindernisse gehen kann. Wir müssen das Spiel erkennen lassen, wenn der Spieler auf ein Hindernis stößt, und das Spiel beenden.
Die Phaser-Physikbibliothek verfügt über einen Kolliderdetektor. Alles was wir tun müssen, ist es in der Erstellungsfunktion zu initialisieren.
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});Die Collider-Methode erfordert drei Parameter. Die ersten beiden Parameter geben an, welche Objekte kollidieren. Oben haben wir zwei Collider eingerichtet. Der erste erkennt, wenn das Spielstück mit Hindernis1 kollidiert, und der zweite Kollider sucht nach Kollisionen zwischen Spielstück und Hindernis2.
Der dritte Parameter teilt dem Collider mit, was zu tun ist, wenn er eine Kollision erkennt. In diesem Beispiel gibt es eine Funktion. Bei einer Kollision werden alle Spielelemente zerstört. Dies stoppt das Spiel. Jetzt spielt der Spieler, wenn er auf ein Hindernis stößt.
Probieren Sie die Spieleentwicklung mit Phaser aus
Es gibt viele verschiedene Möglichkeiten, wie dieses Spiel verbessert und komplexer gestaltet werden kann. Wir haben nur einen Spieler erstellt, aber ein zweiter spielbarer Charakter könnte mit den "awsd" -Steuerelementen hinzugefügt und gesteuert werden. Ebenso können Sie experimentieren, indem Sie weitere Hindernisse hinzufügen und die Geschwindigkeit ihrer Bewegung variieren.
Diese Einführung wird Ihnen den Einstieg erleichtern, aber es gibt noch viel zu lernen. Das Tolle an Phaser ist, dass ein Großteil der Spielphysik für Sie erledigt wird. Es ist eine großartige einfache Möglichkeit, mit dem Entwerfen von 2D-Spielen zu beginnen. Bauen Sie weiter auf diesem Code auf und verfeinern Sie Ihr Spiel.
Wenn Sie auf Fehler stoßen, ist Ihr Browser-Debugger eine gute Möglichkeit, das Problem zu erkennen.