Aug 17

Bewegte Canvas-Bilder mit CakeJS

Tag: Canvas,SpielePatrick @ 2:18 pm

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 Adobes (ehemals Macromedia) Flash-Format auswischen werden.

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.

Genau hier fehlte es bisher an geeigneten Alternativen.

Bereits vor über einem Jahr veröffentlichte Ilmari Heikkinen – wohl weitestgehend unbemerkt – seine Javascript-Bibliothek CakeJS (Canvas Animation Kit Experiment). CakeJS orientiert sich im Groben am “großen Bruder” Flash.

Auf der Demo-Seite 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 Missle Fleet und Web Mega Pong. Beide Spiele lassen sich leicht per Tastatur steuern und machen ziemlich Spaß.

In der umfangreichen Dokumentation findet man eine gute Übersicht aller zur Verfügung stehenden Funktionen und Methoden samt Erklärungen.

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 ExplorerCanvas läuft, jedoch scheint die Ausführungsgeschwindigkeit zu langsam und der Resourcenverbrauch zu hoch zu sein um die Animationen ordentlich darstellen zu können.

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…

CakeJS Game Missle Fleet CakeJS Game Web Mega Pong CakeJS Beispiel CakeJS Beispiel

4 Antworten zu “Bewegte Canvas-Bilder mit CakeJS”

  1. Schepp sagt:

    Der Tipp ist der Hammer! Freut mich dass Ihr wieder postet.

  2. Matthias sagt:

    Danke für den Post. Ich hoffe ja schon lange, dass Flash irgendwann von Canvas und SVG abgelöst wird und diese Bibliothek ist definitiv sehr interessant dabei!

  3. Tweets die Bewegte Canvas-Bilder mit CakeJS | Ajaxschmiede.de erwähnt -- Topsy.com sagt:

    […] Dieser Eintrag wurde auf Twitter von stefanie, B00N erwähnt. B00N sagte: RT @guerillagirl_: Bewegte Canvas-Bilder mit CakeJS: http://bit.ly/1XKTt […]

  4. gifs sagt:

    Gifs kostenlose animierte Gifs , Animationen ,Cliparts und Webgraphiken . Gut strukturiertes Gif Archiv

Hinterlasse einen Kommentar