Que recherchez-vous ?
Hero background image
Case study
Comment l'interface utilisateur complexe de Timberborn a été construite
Mechanistry a gagné beaucoup de temps de production en adoptant UI Toolkit et a créé une interface utilisateur complexe pour son city-builder basé sur les castors.
Découvrez la conception et la mise en œuvre de l'interface utilisateur dans Unity grâce à notre guide pratique gratuit.
Téléchargez l'ebook

Rationalisation du développement de l'interface utilisateur

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.

Les enjeux

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

Plateformes

PC, MacOS

Membres de l'équipe

13

Lieu

Distributed, Poland

remorque timberborn

Choisir l'unité

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#.

résultats

Les résultats

  • Accélération du prototypage et de la mise en œuvre de l'interface utilisateur, qui prend désormais quelques heures au lieu de plusieurs jours
  • On est passé de plusieurs conflits de fusion par semaine à zéro
  • Aujourd'hui, le jeu a reçu la mention "Très largement positif" sur Steam avec près de 18 000 commentaires
Repousser les limites de uGUI
Repousser les limites de uGUI

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.

Interface utilisateur Timberborn avec de nombreuses fenêtres et contrôles dans le jeu
Passer à UI Toolkit

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."

District Crossing à Timberborn avec de nombreux castors
Résoudre les conflits de fusion

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ł.

Vue aérienne d'un labyrinthe de haies à Timberborn
Débogage en temps réel

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ł.

Liste déroulante avec icônes dans Timberborn UI
Personnaliser la boîte à outils

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.

Énorme colonie informatique à Timberborn
Passer des jours aux heures

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.

"Avec uGUI, la création d'un prototype fonctionnel prenait un, deux ou trois jours, en fonction de la complexité. Avec UI Toolkit, nous pouvons avoir un prototype fonctionnel en quelques heures".
PAWEŁ DUDA / MECHANISTRYProgrammer
"Le développement d'un jeu dans la réalité de l'accès anticipé exige une architecture évolutive, modulaire et propre. L'UI Toolkit d'Unity s'aligne parfaitement sur ces principes, facilitant le travail avec des interfaces en constante évolution".
MARCIN WIERZCHOŚ / MECHANISTRYProgrammer
"Depuis que nous avons adopté UI Toolkit, l'estimation des tâches est devenue beaucoup plus simple. L'efficacité de notre équipe a augmenté, car elle travaille avec un outil facile à comprendre et n'a plus à se battre avec des conflits de fusion".
EWA STILLER / MECHANISTRYSenior Producer
Castors traversant un pont avec du bois dans les bras
Construire des interfaces utilisateur performantes

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.