Das Gameslabor hat es sich zur Aufgabe gemacht, Kreative im Nachwuchs-Spielebereich zu unterstützen und ihre Produkte einer breiten Öffentlichkeit zu präsentieren.

Warum HTML5 auch für Games interessant ist

Am: 29. April 2010 | Von: Arne | Unter: Machs dir selbst | Tags: , , , , | 5 Kommentare »

html 5

Außer für Schokolade, Käse und anonyme Nummern-Konten ist die Schweiz mittlerweile auch auf dem Gebiet der Kernforschung weltweit bekannt geworden. Jedoch scheinen sich wenige daran zu erinnern, dass das Genfer Institut CERN ursprünglich auch Dinge wie das World Wide Web oder HTML erfunden hat. Allerdings lange Zeit bevor sie sich mit der Provokation schwarzer Löcher beschäfftigten.

Seit der ersten Umsetzung sind nun viele Jahre vergangen, in denen die Markup Sprache diverse Entwicklungs-Zyklen durchlaufen und überlebt hat. Aktuell befindet sich HTML erneut an einem Punkt technologischen Wandels.

Mit Version 5 stehen Entwicklern zukünftig eine Vielzahl neuer Funktionalitäten zur Verfügung. Darunter befinden sich Erweitertrungen für Audio, 2D/3D Grafik und sogar persistente Netzwerk Verbindungen. Was lange Zeit die Domäne von Plugin Technologien wie Flash oder Unity3D war, könnte bereits bald in vielen Browsern von Haus aus integriert sein.

Dieser Artikel bietet eine kurze Übersicht zu den wichtigsten HTML5 Standards und zeigt in wie weit die Technologien auch für Spiele-Entwickler interessant sein können.

Eine kurze Geschichte von Allem

HTML zeichnete sich scheinbar ausschließlich im Bereich der Dokumenten-Beschreibung aus. Schnell stießen experimentierfreudige Entwickler an die Grenzen grafischer Möglichkeiten. Denn selbst mit Hilfe von JavaScript musste man immernoch gehörig tricksen um halbwegs hübsche Animationen auf den Bildschirm zu zaubern. Von einer bedeuernswerten Performance des Ergebnisses völlig abgesehen.

Nun soll alles anders werden! Bereits vergangenes Jahr erblühten fast wöchentlich neue Experimente und Showcases. Erlaubt ist, was bunt daher kommt und sich bewegt. Dabei setzen die HTML5 Pioniere gleichermaßen auf Effekte alter Schule, audio-visuelle Experimente oder Spiele.

So wurde unter anderem ein id Software Urgestein, durch Einsatz von WebGL und Websockets, für alle Ewigkeit in HTML5 gegossen. Spätestens seit dem bekannt ist, dass Adobe WebGL Support für Flash CS5 plant und Away3DLite bereits in JavaScript/WebGL portiert wurde, wird deutlich, dass sich hier ein ernst zu nehmender Trend abzeichnet.

Daher stellt sich, insbesondere für viele Entwickler, erneut die Frage, in die weit die neuen Technologien Einfluss auf aktuelle und kommende Computerspiele Trends nehmen werden. Auch wenn augenscheinlich keine unmittelbaren Indikatoren für revolutionäre Spielmechanismen zu erkennen sind, liegt es nah, Beispielsweise im Bereich von Browser oder Casual Games, Gebrauch von HTML5 Features zu machen. Denn im Gegensatz zu Flash funktioniert HTML5 Canvas ebenfalls auf diversen Mobil-Browsern wie dem iPhone Safari.

JavaScript

JavaScript ist und bleibt nach wie vor the Weapon of Choice. Der komplette DOM Tree (Document Objekt Model) ist mit JavaScript zu erreichen, zu ergänzen und zu manipulieren. Event Handling, Animationen, mathematische Operationen. Alles was nicht zur Beschreibung der Dokument-Struktur oder dessen optischer Verfeinerung gehört, wird in der Regel in JavaScript implementiert.

Wem sich immernoch die Fußnägel einrollen, wenn von JavaScript die Rede ist, sollte diese Einstellung nochmal überdenken. Aus der Toy-Language, die in den neuziger Jahren hauptsächlich für farbenfrohe Nervereien und Meldefenster verwendet wurde, ist eine durchaus interessante Script Sprache geworden. Einer der prominentesten Beführworter von JavaScript ist wohl Google mit der V8 JavaScript Engine, die ebenfalls in Googles Browsern Chrome oder Chromium zum Einsatz kommt.

Canvas

Das neu eingeführte Canvas Tag, ermöglicht die Definition von 2D Grafik Puffern innerhalb eines HTML Dokuments. Das Canvas Objekt hält pro Instanz einen 2D Context bereit, über den primitive Zeichen-Methoden wie Linien, Rechtecke oder Bögen aufgerufen werden können. Also ganz so, wie man es ebenfalls von Adobes Flash Drawing API gewohnt ist. Der unterschied zu Flash liegt allerdings darin, dass direkt auf Pixeln gearbeitet wird. Praktisch ist, dass während der Laufzeit beliebig viele Canvas Objekte instanziert werden können. So ist es unter anderem möglich, Sprite Sequenzen zu generieren und entsprechend in das Haupt-Canvas zu blitten. Dabei kennt Canvas alle dem Browser gängigen Bildformate: JPEG, PNG, BMP und statische GIF.

Auch wer das Arbeiten auf dem grafischen Puffer vorzieht, ist mit Canvas gut bedient. Die Canvas API bietet direkten Zugriff auf ein Byte Array im Format RGBA. Somit können ebenfalls allseits bekannte Filter und Effekte auf ein Canvas angewendet werden.

WebGL

Canvas eignet sich also vor allem überall dort, wo 2D Grafik zum Einsatz kommen soll. Für 3D oder pseudo 3D ist es aufgrund der beschränkten Performance nur bedingt bis gar nicht nützlich. Streng genommen nicht direkt zum neuen Standard gehörend, aber mit serienmäßiger Integration für den kommenden Firefox 4 ebenfalls auf der Überholspur ist WebGL.

Das besondere an WebGL ist die native 3D Beschleunigung. Im Gegensatz zu Canvas, werden die geometrischen und grafischen Operationen nicht ausschließlich durch Prozessor und Arbeitsspeicher, sondern direkt durch die Grafik-Karte bewerkstelligt. Hinter WebGL steht im übrigen die Khronos Group, die ebenfalls den OpenGL ES (Embedded Systems) betreuen. OpenGL ES findet unter anderem im iPhone Anwendung. Im Grunde genommen ist WebGL nicht sehr viel anders.

Ein weiteres vorzügliches Feature von WebGL ist die Möglichkeit, Vertex und Fragment Shader nativ zu nutzen. Diese werden allerdings nicht in JavaScript geschrieben. Statt dessen wird wie gewohnt auf OpenGL Shading Language zurück gegriffen. Eine Reihe interessanter Beispiele, für die Überlegenheit von WebGL Shadern, kann man bei Inigo Quilez Shadertoy finden. Aber Achtung: WebGL fähigen Browser nicht vergessen!

Audio

Die Einbettung von primitivem Midi oder Wav Audio Dateien ist bereits seit Ende der neunziger Jahre möglich. Aufgrund langer Ladezeiten und/oder enorm nerviger Tonqualität wollte dieses Feature jedoch schon bald niemand mehr so gerne nutzen - und eigentlich war die Allgemeinheit auch ganz froh darüber. Bloß kaum ein gutes Computer oder Video Spiel, kommt ohne entsprechendes akustisches Feedback aus.

Mittlerweile existieren moderner kodierverfahren, die Kompromisse zwischen guter Qualität und verträglicher Ladezeit bewergestelligen können. Diesen Umstand greift HTML5 auf und bietet ab sofort die Möglichkeit, durch das Audio-Tag moderne Formate wie OGG Vorbis oder MP3 abzuspielen. Wave Audio ist selbstverständlich auch immernoch mit von der Partie.

Auch hier wird eine entsprechndes Interface zu JavaScript angeboten, das diverse Aktionen auf der Resource ermöglicht. Problematisch ist leider, dass die Browser sich nach wie vor uneinig sind, was die zu unterstützenden Formate angeht. Firefox mag OGG und WAV, Safari MP3 und WAV, Chrome eigentlich alles ausser WAV. Reichlich problematisch.

Aber es ist ja nicht so, dass derartige Unterschiede und Zickereien der Browser Hersteller neu sind. Daher gibt es bereits findige, im Standard enthaltene Lösungen des Problems. Eine genaue Aufstellung der unterstützten Formate und die entsprechende Lösung des Problems, finden sich auf http://html5doctor.com/native-audio-in-the-browser/.

Websockets

Bereits mit der Einführung von AJAX wurde Entwicklern die Möglichkeit feilgeboten, auch ohne neuladen einer Website, relativ kleine Datenpakete zwischen Browser und Server zu übermitteln. Damals eine Revolution! Doch schnell stieß man auch hier auf die Grenzen des Möglichen. Für nahezu Echtzeit Datenverkehr, wie er in den meisten Spielen erfolgt, ist AJAX geradezu untauglich.

Websockets geht einen Schritt weiter und ermöglicht, dauerhaft verfügbare TCP/IP Verbindungen. Zumindest so lange, wie die entsprechende Seite besucht wird.

Auch hier nimmt Google die Rolle des early Adopters ein. So sind Googles Chrome bzw. Chromium die derzeit einzigen Browser, mit Websocket Support.

Als Gegenstück zur Websockets kann ein beliebiger Server mit Websocket Protokoll genutzt werden. Dabei empfiehlt es sich, auf bereits exitierende Software wie node.websocket.js für NodeJS aufzubauen. Kurz angerissen: Bei NodeJS handelt es sich um eine V8 JavaScript Implementation, die speziell auf die Umsetzung skalierbarer Server ausgelegt ist. Alles in reinem JavaScript und sogar Hochperformant!

Fazit

Leider ist die Landschaft der Web-Browser, für ein übergewöhnliches Maß an Heterogenität bekannt. Es dauert für gewöhnlich eine gewisse Zeit, bis Neuerungen wirklich von den wichtigsten Browsern, auf gleiche Weise unterstützt werden. Genügend Zeit also, sich einmal Gedanken darüber zu machen, in wie weit die neuen Web-Standards relevant für das eigene Spieleprojekt sein können.

Autor: Dennis Wilson, Web & Interactive Developer, http://www.abakia.de/

Foto by Andy Gilmore


5 Kommentare zu “Warum HTML5 auch für Games interessant ist”

  1. 1 Dennis Wilson  (16:14, 29. April 2010):

    Und seit gestern ist sogar bekannt, dass auch Firefox bald Websockets unterstützen wird. Damit verbreitert sich die potentielle Zielgruppe für diese Technologie enorm:

    http://hacks.mozilla.org/2010/04/websockets-in-firefox/

  2. 2 Fabu  (16:59, 2. Mai 2010):

    Schöner Artikel. :-)

  3. 3 Abakia Project (Dennis Wilson) => HTML5 Article for Gameslabor.de  (23:27, 5. Mai 2010):

    [...] Just have a look at Gameslabor: Warum HTML5 auch für Games interessant ist. [...]

  4. 4 Jens  (18:28, 13. Mai 2010):

    Wer einmal gucken möchte, was es alles schon für tolle Spiele gibt, kann sich auf http://www.html5spiele.de einmal umschauen. Dort habe ich schon eine ganze Reihe von HTML5 Spielen zusammengetragen.

  5. 5 Arne  (12:31, 13. Juni 2010):

    Anbei eine Liste guter HTML 5 Games:

    http://blog.templatemonster.com/2010/06/10/html5-games-ultimate-list/


Kommentieren