Erste Schritte zur Spieleentwicklung mit Phaser

Die Ankunft von HTML5 Es hat unsere Sicht auf das Web verändert, es hat uns nicht nur bessere Werkzeuge für ihre Entwicklung gegeben, sondern uns auch die Möglichkeiten eröffnet, weitergehende Anwendungen zu entwickeln, wie im Fall von Videospielen.
Der Vorteil, ein Videospiel in zu machen HTML5 es ist mit praktisch jedem Gerät kompatibel, das über einen Browser verfügt, und was noch besser ist, ohne dass heruntergeladen oder zusätzliche Installationen durchgeführt werden müssen.
Dank dieser neuen Popularität haben sich Frameworks für die Entwicklung von Videospielen verbreitet, jedes mit seinen Eigenschaften und Vorteilen, auf die wir uns diesmal konzentrieren werden Phaser, die Gründe sind vielfältig und wir können sie in der folgenden Liste sehen:

• Es hat eine große Community und ist aktiv.
• Es wird regelmäßig aktualisiert.
• Die Nutzung ist kostenlos.
• Es hat Physik-Tools, die uns das Leben erleichtern.

Da wir also sehen, dass es einige interessante Vorteile hat, werden wir es installieren, aber zuerst sehen wir uns einige Anforderungen an, die das Framework erfordert.
1- Wir benötigen einen Internetzugang, um alle Ressourcen herunterladen zu können, die während der Installation des Frameworks entstehen, einschließlich dieser.
2- Wir müssen einen Webserver des Stils installiert haben oder installieren können LAMPE oder WAMP oder MAMP abhängig von unserem Betriebssystem, weil Phaser Verwendet HTML5 und auch JavaScript Aus Sicherheitsgründen akzeptiert unser Browser daher keine lokalen Ausführungen.
3- Wir benötigen Berechtigungen, um auf die erforderlichen Ordner und Dienste zuzugreifen, die während der Installation des Frameworks festgelegt werden.
4- Wir brauchen einen Browser, der mit kompatibel ist HTML5 und dass es Debugging-Tools hat, werden wir im Fall dieses Tutorials verwenden Firefox-Entwickler-Edition in der derzeit neuesten Version, sie können jedoch diejenige wählen, die ihnen am besten erscheint.
5- Schließlich brauchen wir einen Texteditor, um den Code für die Beispiele schreiben zu können, da es immer alles sein kann, was wir haben, obwohl wir empfehlen Erhabener Text o NotePad ++ aufgrund der großen Anzahl von Plugins, die beide haben, die unser Leben als Entwickler einfacher machen.
Das erste, was wir tun werden, um installieren zu können Phaser ist auf die offizielle Website zu gehen und hier werden wir mehrere Ressourcen finden, aber vorerst gehen wir zu dem Abschnitt, der sagt: Herunterladen:

VERGRÖSSERN

Wir haben mehrere Optionen zum Herunterladen, die beiden, die wir verwenden können, sind das Herunterladen der komprimierten .zip- oder .tar.gz-Datei. Wir können auch einen Klon daraus erstellen Github des Projekts, in unserem Fall laden wir das Projekt in .zip herunter, um den Prozess zu beschleunigen. Nachdem wir das Projekt heruntergeladen oder geklont haben, sind die wichtigsten Verzeichnisse die folgenden:
docs / index.htmlHier haben wir den Eintrag zur Offline- und offiziellen Dokumentation der gerade heruntergeladenen Version. Er kann uns helfen, einige Details zu überprüfen. Wenn wir jedoch die Möglichkeit haben, ins Internet zu gehen und uns selbst zu dokumentieren, haben wir immer bessere Möglichkeiten.
build / phaser.min.jsDies ist unser Framework als solches, es ist die minimierte und komprimierte Bibliothek, die alle Werkzeuge enthält, die wir benötigen, um unsere ersten Projekte zu starten.
Da wir das Projekt heruntergeladen haben, müssen wir, um zu überprüfen, ob alles korrekt ist, einfach den entpackten Ordner kopieren, in den wir mit unserem Webserver zugreifen können, im Allgemeinen ist es das Verzeichnis www oder public_html, es hängt wirklich alles von unserer Umgebung ab.
Dort angekommen müssen wir zu unserem Browser gehen und unsere localhost / phaser oder den von uns platzierten Namen und wir sehen die Liste der Dateien. Hier müssen wir zum folgenden Ordner navigieren: Ressourcen / Tutorials / 01 Erste Schritte / hellophaser / index.html und wir können schätzen, was wir im folgenden Screenshot sehen:

VERGRÖSSERN

Unser erstes SpielDa wir verifiziert haben, dass unsere Umgebung perfekt funktioniert, ist es an der Zeit, unser erstes Spiel zu machen. Dazu werden wir zu diesem Zeitpunkt ein erreichbares Ziel für unser Niveau festlegen, wobei wir am Ende des Beispiels in der Lage sein müssen, a . zu zeigen Sprite auf dem Bildschirm.
In dem Ordner, in dem wir das Framework auf unserem Webserver haben, erstellen wir einen neuen Ordner, in diesem Fall nennen wir ihn Phaser-Beispiel, drinnen werden wir die Datei platzieren phaser.min.js An der Wurzel davon erstellen wir eine Datei namens index.html und eine andere Datei namens main.js, wir müssen auch ein Bild namens . platzieren logo.png.webp Dies wird das Sprite sein, das wir zeigen werden, das in den Framework-Ressourcen zu finden ist und eine empfohlene Größe von 180 x 64 Pixeln haben kann. Am Ende sollte unser Verzeichnis so aussehen:

Da wir nun unsere Struktur etabliert haben, müssen wir mit dem Schreiben des Codes für unser erstes Projekt beginnen, dazu müssen wir unsere Datei öffnen index.html und dort werden wir die Dateien einfügen .js die wir erstellt haben, zusätzlich zur Erstellung eines die als Bezeichner das Wort haben wird SpielDiv. Sehen wir uns an, wie unser Code aussieht:

 Unser erstes Spiel auf Phaser
Unser erstes Spiel =)

Auf dieser Grundlage wird unser Spiel unterstützt, damit der Benutzer den Inhalt sehen kann. Der nächste Schritt beim Erstellen unseres ersten Spiels besteht darin, den Code für . zu schreiben main.js, das die gesamte Logik unseres Spiels übernimmt und drei Schlüsselmethoden enthält, mal sehen:
VorspannungDiese Methode ist dafür verantwortlich, alle Ressourcen, die unser Spiel benötigt, vorab zu laden, sei es Bilder, Audio, Videos usw. Es läuft immer beim Start.
schaffenDiese Methode wird ausgeführt, nachdem sie abgeschlossen ist Vorspannung und seine Funktion besteht darin, die geladenen Ressourcen in unser Spiel zu integrieren und uns zusätzlich die Möglichkeit zu geben, die anfängliche Einrichtung des Spiels festzulegen.
aktualisierenSchließlich läuft diese Methode 60 Mal pro Sekunde und enthält die wahre Logik unseres Spiels, sie gibt uns sozusagen die Bewegung.
Wie wir sehen können, ist jede dieser Methoden für einen Zustand des Spiels verantwortlich, die ersten beiden sind vor dem Beginn des Spiels, während die aktualisieren tritt während der Ausführung auf. Sobald wir definiert haben, was jede Methode macht, müssen wir nur den Code sehen, den wir brauchen:

 var mainState = {preload: function () {// Wir laden das Bild game.load.image ('logo', 'logo.png.webp'); }, create: function () {// Wir zeigen unser Bild im Spiel this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// Wir ändern den Winkel 60 Mal pro Sekunde um eine Einheit // Dies gibt uns einen Bilddreheffekt this.sprite.angle + = 1; }}; // hier starten wir unser Spiel und setzen es // so, dass das div gameDiv verwendet wird, das wir in unsere HTMLvar eingefügt haben game = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add ('main', mainState); game.state.start ('main');

Wie wir am Ende der Methoden sehen können, erstellen wir eine Variable namens Spiel und darin führen wir eine Instanz von . aus Phaser.Spiel Wo wir einige Parameter übergeben, ist es im Moment nicht notwendig, viel über sie zu wissen, wir kopieren sie einfach so, wie wir sie sehen. Aber in etwa ist dies der Teil, nach dem wir unserer Anwendung sagen, dass sie suchen soll Phaser damit es Ihnen sagt, was Sie mit den oben erstellten Methoden und am Ende mit machen sollen Spielzustand.start Hier weisen wir das Framework an, unser Spiel zu starten.
Wenn jetzt alles gut gelaufen ist, führen wir unser Projekt im Browser aus und wir sollten das ausgewählte Bild auf dem Bildschirm rotieren sehen:

In diesem Beispiel haben wir ein Bild verwendet, das in die Ressourcen von PhaserEs ist jedoch nicht wirklich eine Voraussetzung, mit jedem Bild könnten wir die gleichen Ergebnisse erzielen. Eine andere Sache, die wir in unserem Beispiel feststellen können, ist, dass wir unten die Browser-Debugging-Konsole geöffnet haben. Dieses Tool ist der beste Freund, den wir haben werden, da wir dort die verschiedenen Fehler beheben können, die wir bei der Entwicklung unserer Spiele finden können.
Damit haben wir dieses Tutorial abgeschlossen, wir haben es erfolgreich installiert Phaser, wir haben einige der anfänglichen Merkmale dieses großartigen Frameworks kennengelernt und damit eine kleine Anwendung oder ein kleines Spiel erstellt. Es ist wichtig, dieses Tutorial als Ausgangspunkt zu nehmen, um ein wenig tiefer zu recherchieren Phaser, da dies nicht einmal 1% von allem ist, was es uns bietet, aber es ist ein erster Schritt, der uns so oft kostet.