<p>Bewegte Bilder, sprich Animationen, sind seit jeher ein Hingucker auf jeder Homepage. In der Vergangenheit griffen Webentwickler bei einfachen Animationen auf bewegte GIF-Dateien zurück, die Einzelbilder beinhalten und zeitversetzt wiedergeben. Für aufwendigere Szenen musste auf das <a class="previewlink" href="http://de.wikipedia.org/wiki/Adobe_Flash">Adobes (ehemals Macromedia) Flash</a>-Format auswischen werden.</p>
<p>Flash bietet sehr vielseitige Möglichkeiten und gilt seit jeher de facto als Standard für Webanimationen. Die Wiedergabe geschieht über den kostenfreien Flash-Player, der mittels Plugin in den Browser eingebunden wird. Jedoch handelt es sich bei Flash um eine proprietäre Software. Sie muss also durch teure Lizenzgebühren erworben werden um eigene Anwendungen in Flash zu erstellen.</p>
<p>Genau hier fehlte es bisher an geeigneten Alternativen.</p>
<p>Bereits vor über einem Jahr veröffentlichte Ilmari Heikkinen – wohl weitestgehend unbemerkt – seine Javascript-Bibliothek <a class="previewlink" href="http://code.google.com/p/cakejs/">CakeJS</a> (Canvas Animation Kit Experiment). CakeJS orientiert sich im Groben am “großen Bruder” Flash.</p>
<p>Auf der <a href="http://glimr.rubyforge.org/cake/canvas.html#Circles">Demo-Seite</a> des Projekts finden sich zahlreiche kleine Beispielanimationen, die einen Vorgeschmack darauf geben, was mit CakeJS möglich ist. Das Highlight sind die beiden mit CakeJS erstellten Spiele <a href="http://glimr.rubyforge.org/cake/missile_fleet.html">Missle Fleet</a> und <a href="http://jeko.free.fr/megapong/">Web Mega Pong</a>. Beide Spiele lassen sich leicht per Tastatur steuern und machen ziemlich Spaß.</p>
<p>In der <a class="previewlink" href="http://glimr.rubyforge.org/cake/jsdoc/">umfangreichen Dokumentation</a> findet man eine gute Übersicht aller zur Verfügung stehenden Funktionen und Methoden samt Erklärungen.</p>
<p>CakeJS ist für Browser entwickelt wurden, die von Haus aus Canvas unterstützen und funktioniert mit Firefox (2+), Safari (3+) und Opera (9.6+). Grundsätzlich sollte es zwar möglich sein, dass CakeJS auch in Microsofts Internet Explorer mittels <a href="http://www.ajaxschmiede.de/javascript/explorercanvas-erfaehrt-ie8-update/">ExplorerCanvas</a> läuft, jedoch scheint die Ausführungsgeschwindigkeit zu langsam und der Resourcenverbrauch zu hoch zu sein um die Animationen ordentlich darstellen zu können.</p>
<p>Vorgenommen hatte sich Heikkinen viel: Physikengine, Kollisionsabfrage und das Senken der CPU-Last, doch seit mehreren Monaten steht die Entwicklung still. Vielleicht kommt demnächst ja doch noch eine neuere Version…</p>
<p><a title="CakeJS Game Missle Fleet" rel="lightbox[cakejs]" href="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejsdemo2.png"><img class="alignnone size-thumbnail wp-image-471" title="CakeJS Game Missle Fleet" src="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejsdemo2-150x150.png" alt="CakeJS Game Missle Fleet" width="150" height="150" /></a> <a title="CakeJS Game Web Mega Pong" rel="lightbox[cakejs]" href="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejsdemo.png"><img class="alignnone size-thumbnail wp-image-470" title="CakeJS Game Web Mega Pong" src="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejsdemo-150x150.png" alt="CakeJS Game Web Mega Pong" width="150" height="150" /></a> <a title="CakeJS Beispiel" rel="lightbox[cakejs]" href="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejs.png"><img class="alignnone size-thumbnail wp-image-468" title="CakeJS Beispiel" src="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejs-150x150.png" alt="CakeJS Beispiel" width="150" height="150" /></a> <a title="CakeJS Beispiel" rel="lightbox[cakejs]" href="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejs2.png"><img class="alignnone size-thumbnail wp-image-469" title="CakeJS Beispiel" src="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejs2-150x150.png" alt="CakeJS Beispiel" width="150" height="150" /></a></p>
<p>Flash bietet sehr vielseitige Möglichkeiten und gilt seit jeher de facto als Standard für Webanimationen. Die Wiedergabe geschieht über den kostenfreien Flash-Player, der mittels Plugin in den Browser eingebunden wird. Jedoch handelt es sich bei Flash um eine proprietäre Software. Sie muss also durch teure Lizenzgebühren erworben werden um eigene Anwendungen in Flash zu erstellen.</p>
<p>Genau hier fehlte es bisher an geeigneten Alternativen.</p>
<p>Bereits vor über einem Jahr veröffentlichte Ilmari Heikkinen – wohl weitestgehend unbemerkt – seine Javascript-Bibliothek <a class="previewlink" href="http://code.google.com/p/cakejs/">CakeJS</a> (Canvas Animation Kit Experiment). CakeJS orientiert sich im Groben am “großen Bruder” Flash.</p>
<p>Auf der <a href="http://glimr.rubyforge.org/cake/canvas.html#Circles">Demo-Seite</a> des Projekts finden sich zahlreiche kleine Beispielanimationen, die einen Vorgeschmack darauf geben, was mit CakeJS möglich ist. Das Highlight sind die beiden mit CakeJS erstellten Spiele <a href="http://glimr.rubyforge.org/cake/missile_fleet.html">Missle Fleet</a> und <a href="http://jeko.free.fr/megapong/">Web Mega Pong</a>. Beide Spiele lassen sich leicht per Tastatur steuern und machen ziemlich Spaß.</p>
<p>In der <a class="previewlink" href="http://glimr.rubyforge.org/cake/jsdoc/">umfangreichen Dokumentation</a> findet man eine gute Übersicht aller zur Verfügung stehenden Funktionen und Methoden samt Erklärungen.</p>
<p>CakeJS ist für Browser entwickelt wurden, die von Haus aus Canvas unterstützen und funktioniert mit Firefox (2+), Safari (3+) und Opera (9.6+). Grundsätzlich sollte es zwar möglich sein, dass CakeJS auch in Microsofts Internet Explorer mittels <a href="http://www.ajaxschmiede.de/javascript/explorercanvas-erfaehrt-ie8-update/">ExplorerCanvas</a> läuft, jedoch scheint die Ausführungsgeschwindigkeit zu langsam und der Resourcenverbrauch zu hoch zu sein um die Animationen ordentlich darstellen zu können.</p>
<p>Vorgenommen hatte sich Heikkinen viel: Physikengine, Kollisionsabfrage und das Senken der CPU-Last, doch seit mehreren Monaten steht die Entwicklung still. Vielleicht kommt demnächst ja doch noch eine neuere Version…</p>
<p><a title="CakeJS Game Missle Fleet" rel="lightbox[cakejs]" href="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejsdemo2.png"><img class="alignnone size-thumbnail wp-image-471" title="CakeJS Game Missle Fleet" src="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejsdemo2-150x150.png" alt="CakeJS Game Missle Fleet" width="150" height="150" /></a> <a title="CakeJS Game Web Mega Pong" rel="lightbox[cakejs]" href="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejsdemo.png"><img class="alignnone size-thumbnail wp-image-470" title="CakeJS Game Web Mega Pong" src="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejsdemo-150x150.png" alt="CakeJS Game Web Mega Pong" width="150" height="150" /></a> <a title="CakeJS Beispiel" rel="lightbox[cakejs]" href="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejs.png"><img class="alignnone size-thumbnail wp-image-468" title="CakeJS Beispiel" src="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejs-150x150.png" alt="CakeJS Beispiel" width="150" height="150" /></a> <a title="CakeJS Beispiel" rel="lightbox[cakejs]" href="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejs2.png"><img class="alignnone size-thumbnail wp-image-469" title="CakeJS Beispiel" src="http://www.ajaxschmiede.de/wp-content/uploads/2009/08/cakejs2-150x150.png" alt="CakeJS Beispiel" width="150" height="150" /></a></p>