Multik

Aus toolbox_interaktion
Wechseln zu: Navigation, Suche

Die Idee

Realisierung eines interaktiven Spiels, bei dem der Spieler durch seine Handbewegungen die Figur namens "Multik" steuert um die Emotionen des "Multik" zu verändern.


Benötigte Komponenten

Hardware:

  • Grafiktablett
  • Beamer
  • Kamera

Software:

  • Adobe Photoshop
  • Adobe Flash
  • EyesWeb

Und:

  • Grüner Handschuh


Realisierung

Multik wurde mit einem Grafiktablett in Photoshop gezeichnet. Videos in Photoshop zu erstellen hat sich für uns als ein aufwändiges Verfahren erwiesen. In Interaktion wurde uns beigebracht, dass die Bildrate einen Wert von ca. 20 Bildern/Sekunden nicht unterschreiten sollte, um dem menschlichen Auge bei bewegten Bildinhalten einen flüssigen Bildeindruck vermitteln zu können. Also Bilder, die sich mit ungünstiger, mittlerer Geschwindigkeit auf dem Bild bewegen, als „ruckelnd“ wahrgenommen werden. Somit war anfangs unsere Idee Bild für Bild einzeln in Photoshop zu zeichnen und diese dann zu Videos zusammenzufügen. Abgesehen davon, dass sehr viel Zeit in Anspruch genommen worden ist und trotz der richtigen Bildrate entstanden zum Teil nur "ruckelnde" Videos. Unsere Lösung (oder Rettung) war Adobe Flash. Hier erstellten wir letztendlich unsere Animationen. Insgesamt gibt es ein Hauptvideo und 5 weitere verschiedene Videos, die an verschiedenen Stellen (am Körper des Multik) angebracht sind. In Abhängigkeit der Handposition des Spielers wird ein bestimmtes Video abgespielt. Koordinaten der Handposition werden durch Farberkennung des grünen Handschuhs von Eyesweb berechnet.


Durchführung

Zu Beginn wird die Anfangsanimation vom Beamer idealerweise auf eine weiße Fläche (Wand) projiziert. Der Spieler zieht den Handschuh an und stellt sich vor die Projektion. Jetzt kann er durch Handbewegungen verschiedene Reaktionen des Multik (Videos) auslösen. Insgesamt gibt es 6 verschiedene Animationen, die an verschiedenen Stellen (am Körper des Multik) angebracht sind. Dauer der Videos beträgt im Durchschnitt ca 5 Sekunden. Sobald das abgespielte Video zu Ende ist, wird wieder die Ausgangsposition (also die Anfangsanimation) angezeigt. Und der Spieler ist wieder in der Lage eine weitere Reaktion des Multik auszulösen.


Photoshop

Wie oben bereits erwähnt, wurde unsere Figur namens "Multik" mit einem Grafiktablett in Photoshop gezeichnet. Hierzu wurde Grafiktablett der Marke "Trust" verwendet. Es eignet sich sehr gut fürs Zeichnen und ist empfehlenswert. Nachfolgend finden Sie eine Kurzbeschreibung zum Thema "Photoshop" in Verbindung mit dem Kreieren unserer Figur.

Graphic tablet.svg.png

Man öffnet als erstes ein neues Photoshop-Dokument. In der ersten Ebene wird der Körper des Multik gezeichnet. Es ist sehr wichtig mit Ebenen zu arbeiten. Dadurch vereinfacht sich die präzise Bearbeitung. Man widmet sich dabei den einzelnen Bildelementen zu und verletzt die anderen Elemente nicht. Teile des Bildes, die übereinander angebracht sind (in unserem Beispiel die Augen) oder einzelne Körperteile (Arme, Beine) sollte man in verschiedene Ebenen packen. Je mehr Ebenen umso besser, am Schluss kann man die Ebenen wieder miteinander verschmelzen und z.B. alles auf eine Ebene reduzieren, was allerdings in unserem Beispiel nicht vorteilhaft wäre, denn zur weiteren Bearbeitung in Flash (animieren) ist gerade diese Aufteilung sehr wichtig.


Ebene1.PNG


In einer neuen Ebene wird ein Arm gezeichnet. Da es geradezu unmöglich ist in einer anderen Ebene einen exakt identischen Arm zu zeichnen, benutzt man in der Regel "Ebene Duplizieren". Diese Funktion ermöglicht eine exakte Ebene-Kopie zu erstellen. Durch "transformieren", "verschieben", "skalieren" und "spiegeln" findet man die richtige Positionierung der Kopie. Dieses Verfahren eignet sich sehr gut zur Zeit Einsparung.


Hand.PNG


Diese Abbildung zeigt das Endergebnis. Rechts unten im Bild sind alle vorhandenen Ebenen protokolliert. Durchs Benennen der einzelnen Ebenen findet man sich beim Bearbeiten besser zurecht. Des weiteren war dies fürs Kennzeichnen der Photoshop-Ebenen in Flash entscheidend. Ansonsten bestand Verwechslungsgefahr.


Alleebenen.PNG


Photoshop Tutorials unter: http://tv.adobe.com/de/product/photoshop/ Nachfolgend finden Sie eine Kurzbeschreibung zu Adobe Flash.

Flash

Die Figur wurde in Flash animiert. Man benutzt, die in Photoshop, bearbeitete Bilder und erzeugt Animationen durch Option: Bewegungstween.

  • Zunächst wird neues Flash-Dokument erstellt
Erstellen.jpg



  • Importierung einer Grafik
Importieren.jpg


  • Kennzeichnen der Ebenen, die animiert werden sollen


Ebenen.png



  • Auf der Zeitleiste wird ein Schlüsselbild als Endbild erstellt
  • Schlüsselbild kann man beliebig auswählen, abhängig von der gewünschten Zeitdauer der Animation.
  • Animation spielt sich sozusagen zwischen dem ersten und dem Endschlüsselbild ab.
Tween2.png


  • Auf der Zeitleiste wird ein Bild innerhalb beider Schlüsselbilder ausgewählt
  • Über einfügen->Zeitleiste->Bewegungstween erstellen, wird Flash diesen "Bewegungstween" anlegen
  • Jetzt kann man die Grafik (bzw. eine der Ebenen) beliebig transformieren
Tween3.png



EyesWeb

Eyesweb

Farberkennung

Farberkennung
  • Beim Input wird ein Bild von der WebCam erkannt.
  • Durch Klicken in diesem Bild kann man beliebige Farbe auswählen.
  • Die Bereiche mit dieser Farbe werden segmentiert.
  • Das Bild wird in schwarz-weiß umgewandelt.
  • Tipp: Farbe auswählen, die nur einmal im Bild vorkommt, um Rauschen zu vermeiden.


Koordinaten

Koordinaten
  • Hier werden die Koordinaten, die zur Auslösung der Videos führen, festgelegt. Jedes Video hat eigene Koordinaten auf dem Hauptvideo. In unserem Fall gibts es 6 verschiedene Bereiche für 6 Videos, in welchen durch Handbewegung die zugehörige Videos abgespielt werden.
  • Vor x- und y-Koordinaten müssen wir auch den Betrag-Block setzen, damit unsere Koordinaten immer positiv bleiben. Das brauchen wir, um doppeltes Auflösen von Videos zu vermeiden.
  • Wenn x- und y-Koordinaten innerhalb der Toleranz liegen, werden diese Werte durch Und-Verknüpfung in Signal umgewandelt.





Wichtige Blocks

BangOnce sorgt dafür, dass das Video nicht mehrmals von vorne abgespielt wird, wenn man auf der Position für die Auslösung dieses Videos bleibt.


Bang.PNG

Switch-Block verhindert die Auslösung von anderen Videos, wenn das aktuelle noch nicht zu Ende gespielt wurde.

Switch.PNG

Fazit

Dank diesem Interaktionsprojekt konnten wir unseren Horizont erweitern. Wir haben viel gelernt, worauf wir sicherlich auf unserem weiteren Berufsweg zurückgreifen können. Anmerkung: man sollte auf die Qualität der Hardware achten. Da wir nur eine Laptop-Webcam verwendet haben, war die Qualität der Auflösung dementsprechend schlechter als wenn man eine bessere Videokamera zur Aufnahme verwendet hätte. Außerdem hätten wir unsere Animation in einem 3D-Programm wie "Blender" erstellen können. Aber aus Zeitmangel entschieden wir uns für Flash. Und trotz der nicht selten auftretenden Probleme, ob mit Photoshop, Flash oder Eyesweb, haben wir die Motivation nicht verloren um weiterzumachen. *Für die Interessenten ist es möglich, Eyesweb-Patch und Videos herunterzuladen, wenn man den Wunsch hat, unser interaktives Spiel Zuhause auszuprobieren. Links dazu gibt es unten.

Weitere Links

EyesWeb-Patch und Videodaten können Sie hier runterladen: EyesWeb-Patch

Videos