Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

HTML5 Frameworks zur Entwicklung von Browserspielen

ImpactJS: Beispiel - Biolab Disaster in 8 Bit

Seit dem letzten Jahr boomt die Entwicklung von HTML5 Onlinegames regelrecht. Namhafte Hersteller von Browserspielen, die bislang vorzugsweise in Flash realisiert wurden, wechseln reihenweise die Fronten und relaunchen ihre Spiele unter Verwendung von HTML5. Das geschieht nicht etwa aus Überzeugung, sondern weil man festgestellt hat, dass immer mehr Nutzer versuchen, die Spielewebsites über ihre Smartphones zu besuchen. Und man wäre ja schön blöd, wenn man das Potenzial der iOS- und Android-Nutzer ignorierte. Entsprechend versuchen sich etliche Frameworks zu etablieren, die gezielt auf die Spieleentwicklung zugeschnitten sind. Ein paar davon schauen wir uns im Folgenden an. Aber zunächst etwas Basiswissen.

Ohne das Canvas-Element geht es nicht

Das in HTML5 definierte Canvas-Element ist eine auflösungsabhängige Bitmap-Leinwand, die für das Rendering von Graphen, Spielegrafiken oder andere Visualisierungen genutzt werden kann. Derzeit enthält die Spezifikation lediglich einen zweidimensionalen Kontext, 3D-Spiele lassen sich entsprechend derzeit nicht innerhalb des Standards entwickeln. Die ganz konventionell mittels Width und Height in Pixeln definierte Leinwand (Canvas) stellt ein Koordinatensystem mit X- und Y-Achse bereit. Dieses Koordinatensystem wird nun für die Platzierung verwendeter Elemente, sowie die Bewegungssteuerung benutzt. So lassen sich Bewegungspfade vom Prinzip her ähnlich wie in Flash, jedoch wesentlich einfacher definieren.

Innerhalb des Canvas lassen sich Linien zeichnen, Texte präsentieren, Verläufe initiieren und Grafiken platzieren. Alle Zeichenfunktionen werden innerhalb des einmal definierten HTML-Canvas-Elements mit Javascript ausgeführt. Erwähnenswert für alle, die es noch nicht wissen und all die, die stets über die Firma mit dem angebissenen Apfel schimpfen: Das Canvas-Element wurde ursprünglich von Apple für das OS X Dashboard und den Onboardbrowser Safari erfunden. Gewissenlose Innovationstreiber, die...

Das Canvas-Element ist in allen modernen Browsern verwendbar, vor allem auch auf den mobilen Plattformen iOS und Android 2.x. Nutzer von Android 1.x bleiben außen vor und im Prinzip auch alle Nutzer des IE. Erst der IE 9 wird das Canvas-Element voll unterstützen, für ältere Versionen gibt es allerdings eine Javascript Library namens ExplorerCanvas, die viele, aber nicht alle Funktionalitäten des Originalelements auch für IE-User verfügbar macht und - wie üblich - über einen Conditional Comment eingebunden wird. Frameworks bilden in der Regel etwa erforderliche Besonderheiten automatisch ab.

Eine schöne Übersicht der Möglichkeiten des Canvas-Element findet sich auf der Website CanvasDemos.

Aber die Open Web Platform kann noch mehr

Sicherlich ist das Canvas-Element unter Verwendung von Javascript ein ganz essentieller Baustein in HTML5. Aber auch andere HTML5-Elemente, sowie andere Bausteine der Open Web Platform spielen bei der Entwicklung moderner Browserspiele eine bedeutende Rolle. Wesentliche Elemente sind das Video- und das Audio-Element, die es erlauben , eben Video und Audio ohne proprietäte Plugins rein über den Browser abzuspielen. Beide Elemente kommen in modernen Spielen typischerweise vor. Unter Verwendung von WebGL lassen sich in Verbindung mit dem Canvas-Element 3D-Inhalte programmieren, die mit dem Canvas allein so nicht möglich wären. WebStorage (auch DOM Storage) bietet Möglichkeiten der lokalen Speicherung von Daten, im einfachsten Falle von Spielständen an und WebSockets ermöglicht den Aufbau eines bidirektionalen Kommunikationskanals.

Nachteilig bei der Entwicklung von Spielen, die möglichst überall laufen sollen, ist die Tatsache, dass das Canvas-Element eben auflösungsabhängig ist und dementsprechend definiert wird. Speziell für den Standard-Desktop optimierte Spiele finden auf mobilen Plattform schlicht keinen ausreichenden Platz. Es ist daher üblich, entweder mehrere Versionen eines Spiels bereit zu stellen oder sich gleich klar auf bestimmte Plattformen, etwa 3,5" Touchscreens zu fokussieren.

Folgende Frameworks könnten Euch interessieren, wenn Ihr ernsthaft in die Programmierung von HTML5-Games einsteigen wollt. Vielleicht sehen wir ja bald das nächste Zynga. (Wobei Zynga immer noch auch stark auf Flash setzt.)

Stichwort Zynga: Facebook jedenfalls hat ermittelt, dass bereits zum jetzigen Zeitpunkt über 125 Millionen Menschen mit HTML5-kompatiblen Mobilbrowsern (!) auf das soziale Netzwerk zugreifen. Würde man für diese massive Gruppe potenzieller Neukunden Flash nicht in den Abfalleimer der Geschichte kehren, wofür dann?

Auf der nächsten Seite geht es weiter mit einzelnen Frameworks.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

3 Reaktionen
Thomas

Ach... Wenn jemand glaubt blinkende Werbebanner würden mit Flash verschwinden... ich hätte jetzt schon ein paar Ideen wie man Werbebanner mit HTML5 so auf den Internetseiten platziert dass sie dem Benutzer direkt vor die Nase gesetzt werden, ohne dass er die Möglichkeit hätte sich vor diesen durch z.B. AddBlock zu schützen. Und blinken lassen kann ich sie ja jetzt durch ein Canvas noch viel einfacher.

Antworten
Thomas

Werter Dieter Petereit,

warum kommen von t3n-Redakteuren immer wieder so unqualifizierte Kommentare wie "Würde man für diese massive Gruppe potenzieller Neukunden Flash nicht in den Abfalleimer der Geschichte kehren, wofür dann?".
Warum so eine Abneigung gegen Flash? Ich verstehe es nicht.

Ich bin selbst Webentwickler, unter anderem entwickle ich auch in as3, Javascript und HTML. Wenn ich für einen Kunden ein Projekt umsetzten soll, bei dem pixelgenaue Darstellung nötig ist, und das ganze in jedem Browser funktionieren und identisch aussehen soll, dann verwende ich definitv Flash und würde nicht auf die Idee kommen, das ganze mit Javascriptweichen und CSS so lange anzupassen bis das der Fall ist. Tagelange Diskussionen und Nacharbeiten mit dem Designer wären die Folge bis jede Grafik in jedem Browser an der gewünschten Pixelposition wäre... gefolgt von einem enorm hohen Kostenaufwand. Diese praktische Seite der Webentwicklung scheint Ihnen wohl fremd zu sein.

Nochmal zu ihrem Kommentar: 125 Millionen Menschen mit HTML5-kompatiblen Browsern. Aha. Was heisst kompatibel? Dass diese auch alles voll unterstützen? Wieviele Nutzer sind allein mit IE6-IE8 auf Facebook? Selbst der kommende IE9 wird HTML5 nicht zu 100% unterstützen.

Wenn ich Ihnen noch weitere Punkte aufzählen soll warum HTML5 keine 100%ige Alternative zu Flash sein wird, kann ich das auch gerne machen. Ich freue mich schon sehr auf die Möglichkeiten die mir HTML5 bringen wird, aber Anwendung wird sie in meinem beruflichen Bereich nur in speziellen Fällen finden. Und zwar wenn es wirklich Sinn macht.

Antworten
Dieter Petereit

Kollege Seer berichtete soeben, dass Rocket Pack von Disney gekauft wurde: https://t3n.de/news/disney-kauft-html5-basiertes-gaming-engine-startup-299791/

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen