HTML5 Games, Tooling & 3D

image.png

Spieleentwicklung ist fast für jeden Softwareentwickler interessant. Als Webentwickler ohne Flash-Kenntnisse hatte man jedoch bislang nur wenig Ansatzpunkte. Mit HTML5 und der Kombination aus Javascript, CSS3 und schnelleren Browser gibt es nun die ersten “robusteren” HTML5 Spiele.

HTML5 Spiele? Gibts sowas?

Neowin hat eine “Top 10” Liste an HTML5 Games zusammengestellt. Besonders hervorheben möchte ich Platz 1, weil die Macher auch ein paar Blicke hinter die Kulissen zulassen: CutTheRope.ie – Entwickelt von Microsoft zur Promotion ihrer IE/HTML/Web Plattform. Das Spiel funktioniert allerdings auch prima auf einem iPad oder in einem Chrome Browser. Interessant ist natürlich die “Behind the scenes” Seite. Ich selbst steh zwar mit dem Debugger und Dev Werkzeugen des IEs auf Kriegsfuß, aber laut Video scheint es den Entwicklern geholfen zu haben ;)

In der Neowin Liste befindet sich auch Angry Birds, welches zweifelsfrei am bekanntesten ist, allerdings hatte ich nur wenig “Entwicklungs-relevantes” gefunden. Nur diesen Post, welcher nur beschreibt, dass die Web Audio API nun genutzt wird (hierbei gepusht durch Google ;) )

Auch ein sehr ambitioniertes Projekt ist Command & Conquer als HTML5 Browser Spiel. Nett hierbei: Der Source steht auf GitHub. Das Spiel ist allerdings nicht so ausgereift wie CutTheRope, allerdings auch einiges Komplexer und vermutlich steht kein großes Entwicklungsteam wie bei Microsoft dahinter.

 

“Tooling”

Bret Victor, ein französischer Entwickler, hat sich etwas mehr Gedanken in Richtung “IDE für WebGames” gemacht und hat dies auf einer Konferenz vorgestellt. Er hat eine Art interaktiven Editor entwickelt um Mario ins Web zu bringen – leider hatte ich keine weiteren Informationen rausbekommen, was genau er benutzt, aber das kurze Video ist doch recht beeindruckend:

3D über WebGL

Auch wenn sich die Browserhersteller einig sind, dass HTML5 und Javascript der Weg für die Webentwicklung ist, sind sie sich völlig uneins im 3D Bereich.

Google (unter anderem) pusht WebGL nach vorn und hat z.B. Quake ins Web geholt. Quake 2 konnte ich z.B. kurz über diese Seite in meinem Browser spielen! (bis es abstürzte ;) ). Google Maps hat sogar nun einige Teile nach WebGL portiert um die Ansicht zu verbessern.
Microsoft hingegen vertritt die Ansicht, dass WebGL ein Security Problem darstellt.

Wie sich die Sache entwickeln wird oder ob es mal ein DirectWeb geben wird bleibt abzuwarten.

Wer trotzdem sich trotzdem näher mit WebGL beschäftigen möchte, der sollte mal ein Blick auf three.js werfen.

image

Hinweise?

Wer sonst noch Interessantes aus der “Spieleentwicklungs- und Grafikwelt im Web Bereich” kennt – einfach ein  Kommentar schreiben!

Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf dem Laufenden bleiben willst, abonniere unseren RSS Feed oder folge uns auf Twitter.

About the author

Written by Robert Mühsig

Hi, ich bin Robert Mühsig und bin Webentwickler und beschäftige mich mit Web-Frameworks auf dem Microsoft Web Stack und scheue mich auch nicht vor Javascript. Der Blog begann als "Problemsammelstelle und Lösungshilfe" und seitdem schreibe ich hier alles auf. Seit 2008 bin ich Microsoft MVP für ASP.NET. Treffen kann man mich online via Twitter (@robert0muehsig) oder hier.

3 Responses

  1. Wer sich gerne noch ein paar Spiele mehr ansehen möchte, die ohne Flash auskommen, kann sich mal auf http://www.html5spiele.de umsehen. Dort gibt es regelmäßig neue Spiele zu bewundern.

    Reply
  2. Hallo Robert,

    also wenn Du schon so fragst, dann kann ich noch Unity empfehlen. Unity ist eine Game-Engine für 3D-Games und funtkioniert im Web wie Flash, also mit einem Plugin. Es gibt es aber mit Chrome bereits den ersten Browser, der Unity-Games sogar nativ unterstützt.

    Reply

Comment on this post

Letzte Posts

  • image.png
    Wieviel Speicher belegt meine RavenDB? Und welchen Plan benötige ich bei CloudBird oder RavenHQ?

    Wer RavenDB nicht auf seinem eigenen Server betreiben möchte oder einfach wissen möchte wieviel Speicherplatz die eigentlichen Daten benötigen gibt es zwei Möglichkeiten: Falls es noch einen anderen Weg gibt: Immer her damit – aktuell hab ich nur die beiden Methoden gefunden und sie scheinen mehr oder weniger zu passen. RavenDB Storage per JSON über ...

  • image_thumb.png
    Powershell – Output “formatieren” und Details anzeigen

    Die Powershell ist ein prima Werkzeug und immer mehr System-Tools und Dienste stellen Powershell Module zur Verfügung. Da ich aber nur “am Rande” mit Powershell zutun habe bin ich auf ein nettes Detail gestossen, welches vermutlich bei den erfahreneren Powershell Usern maximal ein müdes Lächeln hervorruft: Ps-Cmd | Format-List etc. Um den Text-Output zu formatieren ...

  • clip_image002.jpg
    Rabatt-Code & Freiticket für die Developer Week 2013

    Nach langer Zeit haben wir mal wieder ein kleines Angebot für euch: Wir sind Medienpartner der Developer Week 2013 und über uns könnt ihr günstiger an Tickets herankommen. Mit dem Code DWX13coi könnt ihr von Sonderkonditionen profitieren (= Ticketpreise werden niedriger & keine bösen Überraschungen). Die Developer Week (DWX) bündelt vom 24.-27. Juni 2013 in ...

  • image.png
    IIS & Windows Authentication – Troubleshooting mit Negotiate & NTLM

    Windows Authentifizierung ist eine einfache (und naheliegende) Authentifizierungs-Option für “Haus-interne” Webapplikationen. Setup Im IIS selbst kann man die Windows Authentifzierung sehr leicht anschalten: Natürlich kann man dies auch über die web.config steuern: <system.web> ... <authentication mode="Windows"/> ... </system.web> ... Fehlermeldung “HTTP Error 401.2 – Unauthorized”: Dies kann (wie fast immer) viele Gründe haben, z.B. weil ...

  • image.png
    Json-Online-Tools: Viewer & Json2Csharp Generator

    Wo APIs im Spiel sind, ist das JSON Format nicht weit. Da ich immer mal wieder zwei Tools benutze, möchte ich diese hier auch mal kurz würdigen. JSON Viewer Wer nur den JSON-Text vor sich hat sieht meist die Struktur nicht. Über JSON Viewer kann man sich recht einfach einen Überblick verschaffen: [URL] JSON2CSharp Der ...

Unterstützt von…

Facebook