Aufbauend auf meiner zentralen Rolle bei Portal Knights:
Grundlagen der spielerseitigen UI, anfangen bei der langjährigen Preproduction, über UI Grafik und Typografie, bis hin zu Codestrukturen.
Weiterhin aktive Mitgestaltung des Produkts: Design, Implementation und Iterationen von menügesteuerten Interaktionen und Anzeigeelementen...
...Einschließlich Screen-Flow, Layouting, Texturierung, Menü- und Eingabelogik, sowie Animation.
Frontend-Programmierung in C++ mit Keens proprietärem UI-System im Immediate Mode.
Peer Coaching in der Game UI Abteilung, die seit Mitte der Produktion nicht von mir allein gestemmt wird.
Hinweis
Selbstverständlich ist die ganze UI das Ergebnis von eng verzahntem Teamwork. Dennoch habe ich im Folgenden Aspekte ausgesucht, die hauptsächlich mein Design und/oder Ausführung darstellen.
Das Baumenü
Anforderungen & Prioritäten
Eine engere Auswahl an Baugegenständen schnell auswählen, aber auch den ganzen Katalog entdecken und stöbern, ohne zu überwältigend zu wirken.
Die genannten Bauoptionen anbieten, ohne den Spieler mehr als nötig durch Menübedienung aus dem Baugeschehen zu reißen.
Somit war ein bildschirmfüllender Katalog für den gesamten Umfang an Baugegenständen unerwünscht. Genau wie eine hierarchische Struktur, die den Spielerfokus leicht in ihre Navigationsebenen zieht.
Design Teil 1: Das Grundmuster
Da eine Voxelstruktur aus einem formgebenden Gegenstand und einer wechselnden Materialfüllung besteht, lässt sich die bewährte Bedienung beim Fernkampf nutzen, bei dem eine Schusswaffe mit wechselnder Munition bestückt wird.
Damit bauen wir das passende mentale Modell schnell auf, und können auch vom bestehenden motorischen Gedächtnis profitieren, was die Reibung zwischen dem allgemeinen Gameplay und den Bauaktionen reduziert.
Die Formen auf der Querachse und die Materialien auf der Vertikalachse zeigen, wie das Endprodukt logisch durch die beiden Aspekte zusammengesetzt wird.
Design Teil 2: Die ausklappbare Leiste
Wenn man eine Modifiereingabe gedrückt hält, macht sich die Leiste der Formgegenstände zu einem mehrzeilen Menü auf, wo jede Zeile eine Kategorie darstellt.
Zwischen den Kategorien kann leicht vertikal navigiert werden. Einfaches Loslassen der Menüaktivierungstaste klappt das Menü wieder zu, während die fokussierte Zeile beibehalten wird.
Da die Menüöffnung standardmäßig mit einer Modifiereingabe erfolgt und gehalten werden muss, kann man praktisch nicht versehentlich in einem modalen Menü feststecken. Somit geht die Nutzung dieser zwei Menüformen gut von der Hand.
Wichtig für die Effektivität des Menüs ist auch das sorgfältige Ordnen der Baugegenstände.
Das Crafting-Menü
Anforderungen
Visuelle Darstellung von Rezepten (keine Listenansicht).
Schnelle Navigation zwischen Kategorien.
Vergleiche erlauben, um Crafting-Entscheidungen zu unterstützen.
Implementierte Features
Ein hierarchisches Verzeichnis auf der linken Seite, das eine Übersicht bietet, und womit man zwischen Kategorien navigieren kann. Zudem können diese als Filter eingestellt werden.
Beim Navigieren im Verzeichnis scrollt das Raster automatisch, um die fokussierte Kategorie in den sichtbaren Bereich zu rücken. Auch beim Bewegen im Raster wird im Verzeichnis die aktuell passende Kategorie subtil hervorgehoben.
Der Rezeptbrowser lässt sich in eine Vergleichsansicht umschalten. Dabei verbleiben nur noch Ausrüstungsgegenstände im Raster, zumal sonstige Items keine sinnvolle Vergleichbarkeit untereinander haben.
In der Vergleichsansicht ist das Verzeichnis ebenso wie das Raster geschrumpft, um Platz zu machen. Die Funktionalität wird aber erhalten: Sobald es angesteuert wird, nimmt es wieder die normale, volle Größe an, während das Raster sich leicht aus dem Weg schiebt.
Das Ausrüstungsmenü
Beschreibung
Eine klassische Übersicht, wo der Charakter von Slots und relevanten Gameplay-Daten flankiert wird.
Jeder Slot öffnet den entsprechenden Ausrüstungsbrowser. In dieser Menüebene wechselt die Reiternavigation zu einer lokalen, die zwischen Slots schaltet. Das verringert die Notwendigkeit, zurück in die Übersicht zu gehen.
Eine Vergleichsansicht ist hier ebenfalls verfügbar.
Gegenstände-Handhabung mit dem Gamepad
Stapel teilen
Motivation & Konzept
Es soll, analog zur Maus und Tastatur, eine handliche Möglichkeit geben, Stapeln aufzuteilen, ohne in den modalen Dialog zu benutzen.
Der „Gegenstand aufnehmen“-Button kann als Halteeingabe benutzt werden, um Funktionalitäten zu gewinnen, ohne zusätzlich Buttons zu belegen.
Implementation
Beim Halten des „Gegenstand aufnehmen“-Buttons erscheint ein Halbkreis-Widget am Gegenstand, womit die Aufnahmemenge angepasst werden kann.
Der linke Analogstick im Zentrum des Halbkreises gibt mit der radialen Eingabe den Split an.
Ein Justierung schnappt auf die Mitte des Einstellbereichs, um den häufigen Fall des halben Stapels einfach zu machen.
Containerübergreifendes Verschieben
Nutzungsszenario & Herausforderung
Oft ist es praktisch, Gegenstände zwischen dem Rucksack, der Aktionsleiste, und Lagerkisten zu verschieben, ohne die vielen Slot-Schritte zu gehen.
Während die Maus recht naheliegend mit Steuerungs- und Umschalttaste zwei Container gezielt ansteuern kann, haben wir auf dem Gamepad diesen Luxus nicht, zumal nur ein Button für das Feature verfügbar war.
Design & Implementation
Statt zwei Aktionen mit separaten Button-Belegungen benutzt das Design eine integrierte Aktion mit einer internen, einstellbaren Zielrichtung.
Ein einfacher Buttondruck führt die Aktion mit der aktuellen Richtung aus, welche aber umgeändert werden kann, wenn der Button gedrückt gehalten wird.
So lässt sich die aktuelle Intention leicht wiederholen, während alle Möglichkeiten trotzdem mit demselben Button auswählbar sind, ohne dass man jedes Mal fummeln muss.
DAmit das Verhalten entdeckbar wird und die Ausführung sich besser anfühlt, stellt jede Nutzung beide möglichen Richtungen dar, wobei die aktuelle mit einer Animation bestätigt wird.
Überleben im Miasma und unter Wasser
Herausforderung
Das namengebende Miasma ist „naturgemäß“ visuell diffus. Auch die längere Laufzeit soll bewusst eine schleichende Spannung bei Expeditionen aufbauen.
Allerdings wird nicht nur der Eintritt ins Miasma leicht zu übersehen, sondern die lange Laufzeit macht es auch schwierig, ein Gefühl für die Überlebensdauer zu entwickeln, oder sie überhaupt auf dem Schirm zu haben.
Am anderen Ende des Dringlingkeitsspektrums haben wir die Überlebensdauer unter Wasser, welches als Featurekomplex neulich ins Spiel gekommen ist. Der Sauerstoffvorrat im Sekundenbereich muss nämlich sofort präzise gelesen werden.
Design
Ich habe mich für eine Kombination aus einem numerischen Countdown und einer Leiste mit Minutenabschnitten entschieden, die uns sowohl eine präzise Ablesung, als auch eine visuelle Relation gibt.
Um den langsamen Verbrauch (beim Miasma) wahrnehmbarer zu gestalten, wischt eine zyklische Welle in Richtung der Abnahme über die Leiste.
Beide Überlebenszähler sind in einem zweiflügeligen Widget vereint, das je nach Szenario weich zwischen zwei Konfigurationen animiert: eine spiegelsymmetrisch laufende für die Einzelressource, und bei zwei relevanten Ressourcen benutzen sie jeweils einen Flügel.
Weitere Screens
Spielmodusauswahl
Ich habe die Key Art zu Variationen verarbeitet, die den sozialen Grad des jeweiligen Spielmodus illustrieren.
Auswahl der gespeicherten Welten
Optionen beim Hosten auf der linken Seite.
Anpassbare Tastenbelegung
Mit Zusatzinformationen und einer praktischen Sprung-Funktion, um problematische Einträge direkt anzuvisieren. Die Usability dieses Screens beinhaltet eine Menge Komplexität unter der Haube.
Rucksack
Beinhaltet den Item Viewer mit seiner hohen Informationsdichte.
Journal mit Untermenü-Kacheln
Die Illustrationen hat unser Konzeptkünstler nach meinen Design-Parametern erstellt.
NPC-Dialogmenü
Zeigt NPC Informationen neben Gesprächsoptionen (wobei Crafting als feste funktionale Aktion besteht).