201309Jan

Motio: jQuery-Plugin für CSS-Sprite-Animationen

Die manuelle Animation von CSS-Sprites gestaltet sich in einem reinen Text-Editor nicht immer einfach, gerade wenn es um das Einlesen und Auswerten von Sprite-Daten geht. Ein einfaches, aber dennoch wertvolles jQuery-Plugin in diesem Zusammenhang stellt Motio dar: Damit können über verschiedene Parameter CSS-Animationen gesteuert werden.

Motio - jQuery plugin for simple but powerful sprite based animations and panning

Die Optionen des Plugins definieren also den Ablauf einer Sprite-Animation:

  • $('#element').motio({
  • speed: -50,
  • bgSize: 1024,
  • paused: 1
  • });

Auf der Websites des Plugins finden sich interessante Anwendungsbeispiele, welche den Einsatz des Plugins und CSS-Sprite-Animationen demonstrieren. Zudem können die Animationen in Echtzeit per Schieberegeler angepasst werden.

Kommentare

Bernd schrieb am 27.01.2013 #1

Hallo,

Kurzer aber interessanter Artikel :-)

Auf der Webseite zu motio wird gesagt es würde sich nicht viele Spiele anbieten,daher mein Frage: Kennen Sie eine Alternative zu motio oder gar ein ganzes Framework für die Entwicklung von kleinen Spielen?

Ich würde gerne für eine meiner Seiten ein kleines Sidescroll rennspiel o.ä. bauen. Ggf. auch ein jump n run. Irgendwelche Empfehlungen :-)?

Mit freundlichen Grüßen
Bernd

Matthias schrieb am 30.01.2013 #2

Hmm bisher gibt es ein paar gute HTML5-Game-Engines, die schon Einiges an Bord haben. Die Bekanntesten dürften ImpactJS und Crafty sein. Etwas neuer wäre noch Quintus, was auch vielversprechend aussieht.

Felix schrieb am 14.02.2013 #3

Moin,

ich kenne noch RPGJS http://rpgjs.com/, sieht vielversprechend aus, sogar mit einer Demo die man benutzen kann.

lg Felix

Bernd schrieb am 14.02.2013 #4

Ah, vielen Dank!

Die sehen alle nicht schlecht aus. Da lässt sich gut was mit entwickeln, quintus macht auch einen guten Eindruck.

Rpgjs ist wahrscheinlich ein RPG Maker Klon wie es aussieht?

Dann werd ich mich mal mit den einzelnen Engines auseinander setzen und schauen, was das beste für mein Projekt wäre :-)

Mit freundlichen Grüßen
Bernd