Share
Phaser ist ein Open Source HTML5-Spiele-Framework, das von Photon Storm erstellt wurde. Es wurde entwickelt, um Spiele zu erstellen, die auf Desktop- und mobilen Webbrowsern ausgeführt werden können. Ein großer Fokus lag auf der Leistung in mobilen Webbrowsern, einem wachsenden und wichtigen Bereich des Web-Gaming. Wenn das Gerät in der Lage ist, verwendet es WebGL für das Rendern. Andernfalls kehrt es nahtlos in Canvas zurück. In diesem Artikel werde ich die Ressourcen für das Erlernen von Phaser behandeln und zeigen, was es kann, und einige der Überlegungen, die in das Design eingegangen sind.
Man kann sagen, dass es sich anfühlt, als würde jede Woche ein neues HTML5-Spiele-Framework veröffentlicht werden, wie beispielsweise die Verbreitung. Warum sollten Sie Phaser überhaupt zu der großen Auswahl zählen? Ich denke gerne, dass der Grund etwas mit dem Erbe des Teams zu tun hat, das an dem Aufbau beteiligt ist.
Wir bei Photon Storm haben uns vor einigen Jahren ausschließlich der Entwicklung von HTML5-Spielen gewidmet. Damals gab es eigentlich keine große Auswahl an Rahmenbedingungen, und Sie konnten die Anzahl der HTML5-Spieleentwickler im einstelligen Bereich zählen. Als wir den Raum so früh betraten und von Flash kamen, verspürten wir sofort die Notwendigkeit, Werkzeuge zu bauen, die wir in AS3 gewohnt waren.
Wir waren große Fans von Flixel und hatten sowohl mit unseren eigenen Spielen als auch mit unseren Flixel Power Tools Erfolg. Es war ein echter Wahnsinn, dass andere Entwickler sie dabei unterstützten, ihre Spiele zu veröffentlichen, und dies war etwas, das wir in HTML5 duplizieren wollten.
Wir waren jedoch nicht darauf vorbereitet, wie schnell sich die HTML5-Landschaft verändert. Noch heute habe ich eine Folie in meinen Präsentationen, die ich auf Konferenzen zeige: "Seien Sie darauf vorbereitet, alle sechs Monate Ihr Wissen zu vergessen", und ich glaube, dass dies immer noch der Fall ist. Browser-Anbieter durchlaufen derzeit eine phänomenale Geschwindigkeit und verbessern sich in einem phänomenalen Tempo. Es dauert nur eine Frage von Wochen, bis neue Funktionen an die Öffentlichkeit gelangen und wenn Sie mit einem Spiel-Framework ausgestattet sind Das wird während der Freizeit eines Benutzers aufrechterhalten oder befindet sich in einem langsamen Veröffentlichungszyklus. Dann dauert es nicht lange, bis die Dinge sehr veraltet sind.
Ein weiteres Zeichen dieser Änderung waren die Arten von Kundenarbeiten, für die wir beauftragt wurden. Als Unternehmen machen wir nur zwei Dinge: HTML5-Spiele und Phaser. Wir haben HTML5-Spiele für einige der größten Unterhaltungsmarken der Welt entwickelt, was uns einen genauen Einblick in die Anforderungen gibt, die sie verlangen. Der größte Bereich, in dem wir arbeiten sollten, waren Spiele, die im mobilen Browser ausgeführt wurden. So viele HTML5-Frameworks konzentrieren sich auf den Desktop, wo die Leistung reichlich ist und die Verbindungen schnell und stabil sind und die mobile Browserseite des Lebens ignoriert. Hier sehen wir jedoch immer noch die stärkste Nachfrage der Kunden. Daher war es unerlässlich, dass Phaser unabhängig von der Plattform zum Erstellen unserer Client-Spiele verwendet werden konnte.
Seit der Veröffentlichung von Phaser 1.0 wurden regelmäßige und umfassende Updates durchgeführt, wobei viele neue Funktionen und Korrekturen schnell zur Verfügung standen. Wir arbeiten an einem Turnaround von ungefähr einem Monat von dev bis master - Sie können ein komplettes Changelog auf GitHub sehen. Interessanterweise sehen wir jetzt eine Nachfrage nach Spielen, die in einem WebView ausgeführt werden. Daher werden wir sicherstellen, dass Phaser in dieser Umgebung ab 2014 gut funktioniert.
Es war uns nicht nur wichtig, Phaser auf dem neuesten Stand zu halten, sondern auch, dass wir etwas gebaut haben, das war Ja wirklich Einfach zu verwenden. Und das wird sich im gesamten Rahmen widerspiegeln. Dies beruht auf unseren Erfahrungen mit den Flixel Power Tools und darüber hinaus, als ich bei The Game Creators arbeitete, um die Form ihrer Spielsprachen zu bestimmen. Ich denke, es war schon immer ein Teil von mir, dass ich den Entwicklern die Entwicklung von Spielen so einfach wie möglich machen wollte. Ein Trend, den ich mit der Entwicklung von Phaser fortsetzen werde.
Ich entschuldige mich im Voraus für eines der folgenden (oder darüber!) Geräusche, die etwas "Marketing" sind. Phaser ist ein kostenloses Produkt. Wir verdienen kein Geld damit, wenn Sie es verwenden, und wenn ich davon begeistert bin, liegt das nur daran, dass ich leidenschaftlich mit dem, was ich geschaffen habe. Also bitte mit mir ertragen!
Phaser ist eine JavaScript-Bibliothek, die auf allen gängigen Desktop-Browsern ausgeführt werden kann. Dazu gehören Internet Explorer 9 und höher, Firefox, Chrome und Safari. Vor IE9 wurde kein Canvas unterstützt. Wenn Sie also unbedingt ein Framework benötigen, das DOM-Rendering unterstützt, ist Phaser nicht geeignet. Die Nachfrage nach diesen Arten von Spielen wird jedoch fast immer geringer; Wenn überhaupt, wird die andere Richtung (in Richtung WebGL) verschoben..
Auf dem Handy läuft Phaser unter iOS5 und höher in Mobile Safari. Unter Android läuft es in Version 2.2 und höher sowohl im Standardbrowser als auch in Chrome. Chrome ist jetzt der Standardbrowser für Android. Neuere Versionen unterstützen sogar WebGL, aber Sie können immer noch nicht die Millionen älterer Android-Geräte ignorieren, die weiterhin verwendet werden.
Dank Mozilla haben wir eine Reihe von FFOS-Testgeräten erhalten und haben begonnen, sicherzustellen, dass Phaser gut läuft. Bisher sehen die Dinge gut aus und wir werden im neuen Jahr Implementierungsleitfäden erstellen.
Wir haben auch gesehen, dass Phaser-Spiele auf Tizen-Geräten und unter dem Kindle HTML5-Wrapper einwandfrei laufen, was bedeutet, dass Sie diese Geräte "out of the box" bereitstellen können. Wenn mehr webbasierte Telefone auf den Markt kommen, werden wir Phaser sicher auf dem Laufenden halten.
Es gibt eine riesige Auswahl an exzellenten Spieleentwicklungspaketen, die auf die Erstellung nativer Apps (Unity, Corona, Loom usw.) abzielen, so dass es nicht der Bereich war, in dem wir uns zunächst viel Mühe widmen wollten, insbesondere im Vergleich zu den Unterversorgten Markt für mobile Browser.
Mit der Entwicklung von Wrappern wie CocoonJS und Ejecta sehen Entwickler jedoch, wie Phaser ihre Spiele umschließt und als native Apps veröffentlicht. Im Jahr 2014 werden wir damit beginnen, die Unterstützung von CocoonJS direkt in den Kern zu integrieren, sowie die Unterstützung für Desktop-Wrapper wie node-webkit.
Wir werden einige der wichtigsten Eigenschaften von Phaser aus Sicht des Entwicklers hervorheben:
Das hört sich vielleicht nach einem seltsamen "Feature" an, sollte aber eigentlich recht fesselnd sein. Phaser verwendet intern keine Praktiken im OO-Stil. Es gibt keine massive Vererbungskette oder ein Komponentensystem, und Sie müssen Ihre Objekte auch nicht in eine feste Klassenstruktur zwingen. Es ist eine einfache, geradlinige Prototypkette, wie JavaScript verwendet werden sollte.
Dies bedeutet nicht, dass Sie Ihr Spiel nicht strukturiert aufbauen können. weit davon entfernt. Es bedeutet nur, dass wir das nicht tun erzwingen es. Es bedeutet auch, dass Phaser intern sehr leicht mit dem Computer zu hacken ist.
Aber ich mag TypeScript!
Gut, weil wir auch eine TypeScript-Definitionsdatei haben! Es gibt eine spezielle Anleitung zur Verwendung von Phaser mit TypeScript.
Phaser verfügt über einen integrierten Asset Loader, der Folgendes unterstützt:
Wir exportieren regelmäßig Textur-Atlas-Dateien von Flash direkt in unsere Phaser-Spiele und unterstützen vollständig zugeschnittene Atlanten. Assets können zum Teil geladen, zwischengespeichert und von verschiedenen URLs abgerufen werden (für CDN-Unterstützung). Sie können sogar jedes Sprite mit einer einzelnen Codezeile in eine Statusleiste umwandeln.
Intern verwendet Phaser Pixi.js zum Rendern. Pixi ist eine großartige, schnelle Rendering-Bibliothek, die sich auf Canvas und WebGL konzentriert. Es ist eine Bibliothek, die wir weiterhin dazu beitragen, die Dinge voranzutreiben.
Für Ihre Spiele bedeutet dies, dass, wenn der Browser WebGL unterstützt, der Player häufig ein flüssigeres Erlebnis bekommt. WebGL ist auf dem Desktop üblich, wird jedoch auf mobilen Geräten immer noch entwickelt. Trotzdem werden HTML5-Spiele in der Zukunft angesteuert. Daher ist die Unterstützung von entscheidender Bedeutung. Mit der neuesten Version von Phaser wurde die Unterstützung für WebGL-Shader und -Filter eingeführt. In Kürze werden normale Karten implementiert, sodass Sie von neuen Tools wie Sprite Lamp profitieren können.
Audio ist seit langem einer der Schwachpunkte von HTML-Spielen. Erst vor ein paar Jahren standen wir vor der Wahl, einen einzigen Kanal mit High-Latency-Audio zu verwenden, der das Gerät während der Wiedergabe lähmen würde oder überhaupt kein Audio hätte. Aber die Zeiten haben sich geändert und die Web Audio API kam zu unserer Rettung. Es ermöglicht die richtige Unterstützung von Knoten-basierten Audiosignalen mit mehreren Kanälen, Knoten-Routing und allen möglichen Effekten. Daher unterstützt Phaser Web Audio vollständig.
Vor allem unter Android unterstützen viele Geräte dies jedoch noch nicht. Daher unterstützen wir auch Legacy Audio und die Verwendung von Audio Sprites: Die Methode, eine Reihe von Samples in eine einzige Datei zu packen und mithilfe von Wiedergabemarken zu anderen zu springen Auswirkungen. Phaser wechselt je nach den Gerätefunktionen zwischen den beiden Geräten. Dazu gehört auch das automatische Entsperren des Audio-Subsystems, was viele mobile Geräte zum ersten Mal auffängt!
Bei der Unterstützung von Desktop und Mobile ergeben sich zunehmend unterschiedliche Eingabemöglichkeiten. Phaser unterstützt Tastatur, Maus, Touch, MSPointer (jetzt Pointer unter IE11) und Kombinationen davon. Auf Windows Surface-Geräten können Sie beispielsweise zwischen Maus und Berührung wechseln oder beides zusammen verwenden.
Für die Berührungseingabe ist Phaser sowohl für Single-Touch- als auch für Multi-Touch-Umgebungen geeignet. Sie können bis zu 10 Berührungspunkte definieren und sie alle unabhängig voneinander verfolgen. Verwenden Sie ihre Ereignisse, um Sprite-Interaktionen wie Ziehen, Tippen und Kollision auszuführen.
In der Kernbibliothek sind die Systeme ArcadePhysics und ArcadeParticles enthalten. Dies sind einfache AABB-Leichtbibliotheken, mit denen Sie Schwerkraft und Bewegung auf jeden Sprite anwenden und dann auf Kollision und Trennung testen können. Durch die Verwendung eines weltumspannenden Quadtrees zur Minimierung von Kollisionstests können Sie mit geringem Verarbeitungsaufwand schnell anständige Ergebnisse erzielen.
Wir verstehen jedoch, dass dies nicht für alle Arten von Spielen geeignet ist, sodass das Physiksystem leicht zu ersetzen ist und keine der physischen Eigenschaften an tatsächliche Sprites (sondern eher an eine Körperkomponente) gebunden ist mag Box2D oder p2.js. Darüber hinaus ist ein Tweening-System integriert, mit dem Sie Objekte oder Eigenschaften problemlos tweenen können. Sollte das Spiel pausieren, werden alle Ihre Tweens automatisch angehalten und bei Bedarf wieder aufgenommen.
Unser Ziel ist es, dass sich der Kern von Phaser irgendwann beruhigt und ein schönes stabiles Gleichgewicht erreicht, in dem wir wahrscheinlich nicht viel über Fixes und Browser-Updates hinausgehen. Wir möchten jedoch, dass Phaser weiter wächst und Features für alle Arten von Spielen zur Verfügung stellt, ohne dass jedoch die Kernbibliothek explodiert. Zu diesem Zweck haben wir ein Plugin-System eingebaut.
Phaser-Plugins können sich selbst beim Core-Framework registrieren, entsprechend der Core-Spieleschleife aktualisiert werden und alle möglichen nützlichen zusätzlichen Aufgaben ausführen. Ein gutes Beispiel dafür ist das kürzlich veröffentlichte Plug-In für die EasyStar-Pfadsuche. Wir werden selbst Plugins veröffentlichen und erwarten, dass in Zukunft mehr von der Community kommen wird.
Hier erfahren Sie, wo Sie Phaser herunterladen, wie Sie sich für die Entwicklung einrichten und wo Sie anfangen sollen.
Das Phaser-Projekt wird auf GitHub unter https://github.com/photonstorm/phaser gehostet. Es gibt zwei Hauptzweige: Master ist der Ort, an dem sich die neueste stabile Version befindet, und Dev ist der Ort, an dem die Work-in-Progress-Version erstellt wird. Sobald eine neue Version fertiggestellt ist, pushen wir von dev zu master und dann wird dev aktualisiert, um die nächste Version vorzubereiten. Wenn Sie nicht wissen, dass Sie den Dev-Zweig benötigen, sollten Sie immer mit Master beginnen.
Idealerweise sollten Sie git und checkout verwenden oder das Repository verzweigen, damit Sie es leicht aktualisieren können. Wenn Sie jedoch noch nicht so gut mit dem Git arbeiten, können Sie es auch mit einer ZIP-Datei des gesamten Repositorys herunterladen.
zusammenhängende Posts
Nach dem Download empfehlen wir Ihnen dringend, die offizielle Kurzanleitung zu befolgen. Dies führt Sie durch das Einrichten eines lokalen Webservers, die Auswahl einer Entwicklungsumgebung oder das Erstellen der Cloud, wenn Sie dies wünschen.
Die Anleitung gliedert sich in folgende Abschnitte:
Es gibt auch einen entsprechenden Leitfaden für TypeScript.
Wenn Ihre Entwicklungsumgebung eingerichtet ist, können Sie ein Spiel erstellen. Wir empfehlen, mit dem Tutorial Erste Phaser-Spiele beginnen zu beginnen. Es führt Sie durch den Prozess der Erstellung eines einfachen Plattformspiels, führt Sie in die grundlegenden Konzepte der Funktionsweise von Phaser ein und bereitet Sie darauf vor, das zu erweitern und mehr darüber zu erfahren.
Wenn Sie Phaser auschecken oder herunterladen, wird es mit unserer Examples-Suite geliefert. Dies ist eine in sich geschlossene Website, die aus über 170 verschiedenen Codebeispielen besteht, die nach Schlüsselbereichen unterteilt sind: Physik, Kollision, Sprites, Text und mehr. Jedes Beispiel ist ein voll funktionsfähiger, in sich geschlossener Code, den Sie öffnen, leicht bearbeiten und daraus lernen können. In Verbindung mit den API-Dokumenten können Sie schnell etwas über bestimmte Teile von Phaser lernen.
Die API-Dokumente sind im Phaser-Repository in verfügbar docs Mappe. Wir arbeiten seit einigen Monaten intensiv an den Dokumenten und sind, obwohl sie an den Rändern noch ein bisschen rau sind, jetzt umfassend und decken den gesamten Rahmen ab.
In der letzten Version (1.1.3) gab es ein weiteres großes Update, in dem viele Bereiche mit weiteren Details aufgefüllt wurden. Unsere ständige Aufgabe besteht darin, die Dokumentation mit jeder neuen Phaser-Version zu verbessern.
Seit Version 1.1.3 von Phaser wird das vollständige Framework vor der Veröffentlichung durch JSHint ausgeführt. Wir stellen unsere Konfigurationsdatei auch im Repository zur Verfügung.
Mit JSHint können wir sicherstellen, dass der Framework-Code einem festen Satz von Richtlinien für die Codestruktur folgt, von der Art, wie wir Registerkarten und Einrückungen verwenden, über Variablennamen und Anführungsstile. Wer zu Phaser beitragen möchte, sollte seine Updates mit unserer JSHint-Konfiguration abgleichen.
Wenn Sie diesen Artikel durchgearbeitet haben, werden Sie verstehen, warum Phaser so gut ist, was wir damit erreichen wollten und wie Sie lernen können, damit Spiele zu machen. Der wichtigste Aspekt eines Spiele-Frameworks sind jedoch nicht so sehr die Features oder technischen Demos, sondern die Community, die dahinter steht.
Ein Spiel zu machen ist harte Arbeit, Punkt. Es ist noch schwieriger, dies mit einem brandneuen Rahmen zu tun, der mit Sicherheit ganz anders funktioniert als alles, was Sie bisher verwendet haben. Zum Glück hat Phaser eine blühende Gemeinschaft, die sich darauf konzentriert.
Wir haben vor kurzem das HTML5 Game Devs-Forum eingerichtet, nicht speziell für Phaser, sondern einfach deshalb, weil das Erstellen von HTML5-Spielen ein so neuer Bereich war, dass wir mit anderen darüber reden wollten. Seitdem hat es sich mit aktiven Boards, 250.000 Views pro Monat und einer freundlichen und professionellen Benutzerbasis von Stärke zu Stärke entwickelt.
Es machte Sinn, dass wir dies als offizielles Zuhause für Phaser nutzen würden, und Sie werden dort viele freundliche Kollegen finden, um Ideen und Fragen abzulösen. Das Forum beherbergt auch andere großartige Bibliotheken, darunter Pixi.js und das 3D-Framework Babylon.js, und es gibt einen großartigen Games Showcase-Bereich, in dem Sie alles zeigen können, was Sie jeden Tag dort vorbeischauen Es ist wirklich großartig zu sehen, was Entwickler heutzutage mit HTML5 erreichen.
Der Phaser-Newsletter erscheint einmal im Monat und enthält Details zu neuen Releases, Kurzartikeln zu neuen Phaser-Themen sowie Plugins und Tutorials. Das Abonnement ist natürlich kostenlos und wird über Campaign Monitor verwaltet. So können Sie sicher sein, dass kein Spam vorhanden ist und Sie den Newsletter jederzeit problemlos abbestellen können.
Sie können mithelfen, wie Phaser wächst. Wenn Sie einen Fehler finden, melden Sie ihn bitte. Es dauert nicht lange und bis jetzt haben wir über 91% aller gemeldeten Probleme behoben (und wir arbeiten immer noch an den anderen 9%). Sie können auch Pull-Anforderungen an den Entwicklungszweig ausgeben oder eigene Plugins oder Filter freigeben.
Wir haben viele unermüdliche Stunden damit verbracht, an Phaser zu arbeiten, weil wir wollen, dass es das beste Framework für die Entwicklung von HTML5-Spielen ist, das es sein kann. Wir verstehen, dass es nicht für jeden perfekt ist, und wir sind cool damit. Aber wenn Sie es verwenden und etwas herstellen, egal wie klein Sie denken, lassen Sie es uns wissen. Sie glauben nicht mit einem echten Motivationsschub, wenn Entwickler uns die Spiele zeigen, an denen sie gearbeitet haben! Kontaktieren Sie uns entweder im Forum, über Twitter (@photonstorm) oder per E-Mail.
Vor allem hoffen wir aber sehr, dass Sie Spaß daran haben, Ihr Spiel zu gestalten.
Accentsconagua