Hero background image
Case study
Wie die komplexe Laufzeit-Benutzeroberfläche von Timberborn erstellt wurde
Mechanistry sparte viel Produktionszeit, indem es auf UI Toolkit umstieg und eine komplizierte Benutzeroberfläche für seinen biberbasierten Städtebauer entwickelte.
Erfahren Sie mehr über das Design und die Implementierung von Benutzeroberflächen in Unity mit unserem kostenlosen praktischen Leitfaden.
E-Book herunterladen

Rationalisierung der UI-Entwicklung

How does a small team with few resources create a complex city-builder UI? When Timberborn became an Early Access hit on Steam, Mechanistry needed to quickly iterate on intuitive UI for a rapidly growing playerbase. By switching from uGUI to UI Toolkit, they were able to accelerate production with cleaner code that’s easier to maintain.

Die Herausforderung

Creating a scalable, beautiful, and high-performance UI with consistent elements

Plattformen

PC, MacOS

Teammitglieder

13

Standort

Distributed, Poland

Timberborn-Anhänger

Auswählen von Unity

Mechanistry kommt aus der Softwareentwicklung und legt Wert auf sauberen Code, agile Workflows und großartige Benutzererfahrungen. Deshalb haben sie sich für Unity entschieden, um Timberborn zu machen. "Es war die kluge Wahl", sagt Programmierer Paweł Duda. "Es gibt viele web resources. Die Lernkurve ist nicht steil. Und unser Team ist mit C# vertraut."

Befund

Die Ergebnisse

  • Beschleunigtes UI-Prototyping und -Implementierung, das jetzt Stunden statt Tage dauert
  • Von mehreren Merge-Konflikten pro Woche auf null
  • Erreicht "Überwältigend positiv" auf Steam in fast 18.000 Rezensionen
Die Grenzen von uGUI verschieben
Die Grenzen von uGUI verschieben

Mechanistry verwendete uGUI in der frühen Entwicklung, aber Probleme traten auf, als Timberborn komplexer wurde. Die Neuausrichtung von Symbolen beschädigte Layouts, die Wiederverwendung von Assets war eine Herausforderung, und da der Code nicht für Menschen lesbar war, gab es mehrere Zusammenführungskonflikte pro Woche. "Wenn zwei Leute am selben Prefab arbeiteten, war das normalerweise ein Problem", sagt Paweł. "Einige der Konflikte wurden automatisch gelöst. Aber wenn nicht, mussten wir das Prefab manuell neu erstellen."

Nachdem Mechanistry die UI Toolkit roadmap gesehen hatte, entschied sich Mechanistry für die Migration auf das neue System. Sie wollten an einer von Unity entwickelten Lösung festhalten, und da sie feststellten, dass UI Toolkit von Webtechnologien inspiriert ist, waren sie zuversichtlich, dass der Übergang für ihr Team reibungslos verlaufen würde.

Timberborn-Benutzeroberfläche mit vielen Fenstern und Steuerelementen im Spiel
Wechseln zum UI Toolkit

Das Team verfolgte über mehrere Monate hinweg einen pragmatischen Ansatz für die Migration. Zuerst haben sie ihre UI-Code-Architektur bereinigt und code smells entfernt. Anschließend erstellten sie alle ihre UI-Elemente in UI Toolkit neu und gestalteten ihre Assets neu, um das gewünschte Aussehen zu erhalten.

"Der Wechsel zu UI Toolkit war ein Wendepunkt", erklärt Paweł. "Früher haben wir gezögert, eine schöne Benutzeroberfläche zu erstellen, weil wir wussten, dass es ein großer Aufwand sein würde. Jetzt haben wir dem Spiel Dinge wie UI-Skalierung und versteckte Menüs hinzugefügt, und das war viel einfacher als mit uGUI."

District Crossing in Timberborn mit vielen Bibern
Zusammenführungskonflikte lösen

Mechanistry merkt an, dass der Wechsel zu UI Toolkit Merge-Konflikte praktisch beseitigt hat, die eine erhebliche Ursache für die Verlangsamung im Studio waren. "Wenn ein Konflikt auftaucht, können wir ihn sehen und wissen sofort, wie wir ihn lösen können", sagt Paweł. "Jeder kann gleichzeitig an der Benutzeroberfläche arbeiten, sogar am selben Element, und das ist kein Problem."

UI Toolkit ermöglichte es ihnen auch, die Spiellogik von der UI-Logik zu trennen, wodurch Konflikte weiter reduziert wurden. Jetzt kann das Team verschiedene Teile der Benutzeroberfläche unabhängig voneinander iterieren und Komponenten isoliert testen, was zu weniger fehlerhaften Builds führt. "Das war sehr, sehr wichtig für uns", fügt Paweł hinzu.

Luftaufnahme eines Heckenlabyrinths in Timberborn
Debugging in Echtzeit

Timberborn skalierbare, adaptive Benutzeroberfläche unterstützt derzeit 12 Sprachen. Das Umschalten zwischen ihnen kann dazu führen, dass UI-Elemente falsch ausgerichtet werden, was sie – in Kombination mit der Gesamtkomplexität der Benutzeroberfläche – anfällig für Designfehler macht. Sie können diese Probleme schnell und einfach mit dem UI Toolkit debugger.

UI Toolkit ein Fenster mit einer Live-Ansicht der UI-Hierarchie anzeigen. Die Mechanik kann ein beliebiges Element in der Hierarchie auswählen, um Eigenschaften und Zustände zu überprüfen und nach Benutzeroberflächenfehlern zu suchen. "Auf diese Weise können wir UI-Elemente in Echtzeit untersuchen und debuggen", bemerkt Paweł.

Dropdown mit Symbolen in der Timberborn-Benutzeroberfläche
Anpassen des Toolkits

Die Flexibilität des UI Toolkit ermöglicht es Mechanistry, es an ihre Bedürfnisse anzupassen. "Wir haben unser eigenes System, mit dem wir Bilder und Symbole in ein Dropdown-Menü einfügen können", sagt Paweł. "Wir haben auch unsere eigenen Tooltips und lokalisierten Steuerelemente. Wir fügen einfach ein Attribut in das UXML ein, und das ermöglicht es uns, das Steuerelement automatisch zu lokalisieren."

Das Team verfügt beispielsweise über ein Steuerelement, das lokalisierte Sprites mithilfe von Tags in der entsprechenden Sprache anzeigt. Sie erstellten eine Ansicht, die zeigt, wie sich Panels stapeln, sodass sie die Positionen der UI-Steuerelemente einfach manipulieren können, während sie verfolgen, was auf dem Bildschirm sichtbar ist, sowie eine 9-Schicht-Ansicht für Hintergründe, Schaltflächen, Beschriftungen und mehr.

Riesige IT-Kolonie in Timberborn
Von Tagen zu Stunden

Mit dem UI Toolkit ist der Designprozess der Mechanistry sauberer und unkomplizierter, und sie können viel schneller den letzten Schliff hinzufügen. "Das erfordert viel Tüfteln und Ändern, was Wochen dauern kann", erklärt Paweł. " Jetzt dauert der Prozess Tage, maximal eine Woche. Das Gleiche gilt für das Warten auf Vermögenswerte des Künstlers. Tage werden auf Stunden reduziert."

Die Einführung des Unity UI Toolkit hat die UI-Pipeline von Mechanistry erheblich verändert und die Entwicklung von Timberborn auf dem Weg zu ihrer mit Spannung erwarteten Version 1.0 beschleunigt.

"In uGUI dauerte die Erstellung eines funktionierenden Prototyps je nach Komplexität ein, zwei, drei Tage. Mit dem UI Toolkit können wir innerhalb weniger Stunden einen funktionierenden Prototyp erstellen."
PAWEŁ DUDA / MECHANISTRYProgrammer
"Die Entwicklung eines Spiels in der Realität des Early Access erfordert eine skalierbare, modulare und saubere Architektur. Das UI-Toolkit von Unity passt perfekt zu diesen Prinzipien und erleichtert die Arbeit mit sich ständig weiterentwickelnden Schnittstellen."
MARCIN WIERZCHOŚ / MECHANISTRYProgrammer
"Seit wir auf UI Toolkit umgestiegen sind, ist die Schätzung von Aufgaben viel einfacher geworden. Die Effizienz unseres Teams ist gestiegen, da sie mit einem leicht verständlichen Tool arbeiten und jetzt nicht mehr mit Zusammenführungskonflikten zu kämpfen haben."
EWA STILLER / MECHANISTRYSenior Producer
Biber laufen mit Holz im Arm über eine Brücke
Erstellen Sie leistungsfähige Benutzeroberflächen

Erstellen und integrieren Sie die Laufzeitbenutzeroberfläche in das UI Toolkit. Passen Sie Ihren Editor an, um die Zusammenarbeit zu verbessern, und nutzen Sie effizientes Debugging für eine bessere Leistung – alles in einer intuitiven Erfahrung, die von Webtechnologien inspiriert ist, damit Sie die Benutzeroberfläche schneller erstellen können.