In 24 Stunden eine Lösung entwickeln, also einen funktionierenden Prototypen auf die Beine stellen. Dieser Herausforderung habe ich mich auch dieses Jahr erneut am YB Hackathon gestellt.

Gut aufgestellt ist halb gewonnen

Ich starte im Be Like Grace Team “Work Food Balance”. Der Name kommt daher, dass wir alle gerne gut essen. Ich kenne zwar die Teammembers, habe aber noch nie oder nur kurz mit ihnen zusammengearbeitet. Die Rollenverteilung in unserem interdisziplinären Team klingt vielversprechend: Rafael Wampfler und Christoph Hofer sind als Entwickler gesetzt, Patrick Hollinger ist für alles Grafische und das Hosting zuständig, während Daniela Bodmer und ich uns um die kreativen Ideen, die Koordination und den Pitch kümmern. So sind alle zu erfüllenden Aufgaben adressiert.

Die Challenge: Ein Arcade Game für YB

Wir sind uns schon im Vorfeld einig, dass unsere Wunsch-Challenge das Arcade Game vom BSC YB ist: “Entwickle ein webbasiertes YB Arcade Game für Mobile Phones. Lass dabei Inhalte mit starkem YB-Bezug einfliessen. Das Game soll auf den meisten Smartphones spielbar und einfach verständlich sein”. Wir diskutieren kurz, was in Frage kommt. Klassisches Jump & Run Game! Aber ist das nicht wahnsinnig kompliziert umzusetzen? Das Phaser Tutorial ist schnell durchgearbeitet und eine erstes Minigame mit diesem Framework steht. Wir haben so viel die bessere Vorstellungskraft, was möglich ist, und was nicht. Auch können wir den Aufwand in etwa abschätzen.

tutorial

Das Ergebnis des Tutorials

Der Countdown läuft

11.00 Uhr – Wir starten schnell und effektiv. Das Storyboard und die Ziele des Games entstehen, die zu sammelnden Elemente werden definiert, gezeichnet und programmiert. Aus aktuellem Anlass muss der YB Fan im Game den Corona-Viren ausweichen und andere Menschen im Stadion meiden. Punkte gibt es für eingesammelte YB-Würste, Biere, Vuvuzelas, YB Münzen oder Fussbälle. In jedem Level sind Buchstaben versteckt, die es auch einzusammeln gilt. Hat man alle Buchstaben erwischt, ergeben sie das YB “FOREVER” Logo. Ob unser Draft der Ideen auf dem Whiteboard immer noch so einfach umzusetzen ist? Wir bezweifeln es… Doch die Jungs sind zuversichtlich und finden: “Gebt alles ein, was ihr wollt, wir schauen, ob machbar”! Das gibt uns maximalen kreativen Freiraum, welchen wir ausloten und ein cooler Teamspirit entsteht.

mockup des gameplays

Mockup von Level 1

Weiter gehts mit dem Aufbau der Static-Web-App in der Azure Cloud. Leider ein längerer Task, als erwartet. Die vom Technologie Partner Microsoft zur Verfügung gestellten Vouchers lassen sich nicht einlösen und wir verlieren unnötig Zeit. “Lasst uns erst mal Abendessen!” – der Gruppenname ist Programm. Auch nach dem leckeren Chicken Curry funktioniert der Account nicht. Glücklicherweise kann uns ein Microsoft Mitarbeiter vor Ort weiterhelfen. Die CI/CD Pipeline steht kurze Zeit später.

Jetzt haben wir richtig einen Lauf: Die drei Levels entstehen auf Papier und im Tiled Editor: Wir entscheiden uns, das Level 2 als erstes umzusetzen, da dieses den besten Vorführeffekt hat. Sollten wir aus irgendeinem Grund die anderen beiden Levels nicht schaffen, haben wir wenigstens das Beste für die Demo. Das nimmt uns etwas den Druck und wir haben richtig Spass: Die Wankdorf-Uhr wird gepinselt, eine Horde gelb-schwarzer Fans stehen nebst dem YB Bär bereit. Corona Viren werden zwischen die Würste und YB Münzen gestreut, damit es nicht allzu einfach ist. Christoph kämpft etwas länger mit einem Index, aber als ich die Audio-Dateien ins Git Repo einchecke, müssen alle lachen: Läuft man im Game in einen anderen Zuschauer, spickt es die Spielfigur zurück und sagt “Tschuldigung!”

team at work

Team “Work Food Balance” an der Arbeit

Schlafen oder nicht?

Auch bei diesem Punkt sind wir uns alle schnell einig: Gegen 03.00 Uhr nach knapp 16 Stunden Arbeit, hauen wir uns für einen Moment aufs Ohr. Wir sind fast die ältesten an diesem Kontest und gut im Zeitplan mit unserer Arbeit. Um 07.30 Uhr stehen wir bereits wieder erstaunlich fit auf der Matte. Die paar Stunden Schlaf, die heisse Dusche und der Tapetenwechsel haben uns gut getan. Obwohl ich vor dem inneren Auge die ganze Zeit Klötzchen gepinselt habe und einen 8-bit Sound im Ohr habe…

Screenshot aus der App – YB Bär aus Level 1

Auf zum Endspurt

“Jeder testet auf seinem mobile Phone das Game und allfällige Fehler auf das Flipchart aufschreiben” ist der erste Task nach dem Kaffee holen. Eine ganze Seite ist in kürzester Zeit gefüllt. Wesentliche Dinge funktionieren nicht! Kein Hintergrundbild vorhanden, das Game startet erst gar nicht, die Auflösung passt nicht, Corona Viren ziehen kein Leben ab….. Mein Gott, wie sollen wir das alles in knapp drei Stunden fixen? Und der Pitch steht auch noch nicht… Ärmel hochkrempeln und Vollgas geben!

Im Plenum teste ich die Slides und das Game, aber leider unterstützt der Beamer keinen Ton und der Adapter fürs Handy hat keinen passenden Audio-Eingang. Kurzfristig taucht Hektik auf, ich merke wie ich nervös werde. Zum grossen Glück haben die Jungs schon alle (!) Fehler gefixt, was mich wieder entspannt. Wir zeigen das Game im Browser und fügen einen QR-Code am Ende der Präsentation ein, damit alle selber auf dem mobile Phone testen können. Der Sound aus dem Notebook ist laut genug, also alles gut. 10.45 – die letzten Änderungen werden eingecheckt. Wir haben es geschafft!! Egal, wie die Bewertung der Jury aussieht: Ich bin unheimlich stolz, was wir da auf die Beine gestellt haben in 24 Stunden! Richtige Glücksgefühle überkommen mich – jetzt muss ich diese nur noch dem Publikum rüber bringen können!

Screenshot aus der App – Wankdorf Uhr aus Level 1

Perfektes Timing

Der Pitch darf nicht länger als 6 Minuten dauern. Also stellen wir ganz kurz die Challenge, unser Team und die genutzten Technologien vor. Der grösste Teil der Zeit widmen wir der Demo – schliesslich funktionieren alle drei Levels des Games, worauf wir mächtig stolz sind! Besser hätten wir den Zeitplan nicht hinkriegen können: Kurz vor Schluss erreicht Christoph mit seinem YB Fan im Game das Ziel des dritten Levels: Im Banner ist es der 28. April 2018 – YB ist Meister! “C’est la nuit de triomphe…” ertönt. Da stellt es jedem YB Fan die Haare auf!

Screenshot aus der App – YB Fans aus Level 3

Gespannt verfolgen wir alle anderen Pitches – echt beeindruckend, was hier alles umgesetzt worden ist. Und auch wie vielseitig die Lösungen auf teilweise gleiche Fragestellungen sind. Das wird eine enge Kiste werden, das ist klar. Die Jury zieht sich zurück und wir räumen so oder so zufrieden unseren Arbeitsplatz.

Die Entscheidung

Der dritte Platz geht an das Team “La viande hackée”, welches den Matchbesuchenden mit ihrer App hilft, schnell ihren Sitzplatz zu finden und Wartezeiten für Toilette und Foodstände anzeigt. Das Optimieren von Laufwegen war das Ziel der Challange der IMS AG. Auf dem zweiten Platz landen “Halbes Hähnchen”: Sie haben den Kundensupport von ewb optimiert und revolutioniert. Mit Sentiment Analyse werden Kundenanfragen triagiert und automatisch beantwortet.

Und der Sieger ist………: “Work Food Balance!”

Wir gewinnen den Hackathon 2020!

Die Jury konnten wir mit unserer kreative, funktionsfähigen und runden Lösung überzeugen. Wir freuen uns riesig!

Wir haben gewonnen! Fotocredit @ybhackathon

Unsere Learnings

An unsem obersten Ziel – schnell einen Prototypen zu erstellen, der lauffähig ist – haben wir stets festgehalten. Der Fokus lag immer darauf, etwas zeigen zu können, bevor wir neue Funktionen einbauen haben. Damit wir am Schluss nicht ohne etwas da stehen. Ganz klar ein Erfolgsrezept, an dem wir weiterhin festhalten würden! Auch haben wir gelernt, dass es sinnvoll ist, schnell auszuprobieren, was funktioniert und was nicht. Die Levels mussten beispielsweise mehrmals neu gebaut werden, bis wir herausgefunden haben, dass es sinnvoll ist, mit mehreren Layern in Tiled zu arbeiten.

In der Kommunikation zwischen IT und Business gab es Hürden (wie in unserem Business Alltag auch…): Wie schreibt man eigentlich “collectables” korrekt? Case sensitive oder nicht? Zwei oder drei “L”? Funktionieren *.wav Dateien mit allen Browsern oder doch nur *.mp3 Files? Solche Grundlagen würden wir künftig im Vorfeld klären und definieren, damit alle im Team dieselbe Ausgangslage haben. Wir hätten auch noch etwas mehr “fancy technologies” verwenden können – der Fokus lag sehr stark auf der Funktionalität des Games. Vielleicht hat es sich aber für diese Challenge nicht so angeboten.

Wir haben alle viel von einander gelernt in diesen 24 Stunden. Zum Beispiel, was Nicht-Entwickler in einem IT Projekt alles beitragen können. Oder dass es durchaus Entwickler gibt, die fixen und nicht motzen (und das in Rekordzeit!).

Screenshot aus der App –  Level 3 YB ist Meister!

Dein Feedback

Unser Projekt findest du auf Devpost und in diesem Gitrepo.

Wir freuen uns über deine Rückmeldung! Was gefällt dir am Game? Was hättest du anders gemacht? Erfüllt es deine Erwartungen, was man in 24h hinkriegt?

Scanne den QR Code mit deinem Mobile Phone oder öffne diesen Link. Halte das Gerät im Breitformat und schalte unbedingt den Sound ein. Unten rechts bzw. links antippen, um zu Hüpfen (Jump). 

Wir wünschen dir mindestens so viel Spass damit, wie wir es am Hackathon 2020 hatten!