der hess

Eigentlich ist ja jedes 0/8/15 Jump and Run Game mit seinen Spielesounds, Musik und der visuellen Darstellung audiovisuell. In meinem Spiele Experiment habe ich dagegen versucht die audiovisuellen Kanäle mit in die Interaktion einzubinden. Die Interaktion des Spiels basiert auf 3 Ebenen:

• Die tradionelle haptische Eingabe über die die Tastatur (Linke und Rechte Preiltasten) - für das Vor- und Zurücklaufen der Hauptfigur.
• Mithilfe der audiobasierten Interaktion (lautes Rufen in das Mikro) kann man die Hauptfigur springen lassen.
• Die visuelle Interaktion wird mit Hilfe der Webcam und einer Lichtquelle umgesetzt. Die Position der Lichtquelle wird getrackt und steuert einen visuellen Schläger im Spiel an. Mithilfe des Schlägers kann man einen Ball so ablenken, dass der Ball einen Gegner treffen kann und diesen dann zerstört.

Hauptziel in meinem Spiel war es zu schauen wie das Game Play bzw. das Gefühl beim Spielen ist. Ob man vielleicht mit den gleichzeitigen Einsatz der verschiedenen Interaktionsebenen überfordert ist. Ich selber habe ein bissl gebraucht bis ich mich an die Steuerung gewöhnt hatte. Ich muss aber auch zugeben, dass ich überhaupt kein aktiver PC-Gamer bin und mich daher sowieso in solchen Sachen ein bissl schwer tue. Damit Ihr einen besseren Eindruck von dem Spiel bekommen könnt, habe ich ein Beispielvideo mit in das Experiment eingebunden. Dort gibts auch eine genauere Erklärung zur Bedienung des Games, sowie eine spielbare Version. Schaut mal rein und habt Spass. Ich freu mich über jedes Feedback!

Nun aber zur technischen Umsetzung:
Der Aufbau und die Logik des Jump and Run Games basiert zum grössten Teil auf das Tile Based Game Tutorial von Tonypa. (Vielen Dank an dieser Stelle f&umlr dieses geniale Tutorial).
Da ich in Sachen Pixelgrafik nicht gerade gut bewandert bin, habe ich mich den Sprite Grafiken des Spielklassikers Super Mario bedient.
Für die Lautstärkenmessung benutzte ich die Standard Mikrofon-Klasse von Flash. Diese Klasse lieferte mir immer einen Lautstärkenwert zwischen 0 und 100 zurück. Ab einer Lautstärke von 30 fängt der Charakter an zu springen.
Die Steuerung des Schläger erfolgt mittels eines Lichttrackings, das aus meinen Webcam Lightwriter Version 2 Experiment stammt. Das Verfahren habe ich in einem älteren Blogeintrag schon näher erläutert, deswegen gibt es hierzu keine näheren Infos.
Perfomancemässig läuft das Spiel auf meinem 4 Jahren alten Laptop (2,4 GHZ Athlon, 512 MB Arbeitsspeicher) gerade so flüssig. Daher gehe ich davon aus, dass das Spiel leider für ältere bzw. schwächere PCs nicht zu empfehlen ist. Ideen zur Programmiercode Optimierung fallen mir momentan leider keine Guten ein.

Technische Anforderung:

• - Flash Player 8 (ActionScript 2)
• - Headset oder Mikrofon
• - Webcam
• - Lichtquelle (Taschenlampe oder Feuerzeug)
• - PC mit ca. 2,4 GHz und 512 MB Arbeitsspeicher oder höher

Stärker Interessierte können sich gern den Sourcecode des Spieles runterladen. Aber seit vorab gewahnt. Der Code ist nicht gerade gut zulesen, da er kaum objektorieniert ist (Zum Teil auf Flash 5 besteht) und ich einige Bugs ein bissl dreckig korrigiert habe...

Download Sourcecode zum Game

-- UPDATE 22.05.2007 --
Stefan Gerbeth (ein Studienkollege) hat ein einen interessanten Link zu meinen Game gepostet. Das Interactive Cinema Game! Lustiges Spiel!

Eigentlich ist ja jedes 0/8/15 Jump and Run Game mit seinen Spielesounds, Musik und der visuellen Darstellung audiovisuell. In meinem Spiele Experiment habe ich dagegen versucht die audiovisuellen Kanäle mit...

Das seit Tagen gute Wetter hindert doch sehr am Arbeiten und das häufige Grillen fängt auch schon langsam an zu Nerven (Kann kein Fleisch mehr sehen).Aus diesem Grund müssen Alternativbeschäftigungen her. Eins ist aber im voraus klar, im Haus rumsitzen geht nicht klar bei dem guten Wetter. Deshalb haben wir uns, vier Studenten aus Furtwangen zusammengerafft um mal wieder was Neues auszuprobieren. Die Mission dieses Tages hiess: HDR-Fotografie. Motiviert von den HDR-Artikeln der spiegel-online.de Redaktion wollten wir auch mal unser Glück mit dieser Technik versuchen. Nachdem wir die erste Schwierigkeiten überwunden hatten (Danke Günni und Katrin) einen passenden digitalen Fotoapparat mit manueller Belichtungszeit zu finden, ging es ab in den Wald. Dort fotografierten wir eine Wurzel, einen Waldweg und einen Baumstapel mit jeweils 10 verschiedenen Belichtungszeiten. Die Fototour dauerte den ganzen Nachmittag an, am Abend fielen wir dann bei Jen ein um die Fotos in Photoshop mit der internen Funktion Datei > Automatisiern > Zu HDR zusammenfügen zu einem HDR-Bild umzuwandeln. Dafür benutzen wir die 10 verschiedenen Bildversionen. Das Ergebnis konnte uns nicht wirklich überzeugen. Es waren schon mehr Details zu sehen, aber der wirkliche HDR-Effekt im Bild blieb aus. Wir versuchten es dann nochmals mit nur 4 verschiedenen Belichtungsversionen eines Fotos, aber das Ergebnis wurde nur minimal besser. Ein bissl enttäuscht ging ich mit den Bilder nach Hause. Zu Hause probierte Matze mit Photomatix (ein HDR PlugIn für Photoshop) nochmals sein Glück. Und siehe da, das HDR Bild an sich, sah auch nicht besser aus. Aber die zusätzliche Anwendung des Tone-Mappings brachte das erwünschte HDR-Ergebnis. Generell hatten aber die von uns erzeugten HDR-Bilder an Farbstärke verloren, was ich persönlich ein bissl schade fand. Aber eine zusätzliche Farbkorrektur wird da sicher noch was retten können. Die Detailtreue der Bilder dagegen macht trotzdem was her, so dass ich jedem empfehlen kann, mal mit dem HDR-Fotografie Verfahren herumzuspielen. In Zukunft werde ich auf jeden Fall damit noch ein bissl rumexperementieren. Den spassig und spannend wars

Die HDR-Bilder:
HDR- urige Wurzel | ein Quellbild dazu
HDR- ein Waldweg | ein Quellbild dazu
HDR Baumstapel | ein Quellbild dazu

-- UPDATE 22.05.2007 --
Vor eins/zwei Wochen war ich nochmal mit Simon und Jen in Furtwangen zum HDR Fotografieren unterwegs. Herausgekommen ist ein Bild mit dem typischen surrealistisches HDR-Look.

Gucklock Kino HDR | Gucklock Kino Quellbild
Gucklock Graben HDR.

Warum gerade diese Bilder von den 5 versuchen am besten geworden sind, keine Ahnung. Bei einem Gespräch mit Philip, empfahl er mir demnächst die Blende zu verändern und nicht die Belichtungszeit. Er hat dadurch bessere Ergebnisse erzielen können. Ich werds mal austesten , sowie den aktuellen HDR Fotografie Workshop in der PAGE (Ausgabe 06.2007)

Das seit Tagen gute Wetter hindert doch sehr am Arbeiten und das häufige Grillen fängt auch schon langsam an zu Nerven (Kann kein Fleisch mehr sehen).Aus diesem Grund müssen Alternativbeschäftigungen...

Nachdem mein Webcam Lightwriter Version 1.0 leider nicht bei allen Webcams so gut funktioniert hat (wegen Helligkeitsproblem), habe ich ein komplettes neue Trackingverfahren geschrieben. Ich arbeite jetzt nicht mehr mit der Funktion Bitmap.getColorBoundsRect(), sondern analysiere fast jedes Pixel des Webcambildes. Bei der ersten Version hatte ich massive Perfomance-Probleme bei der Helligkeitsüberprüfung. Die konnte ich dank eines Tipps meines WG-Kollegen Matze ziemlich einfach lösen. Ich sollte einfach das Webcam Bild in ein Schwarz/Weiss Bild umwandeln. Mit Hilfe des colorMatrixFilter von Matthias Kannengiesser wandelte ich das Webcambild um und hatte somit eine Art Graustufenbild (Helligkeitsbild). Dieses Graustufenbild wandelte ich wiederum mit Hilfe der Bitmap.threshold() Methode und einen variablen Schwellenwert in ein Binärbild um. So waren die hellen Punkte (Lichter) weiss und der Rest schwarz. Damit die Perfomance noch im Rahmen bleibt, skalierte ich das Bitmap auf 80x60 Pixel herunter. Diese Auflösung reichte in meinen Tests für ein erfolgreiches Tracking aus.

Nachdem ich das Bild jetzt endlich fertig bearbeitet hatte, ging es an das eigentlich Tracking. Ich suchte im Bild nach einem weissen Pixel, der noch zusätzliche weisse Pixel als Nachbarn hat (mind. 3 bis 4). Ist diese Bedingung erfüllt, ging ich davon aus, dass es sich an dieser Stelle um ein Licht handeln müsse. Um die Grösse des Lichtes zu ermitteln, überprüfte ich die immer aufeinander folgenden horizontalen Nachbarn nach der obigen (weissen Nachbar) Bedingung. Wenn diese Bedingung nicht mehr erfüllt ist, ging ich davon aus, dass ich die Breite des Lichtes grob ermittelt hatte. Nun musste ich die Höhe des Lichtes ermitteln. Die Höhe ermittelte ich genauso wie die Breite des Lichtes nur das ich die vertikal aufeinander folgenden Pixel überprüfte. Dieses gesamte Verfahren lieferte mir schon eine zufriedenstellende Information über die Position des Lichtes, aber nicht über die ungefähre Grösse. Denn bei der Breite war dieses Verfahren noch nicht stabil genug. Dieses Problem konnte ich aber mit einem einfachen Trick lösen. Ich halbierte die ermittelte Höhe des Lichtes und überprüfte dort (y= yWertLinksOben + lichtHöhe/2) nochmals alle horizontalen aufeinander folgenden Pixel nach weissen Nachbarn. Wenn diese ermittelte Breite grösser war (das ist sie in der Regel auch), übernahm ich diese als aktuelle Breite für das Licht. Am Ende dieses Verfahren gebe ich ein Rechteck-Objekt zurück, das genug Informationen zu der EINEN getrackten Lichtquelle beinhaltet.

Froh darüber, das ich das Tracking erfolgreich geschafft hatte (in Furtwangen), wollte ich es zu Hause bei meinen Eltern (in Ober-Mörlen) weiter verbessern. Und siehe da es funktioniert nicht mehr. Und warum?! Weil eine zweite Lichtquelle im Webcam Bild war. Mein Algortihmus wusste nie welches Licht jetzt getrackt werden sollte. Ein Differenzverfahren wollte ich nicht benutzen, da dadurch die Bildinformation meines Lichtes erheblich verändert werden kann und wegstellen konnte ich das Licht auch nicht, Grr. Da meiner Meinung nach, so etwas aber ein absoluter Standardfall sein könnte, kam mir die Idee mehrere Lichter zu tracken. Also hab ich mich wieder dran gesetzt um das Verfahren auch noch für mehrere Lichter fit zu machen. Lichter zu finden war ja zu diesem Zeitpunkt kein Problem mehr, nur mehrere Lichter zu finden ohne das dabei die Perfomance in die Knie geht, war da schon schwerer umzusetzen. Ich durfte einfach die schon überprüften Pixel nicht nochmals überprüfen - Wer sich den Algortihmus genau anschaut, wie ich die Grösse des Lichtes ermittle wird verstehen was ich meine - Als erstes wollte ich dann die überprüften Pixel mit einer anderen Farbe kennzeichnen, was mir aber das Webcambild im nach hinein verfälscht hätte. Und das fand ich gar nicht gut. Nächster Gedanke war es ein extra 2dim. Array (80x60) anzulegen und dies mit den Stadien 0=noch nicht überprüft und 1=schon überprüft zu belegen. Aber das war mir viel zu umständlich, bis auch hier mir wieder jemand den ultimativen Tipp gab, den nicht genutzten Alpha Kanal für dieses Problem zu nutzen (Dank hier an Helge - Stefan Eckert). Denn wenn der Alpha Kanal den Wert 255 hat, muss ich die Pixel überprüfen, wenn er den Wert 0 hat ist eine Überprüfung nicht mehr nötig. Mit Hilfe dieses Verfahren bekam ich alle Lichtquellen heraus gefiltert. Jetzt musste ich sie nur noch passend sotieren, so dass z.B. Lichtquelle 1 auch immer als Lichtquelle 1 erkannt wird. Das machte ich mit einem Distanzvergleich alter Trackingergbnisse mit den neuen Trackingergebnissen. Dort wo die Distanz zwischen den alten und neuen TrackingRechtecken am Geringsten ist, ist ein Paar gefunden und es musste sich um die gleiche Lichtquelle handeln. Ja und in meinen Tests mit 2-3 Lichtquellen funktioniert das auch ganz gut. Schaut mal rein.

Sourcecode Webcam Lightwriter Version 2.0

Webcam Lightwriter Version 1.0 wens dann doch noch interessiert. Die Vorschau der ersten Version gibts noch auf der Flashhilfe.de Seite anzuschauen

-- UPDATE 18.05.2007 --
Eine nette passende Interaktion für den Lightwriter. Danke Jonas für den Tipp!

-- UPDATE 17.06.2007 --
Die LightTracking Klasse wurde in Sachen Anwenderfreundlichkeit überarbeitet, so dass ihr diese Klasse super einfach für eure eigenen Experimente benutzen könnt. Den Download gibt es unter Interactive Webcam Package mit ausführlicher Doku und Beispielcode zum leichteren Einstieg.

Nachdem mein Webcam Lightwriter Version 1.0 leider nicht bei allen Webcams so gut funktioniert hat (wegen Helligkeitsproblem), habe ich ein komplettes neue Trackingverfahren geschrieben. Ich arbeite jetzt nicht mehr mit...

Eine kleine Sammlung von sehr guten Helferlein Klassen und umfangreicheren Klassenbibs für das Lösen grösserer Flashproblemen

Allgemein:

• as2lib.org :AS 2 -verbessertes Event- und Error-Handling uvm.
• Pixlib :AS 2 - Logging, Data Preloading uvm.
• senocular.com :AS 1-3 - Utility-, Drawing und GUI Klassen uvm.
• Data Structures :AS 3 - Datenstruktur Bibliothek
• PaperVision 3D :AS2 und 3 - Flash 3d Bibliothek
• flashsandy.org :AS 2-3 - Flash 3d API
• motor2 :AS3 - Flash Physik Engine für Games und sonstiges
• APE :AS3 - Flash 2D Physik Engine für Games

Filter und Animation:

• Image Processing Bibliothek :AS 3 - Bildbearbeitungsklassen
• popforge :AS 3 - Audiofilter und -bearbeitungs Framework und noch andere sehr brauchbare Dinge
• flash-fmp.de :AS 1 und 2- Filter Managing Prototyp Klassen
• Twease :AS2- datenschlanke Tweening Engine für Werbebanner und Komponenten
• Fuse AS Animations- und Filter Bibliothek
• robertpenner.com :AS1 und 2 - Easing Animations Klassen für Abbremsen und Beschleunigung
• Animation Package :AS 2 und 3 - Animations Bibliothek
• tweener :AS2 und 3 - Bibliothek für Tweenings

Interaktionsklassen:

• aswing.org :AS 2 und 3 - Bibliothek für RIA GUIs
• Yahoo! ASTRA :AS3 - Bibliothek für RIA GUIs
• betriebsraum.de :AS 2 -Klassen für Menüleisten, Statusboxen, Browser- Usability usw.
• flare :AS3 - API für interaktive Informationsvisualisierung

Datenkommunikation:

• wiiflash.org :AS3- API für Wiimote und FLash
• swxformat.org :AS2- Datenformat API für eine Art Flashremoting mit PHP (besonders gut geeignet für Mobile Endgeräte - Flash Lite)
• amfphp.org :AS2- Flash Remoting API mit PHP
• AMF.NET :AS2- Flash Remoting API mit .NET
• Flashinterface :AS 2 und 3 - Kommunikation zwischen der AS Virtual Machine 1 und 2
• Xpath4as2 :AS2 - Bibliothek für X-Path Funktionalität
• Fzip :AS3- Klasse für Zip Daten Bearbeitung
• SMTP Mailing :AS3- Klasse für Email-Funktionalität
• JPEGencoder :AS3 - Speichern von .jpgs nur mittels Flash
• PNGencoder :AS3 - Speichern von .pngs nur mittels Flash

Generell findet man immer wieder sehr interessante Projekte auf der osflash.org Seite, sowie auf der Seite actionscriptclasses.com gibt es desöfteren einen kleineren Helferlein .

-- UPDATE 27.09.2007 --
Auf Google Code Project kann man eine ausführliche Auflistung vieler ActionScripts APIs und Bibs bekommen, ähnlich wie bei OSFlash. Dank an dieser Stelle an Simon Schweizer, der mich darauf aufmerskam gemacht hat!

Eine kleine Sammlung von sehr guten Helferlein Klassen und umfangreicheren Klassenbibs für das Lösen grösserer Flashproblemen Allgemein: as2lib.org :AS 2 -verbessertes Event- und Error-Handling uvm. Pixlib :AS 2 - Logging,...