Mind Match – Let’s rank!
Als Kind spielte Sophia oft ein Brettspiel mit dem Namen „Sympathie“. Es kam 1981 heraus und so sah es auch aus. Trotzdem mochte sie es sehr. Es ging darum, einander kennenzulernen, indem ein Spieler aus einer von sechs Kategorien ein Thema wählte, zu dem fünf von insgesamt 20 Fotos pro Kategorie ausgelegt wurden. Dann bestimmte dieser Spieler heimlich eine persönliche Rangfolge: was er am liebsten mochte, an zweiter Stelle sah und so weiter. Die anderen Spieler mussten versuchen, sich in diese Person hineinzuversetzen und die Bilder in der gleichen Reihenfolge zu sortieren. Danach gab es für jede Übereinstimmung sogenannte Sympathiepunkte. Das Spiel hatte Sophias Familie immer mal wieder Leuten ausgeliehen, bis es irgendwann verschollen und in Vergessenheit geraten war.
Seit einiger Zeit kursieren auf Social Media, vor allem auf TikTok, Rankings, in denen man von Stars bis zu Fingernägeln alles Mögliche für sich einordnen kann. Diese Videos erfreuen sich grosser Beliebtheit, und Sophia erinnerte sich wieder an das Spiel von damals. Sie fragte sich, ob es wohl möglich wäre, ein solches Spiel heute umzusetzen – natürlich der heutigen Zeit entsprechend, in Form einer App. Früher spielte sie das Spiel oft mit ihrer Familie, nun wohnen alle an verschiedenen Orten, und ein gemeinsames Zusammensein ist nicht mehr so häufig. Ziel sollte es also sein, das Spiel trotzdem noch spielen zu können, auch wenn nicht mehr alle unter einem Dach wohnen.
Da ihr das Projekt aber sehr umfangreich erschien und ihre Programmierkenntnisse eher bescheiden waren, brauchte sie für die Umsetzung dringend Unterstützung. So erzählte sie zu Beginn des Semesters auf der Fahrt von Bern nach Chur ihrer Studienkollegin und guten Freundin Julie von der Idee. Sie wusste: Julie ist nicht nur kreativ, sondern hat auch das nötige technische Know-how, um das Projekt zu verwirklichen. Auch sie war direkt begeistert, und so fingen wir schon bald mit der Planung an.
Ein Brettspiel digital umzuwandeln ist gar nicht so einfach, wie es auf den ersten Blick erscheinen mag. Das Spiel „Sympathie“ fungierte letztlich nur als Inspiration, und wir entwickelten daraus unser eigenes Spiel. Auf Papier zeichneten wir zunächst ein Wireframe mit einem möglichen Screenflow. Nach vielen Überlegungen wechselten wir auf Figma, wo wir nach und nach unser Mock-up erstellten. Wir machten ein Moodboard, überlegten uns Farben, Schriftarten, Logos, Namen, Icons und alles, was dazu gehört. Wir entschieden uns für ein einfaches und verständliches Design, das modern ist, aber trotzdem mit einem gewissen Retro-Look daherkommt. Inhaltlich machten wir uns Gedanken über die Kategorien, die Anzahl an Fotos und verständliche Texte. Besonders wichtig war uns, dass das Spiel so einfach wie möglich spielbar ist – also ohne Anmeldung, Log-in etc. Mit einem einfachen Link soll man dem Spiel beitreten können. Link zum Mock-up
Als wir mit dem Mock-up soweit zufrieden waren, begann Sophia mit der Herstellung der Fotos. Was sie am Spiel „Sympathie“ damals etwas störte, war, dass es pro Kategorie nur 20 Fotos gab. Deswegen entschied sie sich für 60 Fotos pro Kategorie, um mehr Abwechslung zu ermöglichen. Sie konzentrierte sich auf die Kategorien Blumen, Essen, Landschaften, Tiere, Farben und Pilze. Sie begann also, genau diese Dinge zu fotografieren. Für die Kategorie Landschaften holte sie sich zusätzlich einige Fotos von ihrer Mutter, die bereits an Orten gewesen war, an denen Sophia noch nicht war – um noch mehr Vielfalt zu schaffen. Anschliessend wurde jedes einzelne Foto in Adobe Lightroom bearbeitet. Ein Programm, das sie zuvor noch gar nicht kannte. Sie musste sich zuerst einarbeiten, viel ausprobieren und herausfinden, welche Regler welche Auswirkungen haben. Die Bearbeitung war sehr zeitaufwendig, da jedes Bild individuell angepasst wurde: Farben wurden mittels Color Grading verstärkt, Lichteinflüsse korrigiert, Bilder zugeschnitten und störende Elemente entfernt. Da die App für Smartphones konzipiert ist und die Bilder im Spiel nur sehr klein dargestellt werden, war es besonders wichtig, dass das Dargestellte gut und klar erkennbar ist.
Julie übernahm die technische Umsetzung. Für das Frontend verwendete sie das Tool Vue in Kombination mit TypeScript und Tailwind CSS für das Styling der Komponenten. Das sorgte dafür, dass das Design konsistent, übersichtlich und modern blieb – ganz im Sinne unseres geplanten Retro-Looks. Im Hintergrund lief alles über Pocketbase, einer leichtgewichtigen Open-Source-Backend-Lösung, die nicht nur Benutzerdaten, sondern auch unsere Bilder verwalten konnte. Für die Kommunikation zwischen Frontend und Backend erstellte Julie eigene API-Endpunkte, die sie mit einer Mischung aus PHP und JavaScript programmierte. Die App wird über einen eigenen Server gehostet.
Eine besondere Herausforderung war die Multiplayer-Funktionalität. Um ein gemeinsames Spiel zu ermöglichen, wurde für jedes Spiel eine eindeutige Session-ID, Game-ID sowie eine Game-Round-ID generiert. Ein Spiel konnte ganz einfach über einen Link gestartet werden, und durch das Anhängen der jeweiligen Game-ID wurde automatisch ein individueller Spielraum erzeugt, in den andere Spieler*innen einsteigen konnten. Obwohl keine Anmeldung notwendig ist, arbeitet das System im Hintergrund mit temporären User-IDs, die den Spielfluss steuern.
Die Bilder, die Sophia fotografiert und bearbeitet hatte, wurden auf dem Server abgelegt und über eine clevere URL-Struktur von Pocketbase ins Spiel geladen. Dabei war es besonders wichtig, die Dateigrösse möglichst klein zu halten. Alle Bilder sind nur wenige Kilobyte gross und damit ideal für die mobile Nutzung.
So kam unser Spiel Mind Match nach und nach zusammen. So weit, dass man es nun HIER spielen kann. Probiert es aus und findet heraus, wie gut ihr einander kennt. Viel Spass dabei!
(abb)
Wir haben uns sehr auf das Projekt gefreut, vor allem, als klar war, dass wir es gemeinsam umsetzen würden. Die Zusammenarbeit funktionierte grundsätzlich gut: Wir standen im engen Austausch, trafen viele Entscheidungen gemeinsam und konnten gegenseitig voneinander profitieren. Das war zwar sehr wertvoll, aber auch extrem zeitintensiv – insbesondere in der frühen Phase, in der wir Wireframes und den Screenflow entwickelten. Immer wieder mussten wir diesen anpassen, Seiten ergänzen, verwerfen oder komplett neu denken.
Die Konzeption nahm bereits viel Raum ein. Doch bei der eigentlichen Umsetzung wurde uns erst richtig bewusst, wie aufwendig das Projekt in seiner Gesamtheit war. Schon nur das Fotografieren der Bilder beanspruchte sehr viel Zeit. Angefangen bei der Auswahl der Motive, über das Arrangieren bis hin zur Bearbeitung jedes einzelnen Fotos. Jedes der 360 Bilder (exklusiv der 60 Farbbilder) wurde sorgfältig in Lightroom nachbearbeitet, und zwar einzeln, mit Blick auf Stimmung, Helligkeit, Farbwirkung und Format. Dabei mussten wir uns zuerst überhaupt in das Programm einarbeiten, viel ausprobieren und verstehen, was welche Einstellung beeinflusst. Dieser Prozess nahm deutlich mehr Zeit in Anspruch als gedacht. Am Ende fehlte bei einigen Bildern schlicht die Zeit für die gewünschte Detailtiefe. Trotzdem war dieser Teil ein grosses Learning, technisch wie kreativ.
Auch die technische Umsetzung, insbesondere das Programmieren, stellte sich als sehr aufwendig heraus. Während das Frontend noch relativ zugänglich war und auch Spass machte, erwies sich das Backend als echte Herausforderung. Die Spiellogik war komplexer, als wir anfangs erwartet hatten. Wer wann welche Aktion ausführt, wie der Spielfluss funktioniert, wann Punkte vergeben werden und wie sich Screens dynamisch anpassen. All das musste detailliert durchdacht und technisch umgesetzt werden.
Hinzu kamen viele technische Baustellen: die Definition und Anbindung zahlreicher API-Endpunkte, die Verbindung zur Datenbank, das korrekte Routing sowie das Zustandsmanagement und Sessions im Spielablauf. Vieles davon lag ausserhalb unseres bisherigen Wissens und musste Schritt für Schritt erarbeitet werden. Manche Probleme liessen sich nur mit grossem Zeitaufwand und Trial-and-Error lösen. Die Anzahl an Einzelseiten, Zuständen und Spezialfällen wuchs stetig, und immer wieder mussten wir beim Programmieren Entscheidungen revidieren oder Anpassungen vornehmen, weil das Spielverhalten in der Praxis doch nicht wie geplant funktionierte.
Einige Features konnten wir trotz grossem Aufwand nicht mehr umsetzen. Zum Beispiel fehlt derzeit noch ein Timer. Auch der Drag-and-Drop-Mechanismus läuft auf manchen Geräten nicht ganz flüssig und müsste noch weiter optimiert werden. Leider werden nur grüne Häkchen angezeigt, die roten Kreuze für eine falsche Zuordnung funktionieren noch nicht. Zudem kommen bei manchen Kategorien teilweise immer mal wieder die gleichen Bilder. Auch das Styling ist nicht überall 1 zu 1 so, wie wir es ursprünglich geplant hatten.
Trotz all dieser Herausforderungen ist es schön zu sehen, dass das Spiel grundsätzlich spielbar ist. Es war ein intensiver Lernprozess – vielleicht nicht der einfachste Weg, aber ein sehr prägender. Wir haben viel gelernt, sowohl im Bereich Gestaltung und technischer Umsetzung als auch im Projektmanagement. Ein wichtiges Learning ist sicherlich, den Aufwand realistischer einzuschätzen und den Projektumfang besser einzugrenzen, ohne dabei die Motivation für eine gute Idee zu verlieren.
Wir sind stolz, dass wir trotz allem ein funktionierendes Spiel auf die Beine stellen konnten, das unserer ursprünglichen Vision sehr nahekommt. Besonders schön ist, dass es Potenzial für Erweiterungen bietet, z.B. neue Kategorien, zusätzliche Bilder oder weitere Funktionen. Vielleicht nehmen wir uns in einer ruhigeren Phase nochmals Zeit, um offene Punkte nachzuarbeiten. Fürs Erste aber sind wir zufrieden und auch ein bisschen erschöpft von diesem grossen, selbstgebauten Spiel.