{"id":425,"date":"2011-11-15T16:14:51","date_gmt":"2011-11-15T14:14:51","guid":{"rendered":"https:\/\/porzelt.net\/?p=425"},"modified":"2019-10-04T17:59:23","modified_gmt":"2019-10-04T17:59:23","slug":"making-the-game-teil-5-multi-touch-frameworks-fur-adobe-flashair","status":"publish","type":"post","link":"https:\/\/porzelt.net\/en\/making-the-game-teil-5-multi-touch-frameworks-fur-adobe-flashair","title":{"rendered":"Making The Game – Teil 5: Multi-Touch Frameworks (f\u00fcr Adobe Flash\/Air) – Part 1"},"content":{"rendered":"

Sobald man anf\u00e4ngt Multi-Touch Anwendungen in ActionScript zu schreiben f\u00e4llt einem sehr schnell, auf dass sich Touch-f\u00e4hige Applikationen doch in einigen Punkten von herk\u00f6mmlichen mit Maus und Tastatur bedienbaren Programmen unterscheiden.
\n 
\nWie man sich bereits denken kann ist es nicht \u00fcblich auf Maus-Klicks zu warten um eine Aktion zu starten, da die Maus \u00fcblicherweise nicht verwendet wird. Seitdem Adobe ende 2009 den Flash Player 10.1 ver\u00f6ffentlicht hat besitzt er die F\u00e4higkeit sogenannte Touch Events zu erkennen.
\n <\/p>\n

\"Touch<\/a>
Touch Event: Drag<\/figcaption><\/figure>\n

Diese Touch Events verhalten sich \u00e4hnlich wie die \u00fcblichen Ereignisse die man mit der Maus ausl\u00f6sen kann. So gibt es als Beispiel, \u00e4quivalent zum Dr\u00fccken der Maustaste, dem MOUSE_DOWN <\/code>Ereignis, das TOUCH_BEGIN <\/code>Ereignis. Mit diesen neuen Ereignis-Typen lassen sich somit alte Anwendungen einfach und schnell in ber\u00fchrungsempfindliche Programme umschreiben.
\nDoch Touch-Anwendungen sind im Gegensatz zu mit der Maus steuerbaren Anwendungen nicht auf einen Ber\u00fchrpunkt, welcher bei gew\u00f6hnlichen Anwendungen durch den Mauszeiger dargestellt wird, beschr\u00e4nkt. Touch-Anwendungen k\u00f6nnen, je nach der vorhandenen Hardware, eine Vielzahl von Ber\u00fchrungspunkten \u00fcbermittelt bekommen, die verarbeitet werden m\u00fcssen.
\nUm diese gro\u00dfe Anzahl an Eingabepunkten zu managen besitzt jeder Touch-Punkt und jedes Touch-Ereignis, im Gegensatz zum herk\u00f6mmlichen Maus-Ereignis, neben den XY-Koordinaten noch eine eindeutige Bezeichnung, die touchPointID<\/code>, sowie Informationen \u00fcber die Gr\u00f6\u00dfe des Ber\u00fchrungspunktes (sizeX, sizeY<\/code>) sowie den Druck, der von dem Benutzer auf den Touchscreen ausge\u00fcbt wird (pressure<\/code>). Durch die eindeutige Zuweisung eines Events zu einer ID kann bei sorgf\u00e4ltiger Programmierung genau erkannt werden auf welchen Ber\u00fchrungspunkt ein Objekt ansprechen soll. Dar\u00fcberhinaus kann mittels der Eigenschaft isPrimaryTouchPoint <\/code>eines Punktes, welche angibt ob bereits ein anderer Punkt existiert oder nicht, zum Beispiel ein herk\u00f6mmlicher Rechtsklick realisiert werden.
\n <\/p>\n

\"Gesture<\/a>
Gesture Events: Rotate and Scale<\/figcaption><\/figure>\n

Neben dem einfachen Weitergeben der momentan existierenden Ber\u00fchrpunkte existieren in Flash dar\u00fcber hinaus noch sogenannte Gesten. Diese werden ausgel\u00f6st sobald der Benutzer mit den Fingern spezifische Bewegungsabl\u00e4ufe macht. Zu den bekanntesten Gesten geh\u00f6ren die zoomen Geste, bei der zwei Finger auf einem Objekt positioniert und danach voneinander weg bzw. zueinander hin bewegt werden, oder die rotieren Geste, bei der man seinen Fingern die Form eines Kreises nachf\u00e4hrt.
\n 
\n 
\nAber nicht nur diese zwei Konzepte zur Auswertung von Ber\u00fchrpunkten muss man als Programmierer beachten. Momentan gibt es auch noch Unterschiede in den vom jeweiligen System verwendeten Touch Methode.
\nW\u00e4hrend auf Smartphones und Multi-Touch-Computern meistens betriebssysteminterne Methoden verwendet werden, die Flash direkt, wie oben beschrieben, auswerten kann, existiert dar\u00fcber hinaus noch das sogenannte TUIO-Protokoll, welches meistens von Systemen mit optischen Erkennungsmethoden, wie Multi-Touch Tische, verwendet werden.
\nTUIO steht dabei f\u00fcr Table-Top User Interfaces Objects und ist ein XML-artiges Protokoll. Der \u201eTracker\u201c, der die Ber\u00fchrpunkte erkennt und verfolgt, stellt bei dieser Methode eine Schnittstelle zu der sich die Flash-Anwendung zuerst Verbinden muss. \u00dcber XMLsocket gelangt das Flash-Programm an die Daten der einzelnen Punkte, welche dann durch spezielle Funktionen ausgewertet und weiterverarbeitet werden. Normale Touch-Events k\u00f6nnen somit nicht auf Multi-Touch Hardware verwendet werden die ausschlie\u00dflich \u00fcber das TUIO-Protokoll kommuniziert.
\n 
\nDamit ein Programm nun komplett hardwareunabh\u00e4ngig, z.B. auch an normalen Rechnern ohne Touch-Bildschirm, funktioniert m\u00fcsste der Entwickler auf Mausklicks, native Touch Events sowie TUIO-Daten reagieren. Da dies jedoch einen sehr hohen Aufwand mit sich bringt existieren diverse Frameworks, die den Programmierern einen Gro\u00dfteil der Verwaltung von Ber\u00fchrpunkten abnehmen.
\n 
\n 
\nGestureWorks \/ Open Exhibits<\/strong>
\nEines der gr\u00f6\u00dften und bekanntesten, Touch-Frameworks f\u00fcr Flash ist das kommerzielle GestureWorks. Mit mehr als 20 verschiedenen Touch Events und \u00fcber 180 verschiedenen Gesten bietet es dar\u00fcber hinaus ein riesiges Repertoire an abrufbaren Ereignissen. Diese gro\u00dfe Auswahl kostet in der single-user Variante jedoch bereits $249 USD. Eine Gute alternative zu diesem kostenpflichtigen Framework bietet das f\u00fcr wissenschaftliche Einrichtungen und die schulische Verwendung kostenlose und Quellcode offene Open Exhibits, das auf demselben Grundger\u00fcst wie GestureWorks aufbaut. Open Exhibits bietet daf\u00fcr jedoch nur 20 vordefinierte Gesten, die von Haus aus angesteuert werden k\u00f6nnen.
\n 
\nDer gr\u00f6\u00dfte Vorteil dieser zwei Frameworks ist die Kompatibilit\u00e4t. Wie bereits erw\u00e4hnt existiert neben den nativen Windows Touch-Events auch noch die M\u00f6glichkeit \u00fcber das TUIO-Protokoll Ber\u00fchrungspunkt-Daten zu \u00fcbermitteln. Mithilfe eines entsprechenden Bridge-Programms, welches die TUIO-Daten umwandelt, k\u00f6nnen beide Frameworks sowohl diese als auch native Touch-Events und sogar auch normale Mausklicks verarbeiten. Somit k\u00f6nnen alle drei Varianten auf der Programmiererebene mit einem einzigen EventListener<\/code> angesprochen werden, wobei ohne Framework drei separate ben\u00f6tigt werden w\u00fcrden.
\n <\/p>\n

\n
    \n
  1. \n
    \/\/ GestureWorks \/ Open Exhibits<\/span><\/div>\n<\/li>\n
  2. \n
    addEventListener<\/span>(<\/span>TouchEvent<\/span>.<\/span>TOUCH_DOWN<\/span>,<\/span> toucheDown<\/span>)<\/span>;<\/span><\/div>\n<\/li>\n
  3. \n
     <\/div>\n<\/li>\n
  4. \n
    \/\/ Alle drei Listener einzeln<\/span><\/div>\n<\/li>\n
  5. \n
    addEventListener<\/span>(<\/span>MouseEvent<\/span>.<\/span>MOUSE_DOWN<\/span>,<\/span> mouseDown<\/span>)<\/span>;<\/span>\/\/ mouse click<\/span><\/div>\n<\/li>\n
  6. \n
    addEventListener<\/span>(<\/span>TouchEvent<\/span>.<\/span>TOUCHE_BEGIN<\/span>,<\/span> toucheBegin<\/span>)<\/span>;<\/span>\/\/ native touch<\/span><\/div>\n<\/li>\n
  7. \n
    addEventListener<\/span>(<\/span>TouchEvent<\/span>.<\/span>MOUSE_DOWN<\/span>,<\/span> touchBeginTUIO<\/span>)<\/span>;<\/span>\/\/ TUIO touch<\/span><\/div>\n<\/li>\n<\/ol>\n<\/div>\n

     
    \nDurch dieses Mapping aller drei M\u00f6glichkeiten auf eine einzelne Funktion sind Applikationen, die mit GestureWorks als auch Open Exhibit erstellt werden, auf vielen Systemen ohne Anpassung des Codes lauff\u00e4hig. Und aus programmiertechnischer Sicht \u00fcbersichtlicher.
    \n <\/p>\n

    \"GestureWorks:<\/a>
    GestureWorks: Rotate-Gesture with 2 to X fingers<\/figcaption><\/figure>\n

    Die bereits integrierten Gesten (GestureWorks: 200 Gesten \/ Open Exhibit: 20 Gesten) decken bereits eine gro\u00dfe Anzahl der bekannten Bewegungen aus anderen Multi-Touch Anwendungen ab. Es ist dar\u00fcber hinaus dennoch m\u00f6glich weitere eigene Bewegungsabl\u00e4ufe hinzuzuf\u00fcgen. Inwiefern alle 200 Gesten in GestureWorks sinnvoll sind, h\u00e4ngt von dem jeweiligen Projekt ab, da nicht jede Applikation 1,2,3,4 \u2026n-Finger Gesten ben\u00f6tigt bzw. es aus hardwaretechnischen Limitierungen nicht kann.
    \n 
    \nDar\u00fcber hinaus existieren bereits vorgefertigte Module, die frei verf\u00fcgbar bzw. hinzugekauft werden k\u00f6nnen. Diese Module k\u00f6nnen wie Bausteine in die eigene Applikation eingebunden und verwendet werden. So existieren bereits Module die zum Beispiele simple, virtuelle Tastaturen generieren, die dar\u00fcber hinaus frei dreh und skalierbar sind. Durch diese Module k\u00f6nnen ganze Abschnitte der eigenen Anwendung durch bereits vorgefertigte Bausteine ersetzt werden.
    \nNat\u00fcrlich muss bei der Verwendung der Module auf die entsprechenden Lizenzvereinbarungen der Modul-Eigent\u00fcmer geachtet werden, damit diese entsprechend eingehalten werden.
    \n 
    \nDiese simple Erweiterbarkeit der Gesten und Module verdanken die zwei Frameworks ihrer Architektur. So werden nicht alle Touch-Punkte einzeln betrachtet und verarbeitet, sondern direkt beim Auftreten in einen Vektor gespeichert. Dieser Vektor enth\u00e4lt alle wichtigen Daten der momentan vorhandenen Ber\u00fchrungspunkte. Sobald der Benutzer einen Finger von der Touch-Oberfl\u00e4che nimmt, wird auch der entsprechende Punkt aus dem Vektor entfernt.
    \nDer Vektor mit seinen Daten wird erst beim eigentlichen Frameaufruf (ENTER_FRAME<\/code>) abgearbeitet. Dabei werden alle Touch-Punkte nacheinander abgearbeitet, geschaut welche Touchpunkte zu welchem Objekt auf der B\u00fchne geh\u00f6ren und entsprechende Verschiebungen sowie Drehungen ermittelt. Durch diese Vorgehensweise lassen sich auch mehrere Gesten, wie das Skalieren und Rotieren, in einem Frameaufruf abarbeiten. Da eine Applikation 15-30 Mal in der Sekunde, je nach Einstellungen, ihr Bild aktualisiert, wirkt es f\u00fcr den Benutzer als w\u00fcrden beide Aktionen gleichzeitig ausgef\u00fchrt werden.
    \nDies ist ein gewaltiger Vorteil zu der Verwendung der internen Gesten-Events im Flash-Player. Zwar verf\u00fcgt dieser ebenfalls \u00fcber die Methoden zum Skalieren und Rotieren, jedoch lassen diese sich nicht simultan ausf\u00fchren. So ist beispielsweise die Geste zum Skalieren w\u00e4hrend des Rotierens gesperrt und der Benutzer m\u00fcsste beide Aktionen hintereinander ausf\u00fchren, um das gew\u00fcnschte Ergebnis zu bekommen.
    \n 
    \nDa die Verwaltung der Ber\u00fchrungspunkte Framework-intern vonstattengeht, geben ausgel\u00f6ste Gesten-Aufrufe keine Informationen \u00fcber die verantwortlichen Touch-Punkte zur\u00fcck, sondern nur die daraus ermittelten Daten wie Rotationswinkel oder Skalierungsfaktor.
    \n 
    \n 
    \nTo be continued in part 2…
    \n 
    \n 
    \nKommende Blogeintr\u00e4ge
    \nMaking The Game – Teil 5: Multi-Touch Frameworks (f\u00fcr Adobe Flash\/Air) – Part 2
    \nMaking The Game – Teil 6: Multi-Touch-Ger\u00e4te und ihre Leistungsgrenzen
    \nMaking The Game – Teil 7: Interessante Forschungen im Bereich Multi-Touch
    \nMaking The Game – Teil 8: Vor- und Nachteile NUI <=> GUI
    \nMaking The Game – Teil 9: Spielekonzeption
    \n…
    \n 
    \n 
    \nBilder-Quellen:<\/strong>
    \nAlle in diesem Artikel verwendeten Bilder von Gesten stammen von der     GestureWorks<\/a><\/u> Webseite
    \n 
    \n 
    \n <\/p>\n","protected":false},"excerpt":{"rendered":"

    Sobald man anf\u00e4ngt Multi-Touch Anwendungen in ActionScript zu schreiben f\u00e4llt einem sehr schnell, auf dass sich Touch-f\u00e4hige Applikationen doch in einigen Punkten von herk\u00f6mmlichen mit Maus und Tastatur bedienbaren Programmen unterscheiden.   Wie man sich bereits denken kann ist es nicht \u00fcblich auf Maus-Klicks zu warten um eine Aktion zu starten, da die Maus \u00fcblicherweise nicht verwendet wird. Seitdem Adobe ende 2009 den Flash Player 10.1 ver\u00f6ffentlicht hat besitzt er die F\u00e4higkeit sogenannte Touch Events zu erkennen.   Diese Touch Events verhalten sich \u00e4hnlich wie die \u00fcblichen Ereignisse die man mit der Maus ausl\u00f6sen kann. So gibt es als Beispiel, \u00e4quivalent zum Dr\u00fccken der Maustaste, dem MOUSE_DOWN Ereignis, das TOUCH_BEGIN […]<\/p>\n","protected":false},"author":1,"featured_media":403,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,7],"tags":[17,67,77,81,93,95,98,161,175,179,207,218,252],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/posts\/425"}],"collection":[{"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/comments?post=425"}],"version-history":[{"count":1,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/posts\/425\/revisions"}],"predecessor-version":[{"id":1245,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/posts\/425\/revisions\/1245"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/media\/403"}],"wp:attachment":[{"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/media?parent=425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/categories?post=425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/porzelt.net\/en\/wp-json\/wp\/v2\/tags?post=425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}