Ein gutes Spielmenü beginnt mit der Geschichte des Spiels. Meins hat drei Bildschirme, einen Shop im Spiel, einen Nachrichtenbildschirm und einen Steuerungsbildschirm, gebaut aus einem Rahmen, drei Tab-Buttons und Icons, die der Spieler schon aus dem Spiel kennt.
Fang mit der Geschichte an
Stell dir vor, du baust ein Spiel. Der Spieler besitzt eine Immobilie und investiert in sie: Ziegelwände, Holzboden, Heizung, Lüftung, Rohre, Arcade-Automaten, Fenster und Möbel. Eine bessere Immobilie lockt Mieter an. Dann ploppt eine Nachricht auf: Du kannst jetzt mit Werbetafeln verdienen, investieren ja oder nein. Jedes Item im Shop haben wir im Kurs gebaut, also erzählt das Menü dieselbe Geschichte wie die Art.
Drei Bildschirme, ein Rahmen
Der Rahmen und die drei Tab-Buttons links bleiben auf jedem Bildschirm gleich. Nur der Inhalt ändert sich. Die Tabs nutzen dieselben Icons wie der Inhalt: eine Kiste für den Shop, Geld für Nachrichten, Schieberegler für die Steuerung.
Item-Icons
Kleine Icons folgen denselben Regeln wie jedes Sprite: eine Lichtquelle, eine klare Silhouette, wenige Farben. In dieser Größe zählt jedes Pixel. Die Münze ist nur 11 mal 11 Pixel groß, also bestehen ihr Glanzlicht und ihr Schatten aus jeweils einer Handvoll Pixeln.
Regeln, die Pixel-UI lesbar halten
- Prüf jeden Bildschirm in echter Größe, nicht vergrößert. Wenn eine Beschriftung bei 1x schwer zu lesen ist, ist sie zu klein.
- Nimm für jeden Rahmen und jeden Button dieselbe Konturbreite und dieselbe Eckenform.
- Teil die Palette mit der Spielgrafik, damit sich das Menü wie ein Teil der Welt anfühlt.
- Mach den ausgewählten Zustand deutlich: Der Shop markiert das gewählte Item mit einem hellen Rahmen.
- Bau Rahmen so, dass sie sich dehnen lassen: Ecken, Kanten und eine Mitte, die sich wiederholt. Dann passt ein Rahmen auf jede Bildschirmgröße.
Jetzt du
Nimm die Idee und verändere sie: ein neuer Button-Stil und eine neue Form, andere Farben, deine eigenen Nachrichten und Vorschaubilder, mehr Items oder eine andere Geschichte. Ein Fantasy-Laden, der Frachtraum eines Raumschiffs, ein Bauernmarkt. Fang mit der Geschichte an und lass sie entscheiden, was auf jeden Bildschirm kommt.