201107Aug

Webentwicklung: Mini-Game als Flash/CSS3-Test

Zur Abwechslung gibt es heute einmal wieder etwas in eigener Sache: Im Rahmen meines Studiums galt es, ein kleines Browser-Spiel sowohl in Flash als auch in HTML/CSS/JavaScript zu entwickeln. Dabei sollte das Spiel dem "Lunar Lander"-Prinzip entsprechen und bestimmte Kriterien erfüllen. Ich wollte die Gelegenheit nutzen, um Unterschiede zwischen der Flash-Umsetzung und einer HTML-Variante aufzeigen zu können. Aus Zeitgründen konnte ich bei der HTML-Version nur auf CSS3 aufbauen, weshalb es kein HTML5-Spiel mit der Verwendung des Canvas-Elements geworden ist. Hier bieten sich durchaus mehr Möglichkeiten, aber prinzipiell ist der Arbeitsablauf bei der CSS3-Variante ähnlich.
Das Mini-Game "Bumble Tumble" (der Name wurde frei gewählt und hat keine Beziehung zu bestehenden Spielen) gibt es hier als Flash-Version und auf dieser Seite in der CSS3-Variante. Die beiden Spiele unterscheiden sich nur von der Art des Leveldesigns: Die Aufgabe, möglichst langsam auf einer Blume zu landen, gilt für beide Anwendungen.

Bumble Tumble - Eine Machbarkeitsstudie in Flash und CSS3

Da die Spiele in erster Linie als Machbarkeitsstudie anzusehen sind, habe ich auf die Implementierung von weiteren Levels, Spielmodi oder einer Highscore-Liste verzichtet. Insgesamt konnte ich alle Mechanismen aus der Flash-Umsetzung in CSS3 anwenden. Hier ein erstes Fazit:

  • HTML5 und CSS3 bieten gute Voraussetzungen für 2D- und auch 3D-Spiele
  • ein HTML/CSS-Spiel bedeutet nicht automatisch weniger Effekte oder Möglichkeiten
  • die Vorteile von ActionScript 3 hinsichtlich Typisierung und OOP machen sich schnell bemerkbar
  • JavaScript-Animationen sind aufwendiger in der Erstellung und Wartung (keine direkte Bearbeitung wie in Flash mittels Vektor-Werkzeugen, außer es kommen SVG-Grafiken zum Einsatz)
  • derzeit gibt es noch Probleme, wenn HTML5-Audio-Dateien in einer Endlosschleife nahtlos hintereinander abgespielt werden sollen
  • HTML/CSS-Spiele können insgesamt größer ausfallen, da auf transparente PNGs keine JPEG-Kompression wie in Flash angewendet werden kann
  • ein HTML/CSS-Spiel ist kein Garant für bessere Performance auf mobilen Geräten

Natürlich fehlt derzeit noch eine komplette Entwicklungsumgebung für HTML5/CSS3-Anwendungen, die viele Interaktionen und Animationen benötigen (Adobe Edge ist ausbaufähig), weshalb hier Flash noch Vorteile bietet. Zusammengefasst lässt sich festhalten: Beide Technologien bieten stets Vor- und Nachteile. Auch weniger aufwendige HTML-Anwendungen können Smartphones schon stark beanspruchen, weshalb dieser Aspekt mit Vorsicht anzusehen ist. Flash wird wohl weiterhin eine Daseinsberechtigung haben und Adobe wird zugleich weitere Ressourcen in die Entwicklung von HTML5-Authoring-Tools stecken. Unabhängig von der verwendeten Technologie wird sich ein Punkt nicht ändern — die Kreativität sowie die Programmierung liegen auch zukünftig in den Händen von Designern und Entwicklern und komplexe Animationen oder übertriebene Effekte zeichnen noch kein gutes Produkt aus.

Kommentare

Michael schrieb am 08.08.2011 #1

Bei dem Punkt "derzeit gibt es noch Probleme, wenn Audio-Dateien in einer Endlosschleife nahtlos hintereinander abgespielt werden sollen" fehlt die Info, ob es ein Flash oder ein CSS/HTML Problem ist. Aber es handelt sich hier wohl um CSS/HTML. Trotzdem ein sehr schönes Experiment. Werde in Zukunft auch mal etwas ähnliches probieren.

Matthias schrieb am 08.08.2011 #2

Stimmt, das hatte ich nicht erwähnt. Gemeint war das HTML5-Audio-Element. In Flash klappt es, daher fehlt bei der CSS3-Variante das Flügel-Geräusch der Hummel ;-)

Andre schrieb am 09.08.2011 #3

Wie sieht es mit der Datenübertragung und Sicherheit aus?
Was passiert, wenn man z.B. einen HighScore an den Server übermitteln will? Könnte man das nicht bei JavaScript manipulieren. Immerhin ist der Code einsehbar. ?
Mit Flash kenn ich mich nicht aus, daher weiß ich auch nicht, wie es da aussieht.

Matthias schrieb am 11.08.2011 #4

Eine Highscore hat nicht direkt etwas mit JavaScript oder Flash zu tun, da beide Technologien clientseitig ablaufen (und ActionScript lässt sich bekanntlich dekompilieren). Für die Datenübertragung zu einem Server ist eine Middleware (wie PHP) notwendig, die auf dem Server läuft und die Daten verarbeitet.
Grundsätzlich ist es unabhängig von JavaScript/Flash nicht möglich, eine Highscore komplett abzusichern. Mit den richtigen Werkzeugen und dem Wissen lässt sich prinzipiell jeder Highscore-Mechanismus umgehen, da die Daten eben irgendwie den Server übermittelt werden müssen. Und hier kann die Anwendung nicht feststellen, ob es sich um eine "echte" oder eine manipulierte Punktzahl handelt.
Natürlich lässt sich dieser Prozess durch dynamische Algorithmen oder Verschlüsselung in einem gewissen Maß absichern. Das erschwert zwar das Umgehen der Highscore, macht dies aber nicht unmöglich.

Andre schrieb am 15.08.2011 #5

Das meine ich.
Irgendwo muss ja der Aufruf zum Verschicken des Highscores sein. Könnte man die Adresse nicht kopieren und dann manipulierte Daten absenden? Und die Verschlüsselung einfach aus der Javascript Datei auselesen?

Matthias schrieb am 16.08.2011 #6

Das ist richtig. Wenn eine programmierte Verschlüsselung umgesetzt wurde, dann liegt diese in JavaScript offen und kann entsprechend wieder entschlüsselt werden. Es gibt wie gesagt keine sichere Methode (auch nicht in Flash), da sich alle Requests abfangen und manipulieren lassen.