Making The Game – Teil 5: Multi-Touch Frameworks (für Adobe Flash/Air) – Part 2

Zu Teil 1
 
Touchlib / Bubblebird TUIO-AS3 Framework
Neben den Frameworks für native Touch-Ereignisse existieren Frameworks, die hauptsächlich auf die Verarbeitung von TUIO-Touch-Events ausgelegt sind, welche meistens von Multi-Touch-Tischen oder Multi-Touch-Wänden verwendet werden.
 
Touchlib ist eins der Frameworks, welches schon seit Langem für diese Zwecke entwickelt wird. Bereits vor der Einführung von nativen Touch-Events in Flashplayer 10.1 war es mittels einem Tracker (wie in Teil 3 bereits erklärt) und dem von der NUI-Group bereitgestellten Touchlib-Framework möglich Multi-Touch fähige Geräte und Anwendungen zu erstellen.
Touchlib ist darüber hinaus, neben dem Flash Framework, auch ein Tracking Programm für Windows. Jedoch wird meistens das Plattformunabhängige Community Core Vision (CCV) eingesetzt um das Kamerabild zu verarbeiten.
 
Um eine Multi-Touch-Anwendung mittels Touchlib zu erstellen muss zuerst eine Verbindung mit dem TUIO-Server hergestellt werden. Dieser übermittelt auf einem vorgegebenen Port, in diesem Fall 3000, die Daten der Berührungspunkte.
 

  1. //TUIO-Connection
  2. TUIO.init(this, „localhost“, 3000,„“,true);

 
Nachdem diese Verbindung hergestellt wurde, können bereits Touch-Events empfangen und ausgewertet werden. Neben den bereits bekannten Event-Listenern bietet das Framework darüber hinaus Funktionen, um alle gesicherten Touch-Punkt-Daten abzurufen.
Wie bei GestureWorks werden nämlich alle momentan aufgetretenen Berührpunkte in einer Liste gespeichert. Über den returnBlobs()-Aufruf lassen sich so alle Touch-Daten zurückgeben, um diese manuell zu verarbeiten.
 

  1. //Event Listener for Touch Down Events
  2. addEventListener(TouchEvent.MOUSE_DOWN, touchDown);
  3.  
  4. //Returns all Touchpoints
  5. TUIO.returnBlobs();

 
Dadurch, dass das Framework mit eines der Ersten war, welches das Prinzip von mehreren Berührpunkten verfolgte wurde zur Erleichterung, bei der Programmierung von Anwendungen, die RotatableScalable-Klasse entwickelt. Diese Klasse ermöglicht es, durch Vererbung an ein beliebiges Objekt, Objekte nach belieben zu drehen, skalieren oder verschieben.
Dazu muss in der Objekt-Definition nur angegeben werden welche dieser drei Eigenschaften das Objekt besitzen sollte.
 

  1. import flash.display.Sprite; // ring class
  2. import app.core.action.RotatableScalable;  
  3.  
  4. class Ring extends RotatableScalable {      
  5. public function Ring(thickness:Number = 10, radius:Number = 40) {          
  6. //—RotatableScalable options————            
  7. //noScale = true;            
  8. noRotate = true;                
  9. //noMove = true;        

 
Somit kann sogar dynamisch zur Laufzeit ein statisches Objekt zu einem dynamischen, bearbeitbaren gewandelt werden. Objekte wie virtuelle Drehregler lassen sich ebenfalls mit diesen Funktionen realisieren.
 
 

reacTIVision: fiducial marker ID11
reacTIVision: fiducial marker ID11

Eine Erweiterung des Touchlib-Frameworks stellt das Bubblebird TUIO-AS3 Framework dar.
Dieses ist ebenfalls ein Framework, welches auf Geräten mit optischer Gestenerkennung und TUIO-Protokoll eingesetzt wird. Wie Touchlib baut das Framework eine Verbindung zum TUIO-Server auf um die Berührpunkt-Daten entgegen zu nehmen. Darüber hinaus kann Bubblebird jedoch auch sogenannte „Fiducial markers” erkennen.
 
Das aus dem italienischen stammende Wort fiducial bedeutet übersetzt so viel wie „Passmarke“, welche es in diesem Fall auch ist. Fiducials sind eindeutige Markierungen, die von einer Kamera aufgenommen und von dem Tracker eindeutig erkannt werden. Meistens werden diese fiducials unter Spielfiguren oder Objekten angebracht, damit diese eindeutig verfolgt werden können. Durch diese Markierungen ist es nämlich nicht nur möglich die Position des Objektes herauszufinden, sondern auch die genaue Ausrichtung zu bestimmen. Somit können auch Drehungen auf der Stelle erkannt und verarbeitet werden.
 
Ein bekanntes Beispiel, welches mit fiducials arbeitet ist der reactable. Auf diesem können verschiedene Objekte, die entsprechende Markierungen an der Unterseite haben, platziert werden, wodurch objektabhängig ein Klang oder eine Tonfolge abgespielt wird. Neben den Ton-Objekten existieren darüber hinaus auch Objekte, welche durch Drehung die Lautstärke, die Oktave oder die Geschwindigkeit einzelner Ton-Objekte verändern.
So können verschiedene Takte und Melodien generiert werden.
 

 
Mit dem Bubblebird-Framework können diese fiducials ebenfalls erkannt und als Eingabemedium verwendet werden. Wie bei Touch-Events besitzt jeder Marker eine eindeutige ID, welche zum Beispiel nach einem Event-Aufruf ausgelesen werden kann.
 

  1. // fiducial events
  2. addEventListener(TuioFiducialEvent.ADD, fiducialAdd);
  3. addEventListener(TuioFiducialEvent.MOVE, fiducialMove);
  4. addEventListener(TuioFiducialEvent.REMOVED, fiducialRemoved);
  5. addEventListener(TuioFiducialEvent.ROTATE, fiducialRotate);

 
Somit können mittels des Bubblebird TUIO-AS3 Frameworks sowohl Touch-Events als auch Objekte mit entsprechender Markierung als Eingabemedium verwendet werden, was es zu einem großen Favoriten bei der Arbeit mit TUIO Multi-Touch Geräten macht.
 
 
Multi Touch Vista
Multi Touch Vista ist zwar kein Flash Framework, aber ich will es an dieser Stelle dennoch erwähnen.
Da Windows Vista und Windows 7 bereits Multi-Touch fähige Hardware unterstützt, aber noch nicht jeder Endanwender diese zu Hause stehe hat, entwickelte die Open Source Community Multi Touch Vista, um Multi-Touch am heimischen PC auszuprobieren. Dabei wirkt das Programm als Treiber, der verschiedene Eingabearten in Windows Touch-Ereignisse umwandelt.
Somit kann Multi Touch Vista unter anderem TUIO-Daten oder die Daten von mehreren Computermäusen umwandeln. Somit können Benutzer auch an eigentlich nicht Touch-Fähigen Rechnern Multi-Touch Programme testen bzw. verwenden.
 
Durch den Einsatz eines solchen Treibers auf TUIO-Fähigen-Geräten wie Multi-Touch Tischen kann man auch in der Anwendungsprogrammierung auf die nativen Touch-Ereignisse zurückgreifen und muss nicht, verschiedene Touch-Events abfangen und diese differenziert auswerten.
 
 
Native Touch Events in Flash 
Seit der Einführung des FlashPlayers 10.1 und Adobe AIR 2 Ende 2009 unterstützt auch Flash und ActionScript Touch Events. Dabei orientieren sich die Entwickler an den bereits existierenden Maus-Ererignissen, nur dass im Gegenzug zur Maus mehrere simultane Touch-Punkte auftreten können und mausspezifische Konzepte wie das Hovering bei Touch-Ereignissen nicht existieren.
 
Je nach Bedarf kann man in Flash auf Touchpunkte oder Gesten reagieren. Dabei ist jedoch zu beachten dass man sich nur für eine dieser zwei optionen entscheiden kann.
 

  1. // Touchpoints
  2. Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
  3.  
  4. // Touch Gestures
  5. Multitouch.inputMode = MultitouchInputMode.GESTURE;

 
Während bei der TOUCH_POINT-Methode bei jedem Auftreten und Bewegen eines Berührpunktes ein Ereignis ausgelöst wird, wird bei der Verwendung des GESTURE-Modus das Ereignis erst dann ausgelöst, sobald ein bestimmter Bewegungsablauf mit den Fingern vollzogen wurde.
Dabei ist es System- und hardwareabhängig welche Gesten unterstützt werden. Um dies zur Laufzeit herauszufinden bietet Flash die Methode Multitouch.supportedGestures an, welche einen String-Vektor mit den verfügbaren Gesten zurückliefert.
 

gesture events supported on various platforms
gesture events supported on various platforms

 
Auch wenn bei der Verwendung von Gesten die Möglichkeit existiert weitere, eigene hinzuzufügen, ist dieser Modus für komplexe und Multiuser-Anwendungen unzureichend.
So ist es nicht möglich, dass zwei Benutzer gleichzeitig auf zwei verschiedenen Objekten Gesten anwenden, selbst wenn es hardwaretechnisch problemlos ginge. Auch ist es für den Benutzer nicht möglich zwei Gesten gleichzeitig auf einem Objekt auszuführen. So ist ein gleichzeitiges Skalieren und Rotieren, zum Beispiel in einer Bilder-Anwendung, mittels der nativen Gesten nicht machbar.
Die fehlende Möglichkeit multiple sowie simultane Gesten auszuführen ist das größte Manko des nativen Gesten-Supports.
 
Falls man jedoch diese Möglichkeiten in seiner Applikation verwenden möchte, müssen die entsprechenden Gesten im TOUCH_POINT-Modus selbst ausprogrammiert werden.
Jedoch steht auch in diesem Eingabemodus das sogenannte dragging, das Verschieben eines Objektes, mit einem Finger zur Verfügung.
 

  1. // Drag an object while listen to TouchEvents
  2. mySprite.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
  3. mySprite.addEventListener(TouchEvent.TOUCH_MOVE, onTouchMove);
  4. mySprite.addEventListener(TouchEvent.TOUCH_END, onTouchEnd);
  5.  
  6. function onTouchBegin(evt:TouchEvent) {
  7.     evt.target.startTouchDrag(evt.touchPointID);
  8. }

 
 
Fazit
Da ich in meiner Anwendung bisher noch nicht die Notwendigkeit sehe Objekte zu drehen oder Verschieben werde ich in meinem Projekt auf jegliche Frameworks verzichten, da ich auf allen System mit den nativen Touch-Events arbeiten kann.Falls es im Laufe meiner Arbeit dennoch dazu kommt, dass ich Gesten zum Skalieren und Rotieren benötige, werde ich diese selbst Programmieren und natürlich die entsprechenden Klassen hier zur Verfügung stellen.
 
 
Kommende Blogeinträge
Making The Game – Teil 6: Multi-Touch-Geräte und ihre Leistungsgrenzen
Making The Game – Teil 7: Interessante Forschungen im Bereich Multi-Touch
Making The Game – Teil 8: Vor- und Nachteile NUI <=> GUI
Making The Game – Teil 9: Spielekonzeption

 
 
 
Bilder Quellen:
Das Bild mit der unterstützen Gesten auf verschiedenen Systemen stammt von Adobe.
Das verwendete YouTube-Video ist Eigentum des entsprechenden Kanalbesitzers.
 
 

Schreibe einen Kommentar