🎨Scitch bekommt ein neues Gesicht: das Redesign von 0.9.1

Mit Version 0.9.1 hat Scitch, mein Live-Reaktionsspiel, ein komplett neues Aussehen bekommen. Das hier ist die Geschichte dahinter: warum das alte Design nicht mehr gereicht hat, wie ich zu einem festen Stil gekommen bin und warum fast jeder Effekt im Spiel ein fertig gemaltes Bild ist.

Das Problem: sah aus wie jede App

Spielerisch hat Scitch funktioniert. Optisch war es aber eine ganz normale App. Als ich mir die Screens mit etwas Abstand angesehen habe, ist mir aufgefallen:

• Das Spielfeld war ein eingerahmter Kasten, das Spiel fand sozusagen in einem Formular statt.
• Die Kugeln, also das Wichtigste im ganzen Spiel, waren zu klein und zu matt.
• Die Hintergründe waren stark abgedunkelt, damit man die Kugeln sieht, und dadurch langweilig.
• Die Startseite war ein Stapel aus Karten, wie in fast jeder App.

Spiele, die man gern öffnet, haben einen Mittelpunkt. Ein großes Bild, eine Figur, etwas, das sich bewegt. Genau das fehlte.

Erst ein Stil, dann ein Design

Bevor ich irgendetwas neu gebaut habe, habe ich mich auf einen Stil festgelegt. Davor gab es einige Versuche, die nicht gepasst haben: ein 3D-Dorf und ein Neon-Drahtgitter-Look, der überhaupt nicht zum Spiel gepasst hat. Geblieben ist der Leuchtkugel-Stil, und der gilt jetzt für alles, was neu dazukommt:

• glänzende 2.5D-Optik, die Kugel als Grundform von allem
• Glanzlicht immer oben links, ein Farbschein in der Hauptfarbe
• fast schwarzer Hintergrund, davor die bunten Spielkugeln als Markenzeichen
• freundliche Figuren, kein Text im Bild (Texte kommen aus der App, damit sie übersetzbar bleiben)
• Seasons wie Halloween oder Weihnachten sind nur eine Deko-Schicht mit eigener Akzentfarbe, der Grundstil bleibt gleich

Die Regeln stehen in einem eigenen Dokument im Projekt. Neue Bilder entstehen mit einem Bildgenerator, aber immer mit demselben Prompt-Baustein und Vorlagen aus dem bestehenden Stil. Freigestellt wird über einen grünen Hintergrund und ein kleines Skript. So sieht ein Boss im Dezember noch aus wie ein Avatar aus September.

Vom Kartenstapel zum Titelbild

Für die Startseite habe ich mehrere Richtungen durchgespielt: einen Kugel-Planeten, eine Spielhalle, eine Kugelbahn und ein Titelbild wie bei einer Spielkonsole. Gewonnen hat das Titelbild: deine Figur schwebt in einer Arena, die Spielkugeln kreisen um sie, darunter ein großer SPIELEN-Knopf.

Was sich in 0.9.1 konkret geändert hat:

• Startseite als Titelbild mit eigener Arena je Season, Events als Glasknöpfe am Rand statt eines Sliders
• Modus-Wahl Schnell, Ranked und Daily direkt über dem SPIELEN-Knopf
• eigene Welt je Modus: Arena, Bühne, Eis, Rennstrecke, Goldraster, Sternenhimmel
• Leiste unten aus Glas, nur mit Icons, der aktive Reiter ist eine leuchtende Kugel
• Lobby als Kugelglas, in das neue Spieler hineinfallen
• im Match Herzkugeln statt Herzsymbolen, eine große Ampel und ein deutliches „STOPP!“
• alle Spielfelder neu gemalt, ohne Rahmen, die Kugeln größer

Fertig gemalt statt live berechnet

Die wichtigste technische Entscheidung: Effekte sind Bilder, keine Berechnungen. Glühen, Unschärfe, Masken, halbtransparente Ebenen und Partikel sehen auf einem aktuellen iPhone gut aus. Auf einem Galaxy S9 oder einem günstigen Android ruckeln sie. Und Scitch soll auch auf solchen Handys Spaß machen.

Deshalb ist im Spiel (gebaut mit Flutter und der Spiel-Engine Flame) fast alles vorgerendert:

• Kugeln sind fertig gemalte Glas-Bilder auf einem gemeinsamen Bildblatt und werden in einem Rutsch gezeichnet.
• Der Leuchtschein ist ein eigenes Bild, das per additivem Mischen über die Kugel gelegt wird. Das kostet fast nichts.
• Funken sind eine kurze Bildfolge mit etwa acht Bildern statt eines Partikelsystems.
• Effekt-Schriften wie „+120“ oder „STOPP!“ sind ebenfalls Bilder.

Die neuen Kugelbilder für den ersten Modus waren zusammen nur rund 128 KB groß. Insgesamt wird die App dadurch ein paar Megabyte größer, dafür läuft sie flüssig. Wer es noch ruhiger mag, kann in den Einstellungen „Weniger Effekte“ einschalten, dann fallen Leuchtschein und Funken weg.

Getestet wird jede neue Ansicht auch auf schmalen Geräten. Ein Nothing Phone mit nur 362 dp Breite ist mein Härtetest dafür, dass nichts abgeschnitten wird.

Wie es weitergeht

Mit dem nächsten Update ziehen die letzten Teile im alten, flachen Stil um. Der Boss-Kampf bekommt eine eigene Bühne, bei der deine Treffer als Kugeln zum Boss fliegen und seine Lebensleiste eine Glasröhre ist. Und für die Krampusnacht im Dezember gibt es ein eigenes Krampus-Dorf.

Wer sehen will, wie das alles in Bewegung aussieht: Scitch läuft gerade als offene Beta auf iPhone und Android, alles dazu auf scitch.com.

Fragen zum Design oder zu Flame? Schreib's in die Kommentare.