Detaillierte Einführung in 5 Vorschläge für die Entwicklung von HTML5-Spielen und die gemeinsame Nutzung von Entwicklungstools

Wenn Sie ein Spiel auf Basis von HTML5 entwickeln, haben Sie viele Möglichkeiten. Welchen Editor soll ich verwenden? Werden Canvas 2d und WebGL verwendet? Welches Rendering-Framework und welche Spiel-Engine werden verwendet? Diese Entscheidungen werden weitgehend von der persönlichen Erfahrung des Entwicklers und der Plattform, auf der das Spiel veröffentlicht wird, bestimmt.

Glücklicherweise gibt es mittlerweile viele Anleitungen zur HTML5-Spieleentwicklung. Dieser Artikel soll Entwicklern einige allgemeine Konzepte vermitteln, die sie vor der Entwicklung von HTML5-Spielen haben sollten. Was können Sie aus diesem Artikel lernen? Hier stellen wir einige Frameworks für die HTML5-Spieleentwicklung vor. Sie erfahren, wie Sie die Ausführung der von Ihnen entworfenen Spiele auf mehr Plattformen ermöglichen, wie Sie den Status von Online-Spielen verwalten und wie Sie mit Leistungsproblemen umgehen.

Lassen Sie mich ohne weitere Umschweife einige praktische Vorschläge für die HTML5-Spieleentwicklung vorstellen.

Vorschlag 1: Verwenden Sie ein Framework

Es ist sehr einfach, nur ein paar kleine Programme in HTML5 zu schreiben, aber wenn Sie Ihrem Spiel umfangreichere Funktionen hinzufügen möchten, müssen noch viele andere Dinge erledigt werden behandelt werden.

Wenn Ihr Spiel beispielsweise viele Bilder, Soundeffekte oder andere Ressourcen enthält, muss der Browser diese Ressourcen von Ihrem Spieleserver herunterladen, was oft viel Zeit in Anspruch nimmt. Wenn Sie diese Aspekte beim Schreiben eines Programms nicht berücksichtigen, werden Sie möglicherweise von den Endergebnissen überrascht sein. Da Grafik- und Sounddateien asynchron heruntergeladen werden, beginnt Ihr JavaScript-Skript möglicherweise mit der Ausführung, bevor Ihre Ressourcen heruntergeladen wurden. Dies wird als „Popping“ (Anomalie der Bildanzeige) bezeichnet und der Ton wird möglicherweise auch zur falschen Zeit abgespielt. Eine gute Lösung besteht darin, einen Pre-Download-Mechanismus zu erstellen, um sicherzustellen, dass alle Ressourcen heruntergeladen werden, bevor die Skriptausführung zugelassen wird.

Ein weiteres Problem, auf das Sie möglicherweise stoßen, besteht darin, dass Ihr Spiel auf verschiedenen Computern oder sogar Browsern mit unterschiedlicher Geschwindigkeit läuft. Auch wenn dies möglicherweise außerhalb Ihrer Kontrolle liegt, können Sie dennoch versuchen, die Geschwindigkeit Ihrer Animationen oder Aktionen nicht von der Geschwindigkeit des laufenden Frameworks des Spiels abhängig zu machen.

Tatsächlich gibt es mittlerweile viele Spielvorlagencodes, die die von den meisten Spielen benötigten Funktionen implementieren. Auf diese Weise müssen Entwickler kein komplettes Spiel von Anfang bis Ende programmieren. Mittlerweile gibt es viele Frameworks, die Entwicklern beim Entwerfen von Spielen helfen können. Entwickler müssen sich nur auf die spezifische Spiellogik konzentrieren, ohne sich um die Details zu kümmern, wie das Spiel reibungslos läuft.

Das Einzige, worauf Sie bei der Verwendung eines Frameworks achten müssen, ist, wie Sie aus vielen Frameworks ein geeignetes Framework auswählen. Frameworks wie ImpactJS sind sehr leistungsfähig und können Entwicklern in fast allen Aspekten helfen, während Frameworks wie EaselJS sich hauptsächlich mit Grafikarbeiten befassen. Letztendlich liegt es am Entwickler, zu entscheiden, welches Framework besser geeignet ist. Das mag einfach erscheinen, aber in der Welt von JavaScript bedeutet die Wahl eines Frameworks auch, dass Sie sich für einen bestimmten Programmierstil entscheiden.

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
}

Monster=ig.Entity.extend({eyes : 42});});ImpactJS ist ein gutes Beispiel. Es bietet nicht nur Bildanzeige- und Soundeffektverarbeitungsmethoden, sondern implementiert auch Ihre eigene Objekte und Modelle hinein.

Ascended Arcade hat in drei Monaten drei Spiele auf den Markt gebracht, die alle das ImpactJS-Framework verwenden

Obwohl es bereits viele HTML5-Spiele gibt, die es verwenden, gibt es einige Frameworks, Dennoch gibt es immer noch viele Entwickler, die sich die Mühe machen, sich nicht auf ein Framework zu verlassen und komplett selbst zu entwickeln. Wenn Sie eine Aufgabe in angemessener Zeit erledigen möchten, ist die Verwendung eines Frameworks sicherlich die effizienteste Möglichkeit, dies zu tun. Ascended Arcade ist ein gutes Beispiel. In nur drei Monaten haben sie drei Spiele entwickelt, die alle das ImpactJS-Framework verwenden.

Empfehlung 2: Berücksichtigen Sie kleine Bildschirme und Touchscreen-Geräte

Eines der größten Verkaufsargumente von HTML5 ist, dass es auf Desktop-PCs, Laptops, Tablet-Geräten verwendet werden kann und sogar ausgeführt werden kann auf Smartphones. (Hier ist eine Demonstration des Laufeffekts von IE9 auf Windows Phone 7 Mango).

HTML5 ist von Natur aus plattformübergreifend, was Entwicklern normalerweise viel Arbeit erspart. Es gibt jedoch einige Dinge, die Entwickler berücksichtigen müssen...

Der Laufeffekt von SpyChase auf Windows Phone 7 Mango

Erstens und am wichtigsten ist, dass auch die Bildschirmgrößen verschiedener Geräte unterschiedlich sind und das Seitenverhältnis und die Auflösung des Bildschirms sehr unterschiedlich sein können. Wenn Sie möchten, dass Ihr HTML5 auf Mobilgeräten gut aussieht, stellen Sie sicher, dass es mehrere Auflösungen unterstützt und die Bildgröße von WVGA von 800 x 480 nicht überschreitet. Da die meisten Mobilgeräte außerdem nicht den gesamten Seiteninhalt auf einem Bildschirm anzeigen können, verwenden sie häufig präzise Zoom- und Schwenktechniken, die für das Schreiben von Spielen oft nicht geeignet sind. Diese Funktionen können programmgesteuert mithilfe des Viewport-Meta-Flags deaktiviert werden. Mit dem folgenden Codeausschnitt können Sie dafür sorgen, dass sich Ihre Spielansicht automatisch an die tatsächliche horizontale Breite des Bildschirms anpasst. Die Zoomfunktionalität in mobilen Browsern steht häufig im Konflikt mit der Touch-Spielsteuerung und kann deaktiviert werden, indem der Parameter „Benutzerskalierbar“ auf „Nein“ gesetzt wird.

Da Sie nun in der Lage sind, Ihre Spielansicht auf Geräten mit kleinem Bildschirm gut darzustellen, ist es an der Zeit, darüber nachzudenken, wie Sie mit Benutzereingaben umgehen. Die meisten Touchscreen-Geräte verfügen über eine virtuelle Tastatur, aber die Anzeige einer solchen beim Spielen ist Platzverschwendung. Sie sollten eine begrenzte virtuelle Tastatur entwickeln, die nur im Spiel verwendete Tasten (z. B. Pfeile) bereitstellt. Natürlich ist es am besten, so wenig zusätzliche Elemente wie möglich in Ihrem Spiel zu haben. Spy Chase leistet in dieser Hinsicht hervorragende Arbeit und ermöglicht es Benutzern, die Autos im Spiel mit nur einem Finger zu steuern.

Empfehlung 3: Benutzerdatensätze automatisch speichern

Mithilfe von Site-Pinning versuchen Webbrowser, Web-Apps wie Desktop-Apps funktionieren zu lassen. Allerdings ist die Idee, Websites wie Apps laufen zu lassen, noch relativ neu, und ebenso ist die Idee, Webseiten den Zustand auf der Clientseite speichern zu lassen, noch nicht ausgereift. Beim Schließen eines Microsoft Word-Dokuments denken Benutzer möglicherweise darüber nach, ob der Inhalt gespeichert wurde. Beim Schließen einer Webseite denken sie jedoch oft nicht so sorgfältig nach. Normalerweise stellt dies kein Problem dar – die meisten Webseiten sind zustandslos oder speichern Benutzerdatensätze auf dem Server.

Aber wenn man es mit Browsergames zu tun hat, ist die Situation völlig anders. Normalerweise wird JavaScript-Code auf der Clientseite ausgeführt, und HTML5-Spiele speichern den Spielstatus normalerweise im Speicher (RAM). Sobald das Browserfenster geschlossen wird, gehen die Highscores, die der Benutzer so hart erarbeitet hat, für immer verloren.

Sie können den Benutzer bitten, darauf zu achten, das laufende Spielfenster nicht zu schließen, aber es passieren immer Unfälle, insbesondere wenn der Benutzer mehrere Fenster geöffnet hat oder der Akku leer ist.

Lange Rede, kurzer Sinn: Beim Schreiben von HTML5-Spielen ist es am besten, den Fortschrittsstatus des Spielers regelmäßig zu speichern. Wenn der Benutzer die geschlossene Webseite erneut öffnet, sollte der Benutzer in der Lage sein, das unvollendete Spiel fortzusetzen, anstatt von vorne zu beginnen . War hier.

Wo sollten Sie Benutzerdatensätze speichern? In der Vergangenheit war die Antwort oft eine serverseitige Datenbank oder ein clientseitiges Cookie. Aber keines davon ist die beste Wahl. Wenn es serverseitig erfolgt, entsteht zusätzlicher HTTP-Anfrage-Overhead. Bei Cookies ist der Speicherplatz, auf dem der Datensatz gespeichert werden kann, sehr begrenzt und die Lebensdauer des Cookies hängt von der Browserkonfiguration ab.

Eine effizientere Methode ist die Verwendung von HTML5-DOM-Speicher. DOM Storage bietet eine Schnittstelle für die Speicherung von Schlüsselwerten (oder JavaScript-definierten Objekten), die mehrere Megabyte an Daten für jede Website speichern kann. Die Verwendung ist sehr praktisch, aber in HTML5-Spielen möchten Sie möglicherweise einige komplexere Datenstrukturen aufzeichnen, die der DOM-Speicher möglicherweise nicht nativ unterstützt. Glücklicherweise bietet JavaScript jetzt einen Mechanismus, der Entwicklern hilft, eine Reihe von Objekten in einige kompakte Symbole zu komprimieren, nämlich den JSON-Mechanismus. Mit diesem Mechanismus kann der DOM-Speicher Informationen in jedem Format speichern. Die folgenden beiden Funktionen zeigen, wie man den Spielstatus mithilfe von HTML5-DOM-Speicher und der JSON-Funktionalität in ECMAScript5 speichert:

functionsaveState(state) { 
    window.localStorage.setItem("gameState", JSON.stringify(state)); 
} 
functionrestoreState() { 
    varstate =window.localStorage.getItem("gameState"); 
    if(state) { 
        returnJSON.parse(state); 
    }else{ 
        retrun null; 
    } 
}

Empfehlung 4: Profiler verwenden

Die größte Herausforderung bei der Spieleentwicklung liegt in After Durch das Hinzufügen vieler Funktionen können Sie sicherstellen, dass das Spiel immer noch eine hohe Bildfrequenz aufweist.

Die gute Nachricht ist, dass Browser in den letzten Jahren immer schneller geworden sind und Spiele auf HTML5-Basis bereits 60 Bilder pro Sekunde erreichen können.

Das ist ziemlich erstaunlich. Für IE9 bedeutet dies die Entwicklung einer neuen JavaScript-Engine, die mehrere CPU-Kerne und eine Direct2D-basierte Hardware-Rendering-Pipeline nutzen kann. Mit anderen Worten: Wenn Sie über eine hochkonfigurierte Spieleplattform verfügen, kann IE9 diese Hardwareplattformen vollständig nutzen.

IE9 integriert einen JavaScript-Profiler, um Leistungsengpässe zu finden

Bei einfachen Spielen bedeutet dies, dass Sie sich keine Sorgen um die Leistung machen müssen. Da HTML5 jedoch auf jeder Plattform ausgeführt werden kann, bedeutet dies, dass das von Ihnen entwickelte HTML5-Spiel auf jedem Gerät oder Browser ausgeführt werden kann, von denen einige möglicherweise nicht über die von Ihnen gewünschte Verarbeitungsleistung verfügen. Auch wenn Ihre Anwendung nur auf Hochleistungs-PCs ausgerichtet ist, ist die Spieleleistung ein Aspekt, der berücksichtigt werden muss.

Wenn Ihr Spiel 60 Bilder pro Sekunde erreichen soll, bedeutet dies, dass die Renderzeit jedes Bildes 16 Millisekunden nicht überschreiten darf. Mit anderen Worten: Sie müssen im Handumdrehen mindestens 6 Frames der Renderarbeit abschließen. Es mag jetzt vielleicht etwas unvorstellbar klingen ... aber es gibt einige außergewöhnliche Spiele, die es tatsächlich schaffen.

Glücklicherweise gibt es einige Tools, die Ihnen möglicherweise helfen können. Unter IE9 (oder IE10) können Sie das Entwicklungstools-Panel öffnen, indem Sie die Taste F12 drücken. Wählen Sie die Option „Profil“ und aktivieren Sie dann „Profilerstellung starten“.

Bleiben Sie nun 30 Sekunden lang an der Stelle, an der Ihrer Meinung nach die Leistung verbessert werden muss. Der Profiler sammelt relevante Daten und wählt dann „Profilerstellung stoppen“. Sie sehen die kumulierte Ausführungszeit für jede Funktion in Ihrem Spiel. Oft werden Sie feststellen, dass bestimmte Funktionen die meiste Zeit in Anspruch nehmen. So können Sie besonders zeitintensive Funktionen gezielt optimieren.

Vertrauen Sie nicht zu sehr Ihrem Instinkt – manche Codes sehen möglicherweise ineffizient aus, werden aber auf einigen JavaScript-Engines sehr schnell ausgeführt. Der beste Weg besteht darin, das Programm von Zeit zu Zeit wiederholt zu analysieren. Sie müssen ihn wiederholt testen, um sicherzustellen, dass Ihre Änderungen tatsächlich die Leistung des Programms verbessern können.

Spiele werden immer sozialer: Warimals ist ein auf HTML5 basierendes Spiel, Nutzer können mit Freunden auf Facebook am Spiel teilnehmen

Empfehlung 5: Seien Sie kreativ!

Es ist großartig, Spiele entwickeln zu können, die im Browser laufen, und was noch cooler ist, ist, dass Sie HTML5 verwenden können, um Spielanwendungen im Browser zu entwickeln! Aus technischer Sicht ist HTML5 großartig und der Browser eine ideale Spieleplattform.

Denken Sie darüber nach ... es gibt Browser auf allen möglichen Geräten, sie sind oft ständig online und werden von den Menschen für E-Mails, Chats und soziale Netzwerke verwendet. Browsergame-Entwickler können ihre Spiele nutzen, um Menschen aus der ganzen Welt miteinander zu verbinden.

Als HTML5-Spieleentwickler müssen Sie viele coole Entwicklungstools kennen. In der Mozilla-Community haben wir viele Entwicklungstools für Firefox-Entwickler eingeführt, darunter JavaScript-Debugger, Style-Editor, Seiteninspektor, Scratchpad und Profiler , Netzwerkmonitor und Webkonsole.

Im Folgenden werden weiterhin einige Tools für die HTML-Spieleentwicklung vorgestellt.

Canvas-Debugger

In der neuesten Version von Firefox haben wir Canvas-Debugging im Browser hinzugefügt. Mit dem Canvas Debugger können Sie alle Canvas-Kontextaufrufe verfolgen, z. B. das Zeichnen von Elementen und die Verwendung bestimmter Coloristen, und er ruft die Farbcodierung basierend auf bestimmten Anforderungen auf. Es ist nicht nur nützlich bei der Entwicklung von WebGL-basierten Spielen, sondern kann auch zum Testen von Canvas 2D-basierten Spielen verwendet werden. Im Spiel unten können Sie sehen, dass die Animation in viele statische Bilder unterteilt ist, und Sie können auf eine beliebige Zeile klicken, um die Reaktion dieses Teils direkt zu sehen.

Shader-Editor

Wenn Sie ein Spiel basierend auf WebGL erstellen, wäre es sehr cool, das Shader-Programm während des Spiels testen und ändern zu können läuft Eine Sache. Mit dem Shader-Editor können Sie so coole Dinge tun. Sie können Vertex- und Fragment-Shader ändern, ohne die Schnittstelle neu laden zu müssen, und die Auswirkungen auf die Ausgabe sehen.

Web-Audio-Editor

In der Firefox Aurora (32)-Version gibt es einen Web-Audio-Editor, der die Verbindungen zwischen allen Audioknoten und dem aktuellen AudioContext durch Diagramme anzeigt. Sie können damit spezifische Eigenschaften jedes Knotens anzeigen. Die Web-Audio-API ermöglicht die Erstellung weiterer Mischungen und die Bedienung und Verarbeitung von Audio ist viel leistungsfähiger als das HTML5-Audio-Tag.

Netzwerkmonitor

Für HTML5-Spieleentwickler ist teurer Code erforderlich, um langwierige Tests des Spiels durchzuführen. Wenn das Spiel auf einem mobilen Gerät läuft, können Sie mit Network Monitor alle Netzwerkanfragen, den Systemzeitverbrauch, die Schriftgröße und andere Attribute visuell anzeigen.

Darüber hinaus können Sie die Leistungsanalyse des Spiels auch visuell über Network Monitor einsehen.

Web-IDE

Bevor Sie ein Spiel entwickeln, müssen Sie zunächst eine Entwicklungsumgebung auswählen. Ebenso haben Sie viele Möglichkeiten (Sublime, Eclipse, Dreamweaver, vi usw.). Sie verfügen bereits über eine häufig genutzte Entwicklungsumgebung. Wenn Sie an einer browserseitigen Entwicklungsumgebung interessiert sind, können Sie die Web-IDE ausprobieren, die bereits in der neuesten Version von Firefox verfügbar ist.

Web IDE bietet Entwicklern nicht nur normale Codierung, sondern auch Remote-Veröffentlichung, Debugging, Framework-Verwaltung usw.

Das Obige ist eine detaillierte Einführung in die fünf Vorschläge für die Entwicklung von HTML5-Spielen und die gemeinsame Nutzung von Entwicklungstools. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!