game in HTML5

Als docent, web developer en leerling van gamescool ben ik geinteresseerd in wat het web te bieden heeft op het gebied van games. De laatste jaren is Flash steeds minder een rol aan het spelen in interactieve content. Dit begon met de opgevoerde snelheid van browsers. Hoe sneller de browser, hoe meer met de ingebouwde javascript taal mogelijk is. Flash staat bekend om zijn ‘preloaders’, je moet wachten op je game. Bij JavaScript is dit niet of minder het geval. Veel animaties verschijnen vrijwel direct, en er is geen plugin nodig.

De laatste ontwikkeling is het gebruik van HTML5 als vervanging voor video en animatie. HTML5 bevat een ingebouwde ‘video tag’ die het mogelijk maakt om zonder plugins video weer te geven. Ook kan deze video met javascript bewerkt worden, wat interessante mogelijkheden geeft voor interactieve video applicaties. Zie hier een demonstratie op Youtube (op 1:15 in de video).

De ‘canvas tag’ maakt het mogelijk ook animaties te tonen, die voorheen slechts met Flash gemaakt konden worden. De canvas kan volledig in de browser geprogrammeerd worden. Deze tag wordt momenteel ondersteund door Chrome, Safari, Firefox (ook in IE8, maar met een plugin, helaas). Zie hier een paar mooie voorbeelden.

Verder is er ook nog de ontwikkeling van WebGL. Dit is een versie van het populaire OpenGL maar dan in de browser. Het opent de deur naar snelle 3D games en animaties, geheel in de browser. Zie bijv. deze plaatjes. Helaas werkt het alleen nog maar in de allerlaatste beta van Chrome en Safari, maar dat zal waarschijnlijk snel veranderen.

Als toegift dan: een spiderman animatie met html5 canvas. Op dit moment is het monnikenwerk. Het wachten is nu dus op een ‘gamemaker’ voor HTML5 canvas. De nieuwe Adobe Flash CS5 kan trouwens exporteren naar Canvas, maar het is not niet bekend hoever dit gaat. Zie de demonstratie.