Der komplette Führer zum Gebäude HTML5 Spielen mit Canvas und SVG - Sitepoint
Aber warum sind so viele Menschen, die derzeit interessiert in HTML5 Gaming?
Nun, einfach deshalb, weil heute können wir wirklich HTML5 nutzen Multi-Plattformen zielen auf den gleichen Code verwenden: für Desktop-Maschinen natürlich (mit IE9 / IE10, Firefox, Chrome, Opera und Safari), für iOS und Android-Tablets und Handys und Windows 8 (und seine Zukunft Millionen von Tabletten und PCs verbunden sind, auch einladend warm HTML5-Spiele! ich dann oft einige HTML5-Gaming-Projekte auf jede dieser Plattformen mit nahezu ohne Aufwand portiert sehen.
Hinweis: Wir werden nur über das sprechen
Canvas und SVG: zwei Möglichkeiten, um auf dem Bildschirm zu zeichnen
Das erste, was Sie verstehen müssen, bevor Sie Ihr erstes HTML5-Spiel baut, ist, wie schön Objekte auf dem Bildschirm zu zeichnen. Es gibt zwei Möglichkeiten, dass und besser zu verstehen, ihre Differenzen zu tun, sollten Sie durch diesen Artikel liest von Patrick Dengler (Mitglied der SVG W3C Working Group) beginnen: Gedanken, wenn Canvas und SVG zu verwenden.
Sie sollten auch bei diesen beiden großen Sitzungen von MIX11 aussehen:
Wenn Sie alle diese Inhalte überprüft haben, werden Sie wahrscheinlich besser verstehen, warum fast alle HTML5-Spiele-Leinwand verwenden statt SVG. Canvas bietet ein bekanntes Entwicklungsmodell für Spiele-Entwickler (Low-Level-APIs Zeichnung) und ist jetzt sehr gut hardwarebeschleunigte von den meisten der neueren Browser. Noch SVG, und seine Vektoren basierende Technologie, ist natürlich bewaffnet bessere Geräte zu skalieren über, ohne an Qualität einzubüßen. Sie müssen nur die Magie ViewBox Eigenschaft von SVG verwenden, die das für Sie behandelt. Ihre Spiele Vermögenswerte werden dann von 3 'bis 80' Bildschirme auf sehr einfache Art und Weise Maßstab!
Manchmal ist es sogar möglich, die exakt gleiche Spiel mit beiden Technologien zu erreichen. Zum Beispiel ist hier das gleiche einfache Spiel ersten SVG dann Canvas: SVG Racquetball und Canvas Racquetball. Sie kamen beide aus dieser MSDN-Dokumentation: Programmierung Einfache Spiele unter Verwendung der Leinwand oder SVG.
Aber nichts hindert Sie daran, beide Technologien zu mischen. Tatsächlich könnten wir durchaus vorstellen, eine erste Schicht auf SVG basiert Verwendung mit einer zweiten Schicht im Hintergrund die Spielmenüs angezeigt werden eine Leinwand für das Spiel mit sich. Sie werden dann verwenden, was wir den Browser-Compositing-Engine nennen. Allerdings müssen Sie echte Aufmerksamkeit auf Endleistung Ergebnisse bezahlen, weil der Browser und Geräte sind weit davon entfernt, das in dieser Domäne entspricht. Vergessen Sie nicht, dass das Hauptinteresse von HTML5 ist es, alle Plattformen zielen.
Nützliche Bibliotheken und Tools
Das Schreiben des XML-Knoten von SVG manuell oder auch mit dem niedrigen Leveln-APIs von Canvas spielen könnte Spaß machen, für einen Moment, aber nicht sehr produktiv. Hier ist dann eine Reihe von nützlichen Tools und Bibliotheken Ich mag, dass helfen könnten Sie Teile Ihres HTML5-Spiel bauen.
Um etwas SVG zu generieren. hier sind ein paar coole Tools:
- InkScape. eine freie und Open-Source-Desktop-Software
- SVG-Editor. eine Online-Software direkt in Ihrem Browser ausgeführt werden
Adobe Illustrator unterstützt auch SVG als Exportziel, aber es ist ein bisschen teurer. ;-)
Wenn Sie für Ihr Spiel Vermögen (für Menüs oder Kontrollen), sollten Sie einen Blick auf diese kostenlose Icons Bibliothek. Die Noun Project. Also, wenn Sie nicht das Glück haben, mit einem Designer zu arbeiten, könnte es sparen Sie. Es gibt eine andere Bibliothek mit einigen Inhalten kostenlos SVG auch hier: Open Clip Art Library.
Physik-Engine
Natürlich ist weit von Grafiken Anzeige der einzige Aufgabe, die du in einem Spiel tun müssen. Es gibt auch die KI (Künstliche Intelligenz), die Sie brauchen, um Code Leben zu Ihrem Zeichen zu bringen. Leider müssen Sie das allein kodieren und kreativ sein. Aber Sie werden uns freuen, Sie wissen nicht über die Physik und Kollisionen Teil des Spiels kümmern müssen. Einfach zu lernen, wie Box2D JS zu verwenden. Gehen Spiel mit den verschiedenen Proben und Sie werden staunen:
Der Umgang mit den Multi-Touch-Ereignisse
Wenn Sie ein Cross-Geräte Spiel aufbauen mögen, werden Sie Touch unterstützen müssen. Derzeit gibt es zwei bestehende Spezifikationen rund um Touch-Events. So gibt es keinen offiziellen Standard eines noch. Wenn Sie möchten, dass ein bisschen mehr darüber wissen, warum, hier ist ein interessanter Artikel: Erster Touchy über Patente
Sie müssen Code schreiben, der in IE10 und Windows 8 sowie bei der Umsetzung kommt von den Apple-Geräten gut funktioniert. Dafür sollten Sie auf jeden Fall einen Blick auf dieses Beispiel haben ein mögliches Muster zeigen beide Art von Touch-Ereignisse zu unterstützen: Finger Painting und der damit verbundenen Artikel: Umgang mit Multi-Touch-und Mauseingabe in allen Browsern. Aber wenn Sie bei der Prüfung interessant sind, wie weit man jetzt durch den Umgang mit Multi-Touch-innen IE10 gehen kann, testen Sie diese coole Demo: Browser-Oberfläche. Sie werden es läuft eine aktuelle Version IE10 und Multi-Touch-Hardware benötigen.
Boris Smus hat damit begonnen, für seinen Teil der Arbeit an einer Bibliothek mit dem Namen Pointer.js. Die Idee ist, alle Arten von Touch (IE10, iOS wie, Maus und Stift) zu konsolidieren, um den Entwickler des Leben zu vereinfachen. Generali Eingang auf der Cross-Device-Bahn: Sie können seinen Artikel über das hier lesen. Derzeit ist die Bibliothek nur ein Entwurf und noch nicht die MSPointer * von IE10 unterstützt. So fühlen sich frei, um das Projekt beitragen, ihm zu helfen! (Ich habe geplant, um zu versuchen, ihm zu helfen, wenn ich etwas Zeit habe)
Gebäude verbunden Spiele
Wenn Sie möchten, zu einem Server aus irgendeinem Grunde verbunden Multiplayer-Spiele oder einfach nur um ein Spiel zu bauen, werden Sie natürlich bei der Verwendung WebSockets interessieren. In dieser W3C-Spezifikation (und das von der IETF behandeln zugrunde liegende Protokoll) ist in der Tat stabil genug, um in der Produktion eingesetzt werden, zu starten.
Aber wenn Sie möchten, dass die größtmögliche Anzahl von Benutzern unterstützen, müssen Sie einen Rückfall für Browser oder Geräte berücksichtigen, die nicht WebSockets noch oder unterstützen eine ältere, veraltete Version unterstützt. Wir könnten wie automatisch von Lösungen träumen zu einer älteren Methode des Pooling oder lange Pooling für Browser wie Internet Explorer 9 zurückzufallen, und Sockets neue Browser wie IE10 Internet anbietet. Und ja, könnte es möglich sein, auch einen einzigartigen Code, die Handhabung zu haben?
Nun, aufhören zu träumen: die Gemeinde es geschafft. Es gibt zwei Lösungen, die ich weiß, dies zu tun:
- die Socket.IO Bibliothek für Node.js
- SignalR Arbeiten auf der Oberseite IIS und ASP.NET
Beide Bibliotheken helfen Ihnen, alle mit ihrer Vielfalt von Support-Levels, die Browser und Geräte zu handhaben.
Einige Spiele-Frameworks
Um ein 2D-HTML5-Spiel zu bauen, gibt es einige Dinge, die Sie brauchen zu kümmern:
1 - Umgang mit Ihren Sprites. sie in eine Sequenz spalten, sie, Effekten animieren, usw.
2 - Umgang mit Ihren Sounds und Musik (und das ist nicht immer einfach in HTML5!)
3 - Laden asynchron Ihr Vermögen vom Web-Server über einen dedizierten loader / Vermögensverwalter
4 - Aufbau einer Kollision Motor. eine hohe Logik für Ihr Spiel Objekte usw.
Nun, man kann entweder tun, dass von Grund auf neu oder Sie können testen und überprüfen, was andere brillante Entwickler haben bereits im Web gemacht. Ich würde auf jeden Fall empfehlen die zweite Option zu nehmen, wie die JS-Gaming-Frameworks wirklich reifen beginnen und in den Spielen in der Produktion getestet werden.
Da es eine Tonne von JS-Gaming-Frameworks auf dem Netz ist (na ja, es gibt eine Tonne von etwas tatsächlich Js), hier ist die bekannteste Frameworks HTML5 2D-Spiele zu bauen innerhalb all Browser arbeiten:
- MelonJS. ein freies Framework, das viele nützliche Dienste verfügbar macht. Sein großer Vorteil ist, dass es mit dem Fliesen Map-Editor-Tool funktioniert gut.
- CraftyJS, dass ich leider nicht wissen, sehr gut
- ImpactJS. eine hohe Qualität bekannten Rahmen. Es ist nicht kostenlos, aber nicht zu teuer.
- EaselJS. mein Lieblings! Geschrieben von einem alten Entwickler Flash. Also, wenn Sie einige Spiele in Flash geschrieben haben, sollten Sie zu Hause mit diesem Rahmen fühlen. Es ist Teil der CreateJS Suite. Es ist sehr komplett, gut dokumentiert und ... kostenlos.
Also, sollten Sie jetzt gewarnt. Als EaselJS der Rahmen, den ich am meisten weiß, ist, werde ich nicht unparteiisch sein. Es liegt an Ihnen, die anderen zu testen und Ihre eigene Meinung bilden.
Einige Anfänger-Tutorials
Einige Monate später habe ich drei weitere Artikel zu verbessern / das gleiche Spiel erstreckt:
- Tutorial: wie HTML5-Anwendungen auf Windows Phone dank PhoneGap zu schaffen, in dem ich Ihnen zeigen werde, wie Hafen, um das gleiche Spiel auf Windows Phone dank PhoneGap / Cordova. Aber Sie werden in der Lage den gleichen Anweisungen für Ihr Android oder iOS-Gerät zu folgen.
- Ein moderneres HTML5-Canvas-Spiele Teil 1: Hardware-Skalierung und CSS3, wo wir CSS3 3D-Transform verwenden werden, Transitions und Grid-Layout um das Spielerlebnis zu verbessern
- Ein moderneres HTML5-Canvas-Spiele Teil 2: Offline-API, Drag'n'Drop und File API, wo wir das Spiel im Offline-Modus zu spielen ermöglicht. Sie werden sogar in der Lage sein, um eigene Levels zu erstellen und diese direkt in das Spiel Drag'n'Drop.
Nach ihnen zu folgen, werden Sie dieses Spiel bauen:
Nun, logisch, dank dieser sechs Tutorials, sollten Sie in der Lage sein, eigene HTML5-Spiel zu schreiben, was auch immer der Browser oder das Gerät Sie Targeting.
Abschließend möchte ich Ihnen noch zwei weitere „Advanced“ Artikel empfehlen, aber sehr lehrreich zu lesen. Die erste ist von David Catuhe von Microsoft geschrieben: Entfesseln Sie die Leistung von HTML 5 Canvas für Spiele. Er wird einige Optimierungen mit Ihnen teilen, er gefunden hat, während auf einer „Demo“ wie die arbeiten wir in der „Demoszene“ zu schreiben. Die Spitzen gefunden könnten Sie ein paar Ideen für die eigene HTML5-Spiele bringen. Die zweite ist geschrieben wieder von Boris Smus von Google: Verbesserung der HTML5 Canvas Leistung und es enthält eine Menge guter Ratschläge.
Einige interessante Online-Arbeitsspiele und Erfahrung Feedbacks
Auch dies ist mein persönlicher Favorit. Sie werden wahrscheinlich andere coole Beispiele im Web zu teilen. Was auch immer das Spiel, das Sie mögen, ist es interessant zu untersuchen, wie die Entwickler sie gemacht haben. Dank der Magie der Bahn, müssen Sie nur auf der rechten Maustaste und „Quelltext anzeigen“. Auch wenn der Code wahrscheinlich minimierte wird, können Sie immer noch ein paar interessanten Dinge durch auf der globalen Architektur des Spiels.
Lassen Sie uns von einigen Produktionen starten Sie den EaselJS Framework. Die erste wurde Pirates Liebe Gänseblümchen von Grant Skinner geschrieben:
Zuschuss hat seine EaselJS Rahmen beim Aufbau dieses HTML5 Spiel gestartet.
Windows 8 Anmerkung: Sie werden bemerken, werden Sie das gleiche Spiel arbeiten in Windows 8 im Windows Store finden Sie hier: Piraten-Liebe Gänseblümchen für Windows 8. Tat, wenn Sie ein HTML5-Spiel haben adaequat innen IE9 oder IE10, den Bau der Windows 8-Version ist fast nur eine einfache Kopie tun und einfügen! Das Spiel wird dann arbeiten direkt in der Windows 8 App-Erlebnis. Aber ein wirklich gutes Windows 8 Spiel zu machen, haben Sie auch die Aufmerksamkeit auf die einzigartige Windows 8 Erfahrung zu zahlen wir bauen. Dies wird hier beschrieben: Designing tolle Spiele für Windows
Ein weiteres Spiel EaselJS verwendet, ist BKOM Roboter Spiel, das 3D-Sprites verwendet Ich liebe:
Die beiden derzeit bekanntesten HTML5-Spiele sind natürlich Angry Birds (die Box2D Bibliothek verwendet ich oben war zu erwähnen):
Sie finden auch eine Windows 8-Version davon im Windows Store finden Sie hier: Cut The Rope für Windows 8
Es war sehr einfach zu portieren in Windows 8 Hier ist der Prozess:
1 - Kopieren / Einfügen der Web-Version in ein HTML5-Stil App-Projekt für Windows 8
2 - Hinzufügen von Unterstützung für Touch
3 - Hinzufügen von Unterstützung für die gerissenen Ansicht und das Spiel pausieren
4 - Erstellen Sie einige Hohe Auflösung Vermögenswerte (1366 × 768 und 1920 × 1080), um die beste Erfahrung für alle eingehenden Windows 8 Tablets und PC vorzuschlagen.
Ich liebe auch die Geschichte um „Cut The Rope“. Es ist sehr interessant zu lesen. Dies war ein erfolgreiches Spiel geschrieben in Objective-C für die Apple iOS-Geräte. Es wurde in HTML5 / Canvas und die Entwickler portiert, die dieses Detail ihr Feedback in diesem Artikel gemacht: Cut The Rope - hinter den Kulissen. Werfen Sie einen Blick, Sie werden wahrscheinlich einige interessante Punkte lernen.
Ich habe auch Vergnügen der Lektüre dieser Erfahrung Feedback hatte: Wooga HTML5 Abenteuer.
Schließlich ist hier eine Liste von 40 mehr oder weniger guten HTML5-Spielen. 40 Addictive Web Powered Games von HTML5 mit einigen anderen zur Verfügung auch hier: HTML5games.com
Ich hoffe nun, dass all diese Ressourcen können Sie Ihre eigenen HTML5-Spiel bauen. Wenn Sie tun so und / oder wenn Sie Vorschläge haben auf gute Rahmenbedingungen / tutorials / Konzepte zu schaffen, würden Sie zu teilen, wählen Sie bitte Ihre Gedanken mit mir teilen!