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.
Creating a scalable, beautiful, and high-performance UI with consistent elements
PC, MacOS
13
Distributed, Poland
Provenant d'un milieu de développeurs de logiciels, Mechanistry accorde de l'importance à un code propre, à des flux de travail agiles et à d'excellentes expériences pour les utilisateurs. C'est pourquoi ils ont choisi Unity pour créer Timberborn. "C'était un choix judicieux", déclare le programmeur Paweł Duda. "Il existe de nombreuses ressources web. La courbe d'apprentissage n'est pas très prononcée. Et notre équipe est familiarisée avec le langage C#.
La mécanique a utilisé uGUI au début de son développement, mais des problèmes sont apparus au fur et à mesure que Timberborn devenait plus complexe. Le réalignement des icônes brisait les mises en page, la réutilisation des ressources était difficile et, comme le code n'était pas lisible par l'homme, il y avait plusieurs conflits de fusion par semaine. "Si deux personnes travaillaient sur le même préfabriqué, cela posait généralement un problème", explique Paweł. "Certains conflits ont été résolus automatiquement. Mais s'ils ne l'étaient pas, nous devions recréer le Prefab manuellement."
Après avoir vu la feuille de route de UI Toolkit, Mechanistry a décidé de migrer vers le nouveau système. Ils souhaitaient s'en tenir à une solution conçue par Unity et, notant que UI Toolkit s'inspire des technologies web, ils étaient convaincus que la transition se ferait en douceur pour leur équipe.
L'équipe a adopté une approche pragmatique de la migration sur plusieurs mois. Tout d'abord, ils ont nettoyé l'architecture du code de leur interface utilisateur et supprimé les odeurs de code. Ils ont ensuite recréé tous les éléments de leur interface utilisateur dans UI Toolkit et redessiné leurs actifs pour obtenir l'aspect qu'ils souhaitaient.
"Le passage à UI Toolkit a changé la donne", explique Paweł. "Auparavant, nous étions réticents à l'idée de créer une belle interface utilisateur, car nous savions que ce serait une lourde tâche. Aujourd'hui, nous avons ajouté au jeu des éléments tels que la mise à l'échelle de l'interface utilisateur et les menus cachés, et c'était beaucoup plus facile à faire qu'avec uGUI."
Mechanistry note que le passage à UI Toolkit a pratiquement éliminé les conflits de fusion, qui constituaient une source importante de ralentissement dans le studio. "Si un conflit émerge, nous pouvons le voir et savoir immédiatement comment le résoudre", explique Paweł. "Tout le monde peut travailler sur l'interface utilisateur en même temps, même sur le même élément, et ce n'est pas un problème."
UI Toolkit leur a également permis de séparer la logique du jeu de la logique de l'interface utilisateur, réduisant encore les conflits. L'équipe peut désormais travailler sur différentes parties de l'interface utilisateur de manière indépendante et tester les composants de manière isolée, ce qui permet de réduire le nombre de versions erronées. "C'était très, très important pour nous", ajoute Paweł.
Timberborn est une interface utilisateur évolutive et adaptative qui prend actuellement en charge 12 langues. Le passage de l'un à l'autre peut entraîner un désalignement des éléments de l'interface utilisateur, ce qui, combiné à la complexité globale de l'interface, la rend sujette à des erreurs de conception. Ils peuvent identifier et résoudre ces problèmes rapidement et facilement grâce au débogueur de la boîte à outils de l'interface utilisateur.
La boîte à outils de l'interface utilisateur affiche une fenêtre avec une vue en direct de la hiérarchie de l'interface utilisateur. Mechanistry peut sélectionner n'importe quel élément de la hiérarchie pour inspecter les propriétés et les états et vérifier les erreurs d'interface utilisateur. "Cela nous permet d'inspecter et de déboguer les éléments de l'interface utilisateur en temps réel", remarque Paweł.
La flexibilité du Toolkit d'interface utilisateur permet à Mechanistry de l'adapter à ses besoins. "Nous avons notre propre système qui nous permet d'ajouter des images et des icônes dans un menu déroulant", explique Paweł. "Nous avons également nos propres infobulles et contrôles localisés. Il suffit de placer un attribut dans l'UXML, ce qui nous permet de localiser le contrôle automatiquement."
Par exemple, l'équipe dispose d'un contrôle qui affiche des Sprites localisés dans la langue appropriée à l'aide de balises. Ils ont créé une vue montrant comment les panneaux s'empilent, ce qui leur permet de manipuler facilement les positions des contrôles de l'interface utilisateur tout en gardant une trace de ce qui est visible à l'écran, ainsi qu'une tranche de 9 pour les arrière-plans, les boutons, les étiquettes, etc.
Avec UI Toolkit, le processus de conception de Mechanistry est plus propre et plus direct, et ils peuvent apporter une touche finale beaucoup plus rapidement. "Cela nécessitait beaucoup de manipulations et de modifications, ce qui pouvait prendre des semaines", explique Paweł. Aujourd'hui, le processus prend quelques jours, une semaine au maximum. Il en va de même pour l'attente des actifs de l'artiste. Les jours sont réduits à des heures."
L'adoption de Unity UI Toolkit a considérablement transformé le pipeline d'interface utilisateur de Mechanistry, accélérant le développement de Timberborn alors qu'ils se dirigent vers leur très attendue version 1.0.
Authoriser et intégrer l'interface utilisateur avec UI Toolkit. Personnalisez votre éditeur pour améliorer la collaboration et tirez parti d'un débogage efficace pour de meilleures performances - le tout dans une expérience intuitive inspirée des technologies Web pour vous aider à créer des interfaces utilisateur plus rapidement.
