HTML5 für Spielentwicklung

[Lachsen]

Hallo da!

Ich wollte mich ja mal etwas im Prog-Forum blicken lassen, zur Abwechslung.
Also mal nen Thread. Mein erster seit vielen, vielen Jahren. @_@

Also hier geht's um HTML5 (d.h. HTML mit neuen Features wie <canvas>, <audio> und <video> und CSS mit dollen properties wie transform etc sowie immer schnelleres JavaScript) und wie man es für Spielentwicklung verwenden könnte (oder generell für grafisch anspruchsvollere Anwendungen).

Wie ich auf HTML5 kam?

Ich hatte dieses Jahr nen Praktikum über ein halbes Jahr gemacht und dort ein "Social Network Game" basierend auf HTML5 implementiert. Zu beginn war ich auch skeptisch, inwieweit das überhaupt funktioniert, bis ich dann dieses Spiel gesehen habe:
http://www.warimals.com/play.html
Das Spiel basiert komplett auf HTML (kein Flash). Die Grafik wird sogar mit HTML <div> elementen dargestellt, kein <canvas>.
Das Spiel das wir dann entwickelt haben (leider nur eine Art FarmVille ...) ging dann in eine ähnliche Richtung und lief auch ähnlich anschaulich. Kann leider nichts zeigen, da es noch nicht öffentlich ist. ^^"

Zu dem Zeitpunkt fing ich an, Web-Technologien als eine Möglichkeit für Spiel-Entwicklung in Betracht zu ziehen.

Zwei HTML5 game engines, die sich imho sehen lassen können:
Effectgames: http://www.effectgames.com/effect/ (wieder basierend auf HTML layout, leider eingestellt, aber schaut euch mal die Demos an)
Impactjs: http://impactjs.com/ basiert auf <canvas>, läuft auch ziemlich gut.

Wieso eigentlich HTML5?
Ja, wieso eigentlich? Vor allem weil es doch für sowas Flash gibt oder Unity3D.
Also für mich ist der Hauptgrund einfach der, dass ich Web-Technologien sehr gut kenne und Flash/Unity3D einfach gar nicht,
Darüber hinaus hab ich die Erfahrungen gemacht, das dynamische Webseiten Inhalte die mit modernem HTML umgesetzt wurden, in aller Regel besser verwendbar sind, als das selbe Zeug mit Flash.
Es läuft irgendwie flüssiger, das Look-and-Feel ist wie man es gewohnt ist... und es einfach weniger überladen, weil HTML einfach immer noch limitierter ist als Flash.

Aber ist es deswegen gut zur Spiel-Entwicklung geeignet? Also ich denke mal mit Flash und Unity3D kriegt man heute immer noch bessere Ergebnisse hin. Aber so gut wie alle Browser setzten momentan viel daran die Performance der nativen Web-Technologien hoch zu puschen und in den letzten Jahren gab es da massiv Fortschritte. Und der Trend könnte so eine weile noch weiter gehen.

Nebenbei angemerkt arbeite ich auch an der Uni an einem Projekt, dass Declarative 3D Grafik in HTML integriert... wahrscheinlich auch ein großer Grund, wieso ich gerne damit arbeite.

Und sonst halt noch:
- Man ist nicht abhängig von proprietären Plug-Ins/ Authoring-Tools
- Es läuft auf dem iPhone!!1 (naja, noch nicht sooo schnell afaik)
- JavaScript ist imho eine tolle Sprache, wenn man sie mal besser kennen lernt.
- HTML ist imho eine der produktivsten Optionen für Interface Design... aber ich kenne sonst auch nur Java/Swing.

Was ich momentan mache.
Im Moment setzte ich eine meiner Spiel-Idee von mir mit HTML5 um - mal im etwas kleinerem Format. Genauer gesagt hab ich mir die impactjs Engine gekauft und baue das ganze basierend darauf auf.
Hab zwar große Teile der Engine komplett umgeschrieben, bereue den Kauf aber gar nicht, da schon sehr viel Brauchbares dabei ist (vor allem der Level Editor) und der Quellcode unglaublich sauber ist und sich sehr toll damit arbeiten lässt.

Die Leute auf der Nato haben schon nen Preview bekommen von dem was ich mache. Wenn ich mal etwas weiter bin, werde ich Ergebnisse hier reinstellen.

Und mein bisheriger Eindruck: Genial! Für einfache Spiele auf RM2k/RMXP Niveau kriegt man mit canvas locker 60 fps hin, zumindest bei den meisten Browsern und halbwegs modernen Rechnern (ausgerechnet Firefox stellt sich momentan leider etwas quer...).
Die Entwicklung geht auch weitaus schneller von der Hand als etwa mit C++ (naja, wen wundert es...).

Naja, was meint ihr dazu? Kennt ihr noch andere, interessante Spiele oder Game-Engines basierend auf HTML5?

C ya

Lachsen


PS: Weiß nicht, ob das vielleicht eher unter Web-Entwiclung reingehört. Aber ich wollte mal ins Progforum posten! D:
PPS: In 'grafisch' steckt doch tatsächlich 'fisch' drin. Holy carp.

[WeTa]

https://www.crazygames.com/game/cut-the-rope <- Als kleines Beispiel, wie schön das Ganze schon läuft. Ist von Microsoft mit Geld beworfen worden, als Werbung für den neuen IE.
Ich habe Lachsen auf dem BMT ein wenig über die Schulter geschaut und fand den Entwicklungsprozess genial. Vor allem genial einfach, weil man ja mal einfach mit Firebug oder so debuggen kann.
Enginemäßig geht da momentan auch eine Menge, die klassischen Tools rüsten alle nach. Construct kann HTML5, GameMaker in der neuen Version ebenfalls und die Ergebnisse können sich echt sehen lassen - mit Flashspielen hat man schon längst gleichgezogen.

[Lachsen]

Wo wir schon beim Thema "von Microsoft mit Geld beworfen" sind:
http://jsdo.it/event/svggirl
Dort demonstrieren sie, was schon so alles mit SVG (Deklarative Vector Grafiken embedded in HTML) läuft.
Ob es mit Flash-Spielen gleich zieht, weiß ich noch nicht. Cuttherope sieht ja schon sehr toll aus, aber mein Rechner wird immer sehr laut, wann immer nen HTML5 Spiel bei mir läuft.

IE ist btw. ziemlich beeindruckend von der Performance was SVG und canvas angeht. IE hat sich generell gut gemacht seit sie auf der Pro-HTML5 Schiene fahren.
Google Chrome (mein aktueller Standardbrowser) ist ebenfalls schnell, aber macht einen nicht ganz so flüssigen Eindruck (zeigt aber trotzdem 60 frames an... vielleicht wegen der multi-prozess Architektur).
Opera war bei einem Test von meinem Spiel ebenfalls sehr flüssig (eigentlich besser als Chrome)
Nur Firefox macht mir im Moment etwas sorgen. Die canvas performance ist merkbar schlechter als bei den anderen Browsern - zumindest bei meinen Tests. Aber ich bin sich, da wird noch dran geschraubt werden.

[niR-kun]

Wo wir schon beim Thema "von Microsoft mit Geld beworfen" sind:
http://jsdo.it/event/svggirl
Dort demonstrieren sie, was schon so alles mit SVG (Deklarative Vector Grafiken embedded in HTML) läuft.

...

Bei mir läuft die svg-Animation etwas langsamer im Firefox 9 als IE9 (embedded mit ietab2 ), aber nicht sehr viel langsamer.
Dagegen läuft die Animation in Opera 11.60 sehr langsam, so dass die Musik schneller zu ende ist als die Animation.

Ich vermute aber, dass da mal wieder was nicht-standardmäßiges drin ist, was der IE schneller verarbeiten kann.
Folglich geht der Aussagegehalt gegen 0.

[Lukas]

MS hat viel Aufwand in die Hardwarebeschleunigung vom IE9 investiert, ich halt’s schon für realistisch, dass der einfach schneller ist.

@ topic: ich find WebGL eigentlich viel interessanter als canvas.

[Tyr]

Ich vermute aber, dass da mal wieder was nicht-standardmäßiges drin ist, was der IE schneller verarbeiten kann.

...

Da kann gar nichts Standardmäßiges drin sein, weil es noch überhaupt keinen Standard gibt. HTML5 ist noch mitten... nein, eher am Anfang der Standardisierungsphase.
Das ist auch der Grund, warum der Firefox-Support so schlecht ist. Mozilla war zu voreilig und hatte die temporären Richtlinien von HTML5 implementiert, von denen sich dann aber einige komplett geändert hatten/verworfen wurden, so dass sie damit ziemlich auf die Nase gefallen sind. Seit dem halten sie sich in dem Bereich etwas zurück und warten erst einmal ab.
Microsoft hingegen arbeitet eng mit dem WC3 zusammen und ist auch aktiv am Standardisierungsprozess beteilt. Aus diesem Grund können sie immer die neusten Features im IE bereit stellen und können besser abschätzen, welche Elemente von HTML5 final sind und welche höchstwahrscheinlich noch häufiger umgeworfen werden, so dass sie ihre Ressourcen optimal verteilen können. Aus diesem Grund ist derzeit der Internet Explorer auch die einzige wirkliche Möglichkeit HTML 5 zugenießen.

Persönlich halte ich HTML 5 für äußerst beeindruckend, es hat viel Potenzial... aber ich halte nichts davon mit Alpha Versionen rumzuspielen
Leider sieht es so aus, dass es noch ein ganzes Weilchen dauern wird, bis HTML 5 fertig ist.

[WeTa]

Ja, WebGL ist tierisch cool, aber da haben wir wieder das Problem mit der Verbreitung. Weißt du eigentlich, wie das jetzt Apples letztes Wort bezüglich iOS aussieht? Iirc kann WebGL ja bisher nur mit iAd benutzt werden.

[Lukas]

Ich würde vermuten, dass es früher oder später auch in Safari gehen wird; sicher sein kann man da aber natürlich nicht. Und ich denke, dass wir da frühestens mit den iOS 6-Betas (vermutlich Mitte des Jahres; evtl. schon Ende Q1/Anfang Q2) neues zu hören werden. Wenn überhaupt.

[yeti]

Ohne WebGL, sondern auf Basis von js/html 5, gibt es auch schon diesen lauffähigen RPG-Maker XP-Klon/Converter hier:

"RPG JS"

Hier eine Demo.
Das gute Stück ist open source und natürlich noch in Arbeit, kann aber immerhin schon solche Sachen wie XP-Events importieren und sieht doch zumindest ambitioniert aus.

http://rpgjs.com/


Einen wirklichen Haufen interessanter Spiele findet ihr hier, brought to you by Google, mit Filterfunktion.

[nudelsalat]

WebGL ist so ziemlich das genialste was dem Internet in den letzten paar Jahren passiert ist. <3
Ich bastel für meine Baccarbeit grad an einem Punktwolkenviewer der mehrere Gigabyte große Punktwolken darstellen können soll. Die Punktwolke in dem Video ist 12Gb groß, es werden immer nur die Teile nachgeladen die gerade im Blickfeld sind:

Leider hat es gegenüber OpenGL noch einige Nachteile wie z.B.:
- Man kann gl_FragDepth nicht im FragmentShader setzen
- Der DepthBuffer kann nicht ausgelesen werden.
- FragmentShader unterstützen keine for-schleifen mit dynamischen variablen. Es muss beim kompillieren bereits bekannt sein, wie oft die Schleife durchlaufen wird. Der Punkt ist mMn ein valider Grund für einen Amoklauf.

Javascript ist zwar nicht gerade die beste Programmiersprache aber die leichtigkeit mit der man damit arbeiten kann macht sie trotzdem zu meiner Lieblingssprache. Kein lästiges einrichten komplexer workspaces und run/compilekonfigurationen nur um simple sachen zu testen und mit einem kleinen refresh sieht man bereits seine änderungen.

Persönlich halte ich HTML 5 für äußerst beeindruckend, es hat viel Potenzial... aber ich halte nichts davon mit Alpha Versionen rumzuspielen
Leider sieht es so aus, dass es noch ein ganzes Weilchen dauern wird, bis HTML 5 fertig ist.

...

Wenns keiner verwendet wird nie was draus. Dadurch, dass sich bereits soviele dazu bewegt haben demos und Programme mit html5 zu erstellen wird auch die entwicklung von html5 vorangetrieben.

Wo wir schon beim Thema "von Microsoft mit Geld beworfen" sind:
http://jsdo.it/event/svggirl

...

Sehr beeindruckend und gut zu wissen, dass Microsoft sich um SVG kümmert.

Google Chrome (mein aktueller Standardbrowser) ist ebenfalls schnell, aber macht einen nicht ganz so flüssigen Eindruck (zeigt aber trotzdem 60 frames an... vielleicht wegen der multi-prozess Architektur).

...

Ich hab mit Chrome auch seltsame Performanceprobleme. Einerseits zeigt Chrome mir bei meiner WebGL App locker doppelt soviele fps wie firefox an, anderseits stocken die Eingaben bereits bei ~50fps, so als ob es in wirklichkeit nur ein bruchteil davon wäre.

Ja, WebGL ist tierisch cool, aber da haben wir wieder das Problem mit der Verbreitung.

...

So beliebt wie WebGL momentan gerade insbesondere bei den Demo Entwicklern ist, bin ich sehr optimistisch, dass zumindest Safari noch nachziehen wird. Opera soll ab ende Jänner oder Februar schon WebGL unterstützen.

[Lachsen]

Hui, kam ja mal etwas dazu hier

@WebGL
WebGL hab ich bis jetzt vergessen zu erwähnen. Das ist natürlich auch eine höchst interessante Sache. Von der Performance geht das natürlich weit über den normalen 2D canvas hinaus (WebGL ist übrigens nichts weiter als ein alternativer context für das canvas element). Was mich an WebGL ein bisschen noch stört, ist, dass es von Microsoft bis heute komplett blockiert wird. Der offizielle Grund dafür sind Sicherheitsrisiken (die in der momentanen Version auch berechtig sind. Denial of Service bzw. lesen von lokalen Bilderndaten sind so ein paar Beispiele. Siehe: http://www.contextis.com/research/blog/webgl2/ ). Inoffizieller Grund ist sicher auch der, dass Microsoft grundsätzlich kein großer Unterstützer von OpenGL ist, wo unter Windows doch alles so toll mit DirectX läuft...
Aber ja, WebGL scheint sich wirklich immer mehr auszubreiten. Wenn das so weiter geht und die Sicherheitslücken auch umgangen werden, bin ich mal gespannt ob Microsoft da nachgeben wird.

@HTML5 + Internet Explorer:
SVG ist schon sehr alt. Die meisten Browser hatten dies schon lange vor Internet Explorer implementiert. Microsoft ist da afaik erst in der letzten Version nachgezogen, dafür aber dann halt richtig.
Ich denke nicht das in SVGGirl irgendwelche IE-spezifischen Sonderfeatures sind. Sowas würde sich ja in erster Linie dadurch ausdrücken, dass es nur unter IE richtig läuft. Unter Google Chrome läuft SVGGirl btw. ähnlich schnell.

Auch dass Microsoft mehr mit dem W3C zusammenarbeiten soll als andere Browser Hersteller höre ich zum ersten Mal. Früher war ja gerade das Gegenteil der Fall. Features wie SVG und canvas waren wie gesagt in den meisten anderen Browsern schon lange vorher vorhanden und ich glaube nicht, dass sich die Spezifikation seit dem groß verändert hat. Eine Großzahl neuer HTML5 Features (beispielweise CSS animation, canvas) kommen eher von Webkit/Apple.

Und nicht zuletzt: Wenn IE jetzt der HTML5-Browser schlechthin sein soll (wie er vermarkted wird), wie kommen dann solche Punktzahlen zustande: http://html5test.com/results.html

Mein Endruck ist, dass IE immernoch etwas hinterher hängt was HTML5 angeht, aber das was implementiert wird, wird halt gut und effizient implementiert. Ich denke ein deutlicher Vorteil von IE bezüglich Implementierungsaufwand ist eben die Tatsache, dass es für eine Platform gemacht ist - Windows. Und Microsoft weiß wohl, wie man dort das Zeug schnell hinbekommt.

Will hier jetzt keine IE Werbung machen. Ich bevorzuge die meisten anderen Browser immernoch, aber man muss Microsoft schon lassen, dass sie da mittlerweile wieder gut nachziehen.

@Nudelsalat:
Sehr schönes Video zum Punktwolken Viewer. Ich glaube ich habe davon schonmal gehört/gelesen, wahrscheinlich im zusammenhang von einem Seminar bei uns. Zumindest kann ich mich an die Szene da erinnern.
Ich sehe das übrigens genauso: HTML5 ist experimentell, aber es wird zunehmend verwendet und wer sich jetzt damit befasst kann in der Zukunft durchstarten.

Joa... ansonsten war ich die letzten Tage zu beschäftigt, um groß etwas an dem Spiel zu werkeln. @_@ Irgendwann demnächst dann, schätze ich.

C ya

Lachsen

[nudelsalat]

Command & Conquer tech demo
Macht zwar nicht den flüssigsten eindruck, ist aber doch ziemlich cool.

[fedprod]

Command & Conquer tech demo
Macht zwar nicht den flüssigsten eindruck, ist aber doch ziemlich cool.

...

Unter FF9 ists nicht grade flüssig und performant. Unter CoolNovo (aka ChromePlus) lädt es eine Ewigkeit, läuft dann aber relativ flüssig.
Nice um mal zu sehen was alles geht ist das ganze allemal

[Lachsen]

Okay, jetzt haben sie es endlich gebracht:

Ein waschechtes (wenn auch einfaches) MMORPG in HTML5:
http://browserquest.mozilla.org/

Ich bin ganz baff.
Und ich mach in der Zwischenzeit gar keine Fortschritte mit meinem Spiel. Zeitmangel. >_<

C ya

Lachsen

[R.D.]

Shit just got real oO

[Jerome Denis Andre]

Okay, jetzt haben sie es endlich gebracht:

Ein waschechtes (wenn auch einfaches) MMORPG in HTML5:
http://browserquest.mozilla.org/

Ich bin ganz baff.
Und ich mach in der Zwischenzeit gar keine Fortschritte mit meinem Spiel. Zeitmangel. >_<

C ya

Lachsen

...

Und das in den letzten 1-2 Stunden.
Danke für den Link zu dem tollen Spiel :-)

[Jerome Denis Andre]

Wenn man via Chrome + F12 ein wenig im "Seiten-Code" herumpfuscht, dann kann man sogar mit Waffen und Rüstungen der Gegner durch die Pampa rennen :-)
Dieses Spiel ist eine Wahre Kiste Spaß :-)



Wenn man will, kann man sogar zum Endgegner werden :-)

[WeTa]

Be on the lookout! Wooga has just released a very special creation into the wild as an open source project. That creation is ‘Pocket Island’, a HTML5 game developed by Wooga that is now available for all to download and iterate upon.
http://www.wooga.com/2012/06/woogas-html5-adventure/

Zusätzlich zum Source gibt es noch einige Zeilen über die Möglichkeiten und die Probleme von HTML5.

[Lachsen]

Be on the lookout! Wooga has just released a very special creation into the wild as an open source project. That creation is ‘Pocket Island’, a HTML5 game developed by Wooga that is now available for all to download and iterate upon.
http://www.wooga.com/2012/06/woogas-html5-adventure/

Zusätzlich zum Source gibt es noch einige Zeilen über die Möglichkeiten und die Probleme von HTML5.

...

Sehr interessant.
Ich habe das Spiel vorhin kurz in Chrome angetestet... ist anscheinend nicht dafür gemacht, allein schon vom Spiel Format her. Hab es durch etwas Maus gedragge in einen unspielbaren Zustand gebracht, Könnte also besser sein.
Das besondere an dem Beispiel ist auch, dass das Spiel aus HTML Element zusammen gesetzt ist. D.h. <div> elemente anstatt ein einzelnes <canvas>. Sowas ist gut für Interfaces, für Spielbare Inhalte muss man mit so etwas aber sehr gut aufpassen. Standardfunktion wie Text selection müssen explizit deaktiviert werden usw.

Den Artikel muss ich mir demnächst nochmal genauer durchlesen. Anscheinend macht Sound in HTML5 nach wie vor Probleme. :/ Was ist an Sound denn bitte so schwer, liebe Browser Hersteller?

Achja: Ein Update zu meinem HTML5 Projekt.
Die letzten 2 Monate habe ich wieder mehr an dem Spiel gearbeitet und auch mal richtig Fortschritte gemacht.
Hier nen kleiner Screenshot vom aktuellen Stand:


Screen zeigt eine Map, die insgesamt aus 6 Grafiken Ebenen besteht. Darunter ist eine "Lightmap" Ebene. Die ist so im Sinne von klassischen RPG-Maker Lightmaps, nur mit dem Unterschied, dass man hier anständig mit Alpha-Channel arbeiten kann. Die Lightmap ist hier generell eher subtil eingesetzt. Außerdem ist es kein fixes bild. Stattdessen setzt man Lichtquellen genauso wie alle anderen Tiles. Hier nen Screenshot von der selben map aus dem Map-Editor:



Bisher läuft die Entwicklung technologisch gesehen einwandfrei. Das Spiel läuft auf meinen Rechner nach wie vor auf 60 FPS (mit Chrome, IE9 und Firefox) und von nen paar Netbook Benutzern habe ich auch positives Feedback zur Performance bekommen.
Es läuft sogar spielbar auf meinem iPhone 4S, wenn auch leider eher um die 20-30 fps... wobei ich da die neueste Version noch nicht getestet habe, die requestAnimationFrame verwendet. Mobile Devices sind für mich aber ansonsten eh erstmal zweitrangig.

Im Moment verbringe ich viel Zeit damit, den Editor zum Spiel zu erweitern. Ich hab es mir in den Kopf gesetzt ein Event-System wie im RPG-Maker umzusetzen. Ich finde, dass das System beim Maker sehr gut funktioniert hat. Wenn man das dann mit Custom-Event Befehlen kombiniert umgeht man auch das ganze gehacke, dass man sonst mit dem RPG-Maker hat. Natürlich ist der Editor auch in HTML und verwendet große Teile vom Code aus der Engine.

Irgendwann demnächst will ich noch etwas Spielbares zeigen. Es gibt schon etwas Spielbares, aber das ist mir noch nicht gut genug zum vorzeigen... :P

Also insgesamt läuft es ziemlich toll mit der Entwicklung.

C ya

Lachsen

[WeTa]

Das sieht wundervoll aus <3<3<3