Multitouch and Beyond

Die Entwicklung und vor Allem das Programmieren unserer Multitouch-Anwendung schreitet unweigerlich voran. Zwar gibt es immer wieder Rückschläge und Herausforderungen aber irgendwie geht’s immer. Neben dem $1Recognizer und Box2D haben wir inzwischen einige andere AS3-Klassen eingebunden, die maßgeblich zu unserer Anwendung beitragen.

Animationen mit GreenSock

GreenSock Logo

GreenSock ist eine Sammlung von Klassen um schnell und einfach Objekte per ActionScript zu animieren. GreenSock TweenMax bietet z.B. Effekte wie Ein/Ausblenden, Animieren, Drehen, Skalieren, etc. Die Bibliothek ist verlässlich, einfach zu nutzen und wird von einer aktiven Community ständig weiter entwickelt.

.

Schieberegler mit SliderUI

Die SliderUI von Matt Przybylski ist eine Klasse um Schieberegler (Slider) in Flash zu generieren. Somit können recht schnell eigene Slider gebastelt werden, ohne auf die vorgefertigten Komponenten von Flash zurückgreifen zu müssen. SliderUI bietet u.A. Methoden um die Position des Schiebereglers auf der Skala zu bestimmen oder Start- und Endwerte festzulegen.
Komplett “Out-of-the-Box” konnte die Klasse allerdings nicht verwendet werden, weil sie für die Verwendung mit einer Maus entwickelt wurde. Es waren noch einige kleine Anpassungen an unser Multitouch-Framework GestureWorks nötig.

Update: Es gibt die Schieberegler-Klasse auch in der Version SliderUI v1.5. Die neue Version beinhaltet u.A. ein Flash-CustomEvent, was z.B. bei unserer Anwendung zum Einsatz kommt. Mit einem CustomEvent lässt sich in Flash die Kommunikation zwischen unabhängigen Objekten realisieren.

Performance-Überwachung mit SWF Profiler

SWF Profiler Screenshot

Ein Thema plagt uns leider immer noch: Die Performance unserer Anwendung. Leider sind die  Berechnungen und Kollisions-Erkennungen von Box2D sehr rechen-intensiv. Hinzu kommen eine Full-HD-Auflösung (1920×1080), zahlreiche grafische Elemente, zahlreiche externe Klassen und viele interne Funktionen. Das Alles macht die Physik-Lernsoftware mit jedem gezeichneten Element spürbar langsamer. Da unser Konzept aber eigentlich nur zwei Elemente (Kugel und Schiefe Ebene) vorsieht, werden wir uns nicht ausgiebig mit dem Thema Performance-Optimierung kümmern.
Ein Tool zum Überwachen der Performance von Flash haben wir dennoch eingebaut. Der SWF Profiler lässt sich einfach in bestehende Projekte integrieren und zeigt z.B. die aktuelle Frame-Rate, sowie die Arbeitsspeicher-Nutzung an.

Heute gibt’s eine kleine Video-Demonstration vom bisherigen Stand unserer Anwendung:

[swfobj src="http://www.info-design.net/multitouch/wp-content/uploads/2010/06/2010-06-12_1235.swf" alt="TouchPhysics Video Demo - Flashplayer nötig!" width="580" height="400"]

(Die Performance der Anwendung lässt noch etwas zu wünschen übrig. Das liegt im Video zum einen an der Screencasting-Software, zum Anderen müssen wir uns aber generell erst noch um Performance-Optimierung kümmern.)

Bisher implementierte Funktionen:

• Zeichnen: Gesten-Erkennung für Kugel + Schiefe Ebene
• Objekte: Erzeugen entsprechender Objekte basierend auf Größe und Position der Zeichnung
• Physik: Physik-Engine mit Erdanziehungskraft und Kollisionserkennung
• Objekt-Manipulation: Drag n’ Drop, Löschen per Doppel-Tap
• Steuerung: Pausieren der Physik-Welt

Keine Objektorientierung mehr

Zur Umsetzung ist noch zu sagen, dass wir uns von einer Objektorientierten Programmierung wieder entfernt haben. Unser Überlegungen bzgl. Klassen- und Vererbungsbeziehungen waren zwar der “saubere” Ansatz eine solche Anwendung zu programmieren, aber in der Umsetzung deutlich komplexer als erwartet.  Vor Allem die Kommunikation zwischen unabhängigen Klassen (was für die Integration von Box2D unbedingt nötig ist) hat uns große Probleme bereitet.
Wir haben uns deshalb entschieden nur noch einen “Minimal-OOP-Ansatz” zu verfolgen und haben (fast) alle Funktionen, etc. wieder in unsere Dokumentenklasse geschrieben. Das ist zwar nicht besonders elegant und widerspricht dem eigentlichen Sinn der Objektorientierung aber es funktioniert (für uns) einfacher!

Gestaltung

Das Video demonstriert nicht nur die Funktionen unserer Anwendung, sondern ist auch eine kleine Vorschau auf die Gestaltung. Wir haben uns in den vergangen Tagen viele Gedanken zu Interaktionselementen, Farben, Formen, Typografie, etc. gemacht. Unser Ziel ist ein Spagat zwischen dem Look and Feel einer Handzeichnung und, aus dem PC Bereich, bekannten Elementen zur Interkation. Näheres dazu in Kürze!