Home-theater-designers
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 Vanilla-JavaScript besteht darin, dass eine umfangreiche Bibliothek zur Verfügung steht, die einen Großteil der Physik von Videospielen vervollständigt, sodass Sie sich auf das Design des Spiels selbst konzentrieren können.
Phaser verkürzt die Entwicklungszeit und erleichtert den Arbeitsablauf. Lassen Sie uns lernen, wie Sie mit Phaser ein einfaches Spiel erstellen.
Warum mit Phaser entwickeln?
Phaser ist anderen visuellen Programmiersprachen darin ähnlich, dass das Programm auf Schleifenaktualisierungen basiert. Phaser hat drei Hauptphasen: Vorladen, Erstellen und Aktualisieren.
Beim Preload werden die Assets des Spiels hochgeladen und dem Spiel zur Verfügung gestellt.
Create initialisiert das Spiel und alle Elemente des Startspiels. Jede dieser Funktionen wird einmal ausgeführt, wenn das Spiel gestartet wird.
Update hingegen läuft während des Spiels in einer Schleife. Es ist das Arbeitspferd, 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 auf HTML und JavaScript läuft, werden die Spiele tatsächlich serverseitig und nicht clientseitig ausgeführt. Dies bedeutet, dass Sie Ihr Spiel ausführen müssen dein localhost . Durch die serverseitige Ausführung des Spiels kann Ihr Spiel auf zusätzliche Dateien und Assets außerhalb des Programms zugreifen. ich empfehle mit XAMPP einen localhost einrichten wenn Sie noch kein Setup haben.
Der folgende Code wird Sie zum Laufen bringen. Es richtet eine grundlegende Spielumgebung ein.
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');
}
Zum Ausführen benötigt das Spiel ein PNG-Bild namens 'gamePiece', das in einem 'img'-Ordner auf deinem localhost gespeichert wird. Der Einfachheit halber verwendet dieses Beispiel ein 60xgame de60px orangefarbenes Quadrat. Dein Spiel sollte ungefähr so aussehen:
Wenn ein Problem auftritt, verwenden Sie den Debugger Ihres Browsers, um herauszufinden, was schief gelaufen ist. Das Fehlen auch nur eines einzigen Zeichens kann verheerende Folgen haben, aber im Allgemeinen fängt Ihr Debugger diese kleinen Fehler ab.
Erklärung des Setup-Codes
Bisher macht das Spiel nichts. Aber wir haben schon viel erreicht! 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 den Quellcode verlinkt, aber Sie können ihn auf Ihren localhost herunterladen und auch auf die Datei verweisen.
So erkennen Sie, wer Ihnen auf Instagram nicht mehr folgt
Ein Großteil des bisherigen Codes konfiguriert die Spielumgebung, die die Variable Konfiguration Shops. In unserem Beispiel richten wir ein Phaser-Spiel mit einem blauen Hintergrund (CCFFFF in Hex-Farbcode) ein, der 600 x 600 Pixel groß ist. Die Spielphysik ist vorerst auf eingestellt arkadisch , aber Phaser bietet eine andere Physik.
Schließlich, Szene weist das Programm an, die Vorspannung Funktion vor dem Spielstart und die schaffen Funktion um das Spiel zu starten. All diese Informationen werden an das Spielobjekt namens . weitergegeben Spiel .
Verwandt: Die 6 besten Laptops zum Programmieren und Codieren
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 vorgeladen. Der erste Parameter von .Bild benennt unser Bild und der zweite teilt dem Programm mit, wo das Bild zu finden ist.
Das GamePiece-Image wurde dem Spiel in der Create-Funktion hinzugefügt. Zeile 29 sagt, dass wir das Bild gamePiece als Sprite 270px links und 450px unten von der oberen linken Ecke unseres Spielbereichs hinzufügen.
Unsere Spielfigur bewegen
Bisher kann man das kaum als Spiel bezeichnen. Zum einen können wir unseren Spielstein 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 Update-Funktion
Neue Szene in der Konfiguration:
scene: {
preload: preload,
create: create,
update: update
}Fügen Sie als Nächstes eine Update-Funktion unterhalb der Create-Funktion hinzu:
So koppeln Sie den Controller mit der Xbox One
function update(){
}Abrufen von Schlüsseleingaben
Damit der Spieler das Spielstück mit den Pfeiltasten steuern kann, müssen wir eine Variable hinzufügen, um zu verfolgen, welche Tasten der Spieler drückt. Deklarieren Sie unten 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 beim Erstellen des Spiels in der Funktion create initialisiert werden.
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, bewegen wir unseren Spielstein entsprechend. Im Beispiel unten wird die Spielfigur um 2px verschoben, aber Sie können daraus eine größere oder kleinere Zahl machen. Das Verschieben des Stücks 1px auf einmal schien etwas langsam.
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. Hindernissen auszuweichen 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 namens Hindernis1 und Hindernis 2 verwendet. Hindernis1 ist ein blaues Quadrat und Hindernis2 ist grün. Jedes Bild muss genau wie das Spielstück-Sprite vorgeladen 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 in der Erstellungsfunktion initialisiert werden, genau wie das Spielstück.
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 in Bewegung setzen
Um die Figuren dieses Mal zu bewegen, möchten wir keine Spielereingaben verwenden. Lassen Sie uns stattdessen einen Teil von oben nach unten und den anderen von links nach rechts bewegen. Fügen Sie dazu den folgenden Code zur Update-Funktion 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 verschiebt Hindernis1 über den Bildschirm und Hindernis2 über den Spielbereich 4px pro Frame. Sobald ein Quadrat außerhalb des Bildschirms ist, wird es an eine neue zufällige Stelle zurück auf die gegenüberliegende Seite verschoben. Dadurch wird sichergestellt, dass es immer ein neues Hindernis für den Spieler gibt.
Kollisionen erkennen
Aber wir sind noch nicht ganz fertig. Sie haben vielleicht bemerkt, dass unser Spieler die Hindernisse durchqueren kann. Wir müssen dafür sorgen, dass das Spiel erkennt, wenn der Spieler auf ein Hindernis trifft, und das Spiel beenden.
Die Phaser-Physikbibliothek verfügt über einen Collider-Detektor. Alles, was wir tun müssen, ist es in der Create-Funktion 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 identifizieren, welche Objekte kollidieren. Oben haben wir also zwei Collider eingerichtet. Der erste erkennt, wenn die Spielfigur mit dem Hindernis1 kollidiert und der zweite sucht nach Kollisionen zwischen der Spielfigur und dem Hindernis2.
Der dritte Parameter sagt dem Collider, was zu tun ist, wenn er eine Kollision erkennt. In diesem Beispiel gibt es eine Funktion. Bei einer Kollision werden alle Spielelemente zerstört; das stoppt das spiel. Jetzt wird der Spieler das Spiel übergehen, wenn er auf ein Hindernis trifft.
Probieren Sie die Spieleentwicklung mit Phaser . aus
Es gibt viele verschiedene Möglichkeiten, wie dieses Spiel verbessert und komplexer gemacht werden kann. Wir haben nur einen Spieler erstellt, aber ein zweiter spielbarer Charakter könnte hinzugefügt und mit den 'awsd'-Steuerelementen gesteuert werden. In ähnlicher Weise können Sie mit dem Hinzufügen weiterer Hindernisse und dem Variieren der Bewegungsgeschwindigkeit experimentieren.
So blockieren Sie den Newsfeed auf Facebook
Diese Einführung wird Ihnen den Einstieg erleichtern, aber es gibt noch viel mehr 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 Fehler auftreten, ist Ihr Browser-Debugger eine gute Möglichkeit, das Problem zu entdecken.
Teilen Teilen Tweet Email So verwenden Sie Chrome DevTools zur Behebung von Website-ProblemenErfahren Sie, wie Sie die integrierten Entwicklungstools des Chrome-Browsers verwenden, um Ihre Websites zu verbessern.
Weiter lesen Verwandte Themen- Programmierung
- JavaScript
- HTML5
- Spieleentwicklung
J. Seaton ist ein Science Writer, der sich auf die Aufschlüsselung komplexer Themen spezialisiert hat. Sie hat einen Doktortitel von der University of Saskatchewan; Ihre Forschung konzentrierte sich auf die Nutzung von spielbasiertem Lernen, um das Online-Engagement von Schülern zu erhöhen. Wenn sie nicht arbeitet, finden Sie sie beim Lesen, beim Spielen von Videospielen oder bei der Gartenarbeit.
Mehr von Jennifer SeatonAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um sich zu abonnieren