Der Vorteil der Erstellung eines Videospiels in HTML5 besteht darin, dass es mit praktisch jedem Gerät kompatibel ist, das über einen Browser verfügt, und was noch besser ist, ohne dass zusätzliche Installationen oder Downloads erforderlich sind.

Dank dieser neuen Popularität haben die Frameworks zur Entwicklung von Videospielen zugenommen, jedes mit seinen Eigenschaften und Vorteilen. Dieses Mal werden wir uns auf Phaser konzentrieren, 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.
• Es ist kostenlos zu benutzen.
• Es hat Werkzeuge der Physik, die uns das Leben erleichtern.

Da wir sehen, dass es einige interessante Vorteile hat, werden wir die Installation durchführen, aber zuerst werden wir einige Anforderungen sehen, die das Framework benötigt.

Anforderungen

– Necesitamos acceso a Internet para poder hacer la descarga de todos los recursos que surjan durante la instalación del framework incluyendo este mismo. 1 – Wir benötigen einen Internetzugang, um alle Ressourcen, die bei der Installation des Frameworks anfallen, herunterladen zu können, einschließlich dieser.

– Debemos tener instalado o estar en la capacidad de instalar un servidor web del estilo LAMP o WAMP o MAMP dependiendo de nuestro sistema operativo, esto debido a que Phaser utiliza HTML5 y también JavaScript por lo que por medidas de seguridad nuestro navegador no va a aceptar ejecuciones locales. 2 – Wir müssen in der Lage sein, einen Webserver im LAMP- oder WAMP- oder MAMP-Stil zu installieren. Dies hängt von unserem Betriebssystem ab, da Phaser HTML5 und auch JavaScript verwendet. Aus Sicherheitsgründen wird unser Browser dies nicht tun lokale Hinrichtungen akzeptieren.

– Necesitamos permisos para acceder a las carpetas y servicios necesarios que se fijen durante la instalación del framework. 3 – Wir benötigen Berechtigungen für den Zugriff auf die erforderlichen Ordner und Dienste, die bei der Installation des Frameworks festgelegt wurden.

– Necesitamos un navegador compatible con HTML5 y que tenga herramientas de depuración, en el caso de este tutorial utilizaremos Firefox Developer Edition en su última versión al momento, sin embargo son libres de elegir el que mejor les parezca. 4 – Wir benötigen einen Browser, der mit HTML5 kompatibel ist und über Debugging-Tools verfügt. In diesem Tutorial wird Firefox Developer Edition in der aktuellsten Version verwendet. Sie können jedoch den Browser auswählen, der für sie am besten geeignet ist.

– Por último necesitamos un editor de texto para poder escribir el código de los ejemplos, como siempre puede ser cualquiera que tengamos, aunque recomendamos Sublime Text o NotePad ++ debido a la gran cantidad de complementos que tienen ambos que facilitan nuestra vida como desarrolladores. 5 – Schließlich benötigen wir einen Texteditor, um den Code der Beispiele zu schreiben, da es immer jeder sein kann, den wir haben, obwohl wir Sublime Text oder NotePad ++ aufgrund der großen Anzahl von Add-Ons empfehlen, die beide unser Leben als Entwickler erleichtern .

Phaser installieren

Das erste, was wir tun werden, um Phaser zu installieren, ist, auf seine offizielle Website zu gehen. Hier finden wir verschiedene Ressourcen. Im Moment gehen wir jedoch zu dem Abschnitt, in dem Download steht :

Wir haben mehrere Möglichkeiten, um den Download durchzuführen. Die beiden, die wir verwenden können, sind das Herunterladen des Tablets .zip oder .tar.gz. Wir können auch einen Klon von Github des Projekts erstellen . In unserem Fall werden wir das Projekt in .zip herunterladen, um den Prozess zu rationalisieren . Sobald wir das Projekt heruntergeladen oder geklont haben, sind die wichtigsten Verzeichnisse die folgenden:

Testen unserer Installation

Da wir das Projekt heruntergeladen haben, müssen wir nur den dekomprimierten Ordner kopieren, auf den wir mit unserem Webserver zugreifen können. Es ist im Allgemeinen das Verzeichnis www oder public_html . Alles hängt wirklich von unserer Umgebung ab.

Sobald wir dort angekommen sind, müssen wir in unserem Browser unseren localhost / phaser oder den von uns gesetzten Namen ausführen und die Liste der Dateien sehen. Hier müssen wir zu folgendem Ordner navigieren: resources / tutorials / 01 Getting Started / hellophaser / index.html und Wir können sehen, was wir auf dem folgenden Screenshot sehen:

Ordnerstruktur

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. In dem Ordner, in dem wir die Datei phaser.min.js ablegen , erstellen wir eine Datei namens Index .html und eine andere Datei namens main.js , müssen wir auch ein Bild namens logo.png platzieren , das das Sprite ist, das wir zeigen werden. Es befindet sich in den Ressourcen des Frameworks und kann eine empfohlene Größe von 180 mal 64 Pixel haben. Am Ende sollte unser Verzeichnis so aussehen:

Der Code

Da wir jetzt unsere Struktur festgelegt haben, müssen wir damit beginnen, den Code für unser erstes Projekt zu schreiben. Dazu müssen wir zunächst unsere Datei index.html öffnen und dann die von uns erstellten .js- Dateien sowie ein <div erstellen > welches das Wort gameDiv als Bezeichner haben wird. Mal sehen, wie unser Code aussieht:

 <! DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title> Unser erstes Spiel in Phaser </ title> <script type = "text / javascript" src = " phaser.min.js "> </ script> <script type =" text / javascript "src =" main.js "> </ script> </ head> <body> <p> Unser erstes Spiel =) </ p > <div id = "gameDiv"> </ div> </ body> </ html> 

Auf dieser Grundlage wird unser Spiel unterstützt, sodass der Benutzer den Inhalt visualisieren kann. Der nächste Schritt bei der Erstellung unseres ersten Spiels besteht darin, den Code für main.js zu schreiben, der die gesamte Logik unseres Spiels verarbeitet und drei wichtige Methoden enthält.

.
Wie wir sehen, ist jede dieser Methoden für den Status des Spiels verantwortlich. Die ersten beiden Methoden stehen vor dem Beginn des Spiels, während die Aktualisierung während der Ausführung erfolgt. Nachdem wir die einzelnen Methoden definiert haben, müssen wir nur den Code anzeigen, den wir benötigen:

 var mainState = {preload: function () {// Lade das Bild game.load.image ('logo', 'logo.png'); }, erstelle: function () {// Wir zeigen unser Bild im Spiel this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// wir ändern den Winkel in einer Einheit 60 mal pro Sekunde // dies gibt uns einen Rotationseffekt des Bildes this.sprite.angle + = 1; }}; // hier starten wir unser Spiel und legen fest, // dass wir das div gameDiv verwenden müssen, das wir in unser HTMLvar game = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state.add einfügen ('main', mainState); game.state.start ('main'); 

Wie wir am Ende der Methoden sehen, erstellen wir eine Variable namens game und führen dabei eine Instanz von Phaser.Game aus, in der wir einige Parameter übergeben. Im Moment ist es nicht erforderlich, viel über sie zu wissen. Wir kopieren sie einfach so, wie wir sie sehen. Aber in etwa ist dies der Teil, in dem wir unserer Anwendung mitteilen, dass Sie nach Phaser suchen sollten, um zu erfahren, wie Sie mit den zuvor erstellten Methoden umgehen sollen. Am Ende von game.state.start teilen wir dem Framework mit, dass unser Spiel gestartet werden soll .

Wenn nun alles gut gegangen ist, werden wir unser Projekt im Browser ausführen und das ausgewählte Bild sollte sich auf dem Bildschirm drehen:

In diesem Beispiel haben wir ein Bild verwendet, das zu den Ressourcen von Phaser gehört. Dies ist jedoch nicht unbedingt erforderlich. Mit jedem Bild können wir die gleichen Ergebnisse erzielen. Eine andere Sache, die wir in unserem Beispiel bemerken können, ist, dass wir unten die Browser-Debug-Konsole geöffnet haben. Dieses Tool ist der beste Freund, den wir haben, da wir dort die verschiedenen Fehler debuggen können, die wir bei der Entwicklung unserer Spiele finden können.

Damit haben wir dieses Tutorial beendet, Phaser erfolgreich installiert, einige der ursprünglichen Eigenschaften 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 bisschen tiefer in Phaser zu recherchieren, da dies nicht einmal 1% von allem ist, was es bietet. Es ist jedoch ein erster Schritt, den wir oft nur schwer tun.