BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Sound, Spritesheet, Werbeagentur Mannheim, magenta
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Sound
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Spritesheet
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Sound
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Sound
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Sound
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Spritesheet
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Sound
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Sound
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Sound
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Spritesheet
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Sound
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Sound
BASF SE, Commha Consulting, Browsergame, SuperGoo, Animation, Spritesheet

BASF Browsergame „SuperGoo“

3600 Bilder für eine gute Zusammenarbeit

Um die Zusammenarbeit im Unternehmen zu vereinfachen, hat BASF die IT-Arbeitsplatzstruktur modernisiert und u.a. neue Tools für Social Collaboration, für Videokonferenzen und ein neues Office-Paket eingeführt. Damit ergeben sich vielversprechende neue Möglichkeiten im täglichen Arbeits- und Aufgabenbereich. Zunächst müssen sich die neuen Tools jedoch gegen alte und langjährig gewohnte Abläufe durchsetzen.

Die Herausforderung: wie können die Mitarbeiter über die neuen, kollaborativen Arbeitsmöglichkeiten informiert und für diese sensibilisiert werden? Die große Anzahl an Mitarbeitern (mehrere Zehntausend Kollegen) macht die effizient Durchführung von Schulungen sowie eine übersichtliche Zusammenstellung an Informationsunterlagen und deren Verteilung an die Mitarbeiter unmöglich.

Spielend lernen – ein Gemeinschaftsprojekt von Commha und magenta

In Zusammenarbeit mit der Heidelberger Spezialberatung Commha Consulting entwickelte die Mannheimer Werbeagentur magenta ein Browserspiel, mit dem das Thema „kollaboratives Arbeiten“ spielerisch und unterhaltsam vermittelt wird. Verschiedene Level führen in unterschiedliche Bereiche des Unternehmens. Jedes Level enthält Aufgaben, bei deren Lösung die neuen Arbeitsweisen spielerisch eingesetzt werden müssen. Immer wieder werden dazu hilfreiche Tipps und Tricks eingestreut.

„Unsere Zusammenarbeit mit magenta war auch in diesem Gemeinschaftsprojekt wieder ausgesprochen reibungslos und effizient.“

Hubert Rasig Executive Account Lead, Commha Consulting

Während Commha Consulting die Idee und die Storyline entwickelte und die Inhalte passend zum didaktischen Konzept aufbereitete, erarbeitete magenta das technische Konzept und die Usability. Die Mannheimer Werbeagentur zeichnet zudem für die komplette grafische und animatorische Ausarbeitung sowie in vollem Umfang für die Umsetzung des schrittweise in Leveln ausgerollten Spieles verantwortlich.

„Unsere Zusammenarbeit mit magenta war auch in diesem Gemeinschaftsprojekt wieder ausgesprochen reibungslos und effizient“, skizziert Commha-Executive Account Lead Hubert Rasig die Zusammenarbeit. „Über die hohen designerischen und technischen Anforderungen hinaus ist das magenta-Team einfach ein verlässlicher Anker, wenn es kurzfristig heiß hergeht und sich Anforderungen auch mal ganz kurzfristig ändern.“

Integration in die Infrastruktur von BASF

Dabei galt es, einige unscheinbare aber doch anspruchsvolle Anforderungen zu berücksichtigen. Insbesondere die Anbindung an die kundenseitige Infrastruktur (Server), die geforderte Kompatibilität mit bestimmten Browsern sowie der ressourcenschonende Umgang mit der zur Verfügung stehenden Bandbreite erforderten eine optimal abgestimmte Herangehensweise, sowohl in technischer als auch in grafischer Hinsicht. Eine anonymisierte Benutzerverwaltung für eigene Spielstände und Avatare, die Sprachwahl zwischen Deutsch und Englisch und eine individuelle Bibliothek mit den im Spielverlauf gesammelten Informationsmaterialien rundeten die Featureliste ab.

Geringe Ladezeiten trotz komplexem Aufbau

Durch die enge Zusammenarbeit zwischen Grafikern und Programmieren konnte magenta trotz des Einsatzes zahlreicher animierter Spielfiguren, Hintergründe und Gegenstände sowie von Sounds und Musik geringe Ladezeiten gewährleisten. Alle Beteiligten griffen über ein Repository auf den aktuellen Entwicklungsstand zu.

Spritesheet als optimale Lösung

Im Zuge der Dateigrößenoptimierung wurden ausschließlich Spritesheet-basierte Animationen verwendet: dabei wurde jede Animation in eine Sequenz aus Einzelbildern zerlegt, die wiederum in einer großen Grafik zusammengefasst wurde. Per Skript konnte die Grafik dann wieder als Animation abgespielt werden, wobei nacheinander die Einzelbilder in der gewünschten Reihenfolge und Geschwindigkeit in einem Ausschnitt gezeigt wurden. Die Möglichkeit, für jedes Einzelbild die Geschwindigkeit zu variieren, erwies sich als äußerst ressourcenschonend, weil dadurch die Anzahl der benötigten Bilder und die damit verbundenen Datenmengen erheblich reduziert werden konnte.

Während eine fortlaufende Animation immer mit einer festen Bilderrate pro Sekunde läuft (z.B. 25) – und dies auch, wenn der Protagonist gerade eine kurze Bewegungspause macht – genügte hier tatsächlich nur ein einziges Standbild, dem man die Anzeigedauer der Bewegungspause zuwies.

Dabei entstanden insgesamt ca. 3600 Einzelbilder für Charaktere, Inventory, Gegenstände und Szenen, die in Größe und Farbumfang jeweils nochmals optimiert wurden.

„Das Kommunikations­ziel entscheidet über Konzept, Umsetzung und Medium.“

Matthias Tamm
Werbekaufmann, Geschäftsführer