Comment l'interface utilisateur complexe de Timberborn a été construite

Mechanistry a économisé un temps de production considérable en passant à UI Toolkit et a conçu une interface utilisateur complexe pour leur constructeur de ville basé sur des castors.

Découvrez la conception et la mise en œuvre d'interfaces utilisateur dans Unity avec notre guide pratique gratuit. Téléchargez l'ebook

Rationalisation du développement de l'interface utilisateur

Comment une petite équipe avec peu de ressources crée-t-elle une interface utilisateur complexe pour un constructeur de ville ? Lorsque Timberborn est devenu un succès en accès anticipé sur Steam, Mechanistry a dû itérer rapidement sur une interface utilisateur intuitive pour une base de joueurs en pleine croissance. En passant de uGUI à UI Toolkit, ils ont pu accélérer la production avec un code plus propre et plus facile à maintenir.

Choisir Unity

Venant d'un milieu de développement logiciel, Mechanistry valorise le code propre, les flux de travail agiles et les grandes expériences utilisateur. C'est pourquoi ils ont choisi Unity pour créer Timberborn. « C'était le choix intelligent », dit le programmeur Paweł Duda. « Il y a beaucoup de ressources web. La courbe d'apprentissage n'est pas raide. Et notre équipe est familière avec C#.”

Les résultats

• Prototypage et mise en œuvre de l'interface utilisateur accélérés, ce qui prend maintenant des heures au lieu de jours

• Passé de plusieurs conflits de fusion chaque semaine à zéro

• A obtenu une note « Écrasante Positive » sur Steam avec près de 18 000 avis

Repoussez les limites de uGUI

Mechanistry a utilisé uGUI au début du développement, mais des problèmes sont apparus à mesure que Timberborn devenait plus complexe. Le réalignement des icônes a cassé les mises en page, la réutilisation des ressources était difficile, et comme le code n'était pas lisible par un humain, il y avait plusieurs conflits de fusion par semaine. « Si deux personnes travaillaient sur le même Prefab, c'était généralement un problème, » dit Paweł. « Certains des 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 l'UI Toolkit, Mechanistry a décidé de migrer vers le nouveau système. Ils voulaient s'en tenir à une solution créée par Unity, et, notant que l'UI Toolkit s'inspire des technologies web, ils étaient confiants que la transition serait fluide pour leur équipe.

Passer à l'UI Toolkit

L'équipe a adopté une approche pragmatique pour la migration sur plusieurs mois. Tout d'abord, ils ont nettoyé l'architecture de leur code UI et supprimé les mauvaises pratiques. Ils ont ensuite recréé tous leurs éléments UI dans l'UI Toolkit et redessiné leurs ressources pour obtenir l'apparence souhaitée.

« Passer à l'UI Toolkit a été un changement radical, » explique Paweł. « Auparavant, nous étions réticents à créer une belle interface utilisateur car nous savions que cela serait un gros casse-tête. Maintenant, nous avons ajouté des éléments comme le redimensionnement de l'UI et des menus cachés au jeu, et c'était beaucoup plus facile à faire qu'avec uGUI. »

Résolution des conflits de fusion

Mechanistry note que le passage à l'UI Toolkit a pratiquement éliminé les conflits de fusion, qui avaient été une source significative de ralentissement au studio. « Si un conflit émerge, nous pouvons le voir et savoir instantanément comment le résoudre », dit Paweł. « Tout le monde peut travailler sur l'UI en même temps, même sur le même élément, et ce n'est pas un problème. »

L'UI Toolkit leur a également permis de séparer la logique du jeu de la logique de l'UI, réduisant ainsi encore les conflits. Maintenant, l'équipe peut itérer sur différentes parties de l'UI de manière indépendante et tester les composants en isolation, ce qui entraîne moins de builds cassés. « C'était très, très important pour nous », ajoute Paweł.

Débogage en temps réel

Timberborn’s UI évolutive et adaptative prend actuellement en charge 12 langues. Le passage entre elles peut entraîner un désalignement des éléments de l'UI, ce qui, combiné à la complexité générale de l'interface, la rend sujette à des erreurs de conception. Ils peuvent identifier et résoudre ces problèmes rapidement et facilement avec le débogueur de l'UI Toolkit.

L'UI Toolkit affiche une fenêtre avec une vue en direct de la hiérarchie de l'UI. Mechanistry peut sélectionner n'importe quel élément dans la hiérarchie pour inspecter les propriétés et les états et vérifier les erreurs de l'UI. « Cela nous permet d'inspecter et de déboguer les éléments de l'UI en temps réel », remarque Paweł.

Personnalisation de l'outil

La flexibilité de l'UI Toolkit 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 », dit Paweł. « Nous avons également nos propres infobulles et contrôles localisés. Nous mettons simplement un attribut dans le UXML, et cela 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 construit une vue montrant comment les panneaux s'empilent, leur permettant de manipuler facilement les positions des contrôles UI tout en gardant une trace de ce qui est visible à l'écran, plus un 9-slice pour les arrière-plans, les boutons, les étiquettes, et plus encore.

Passer de jours à heures

Avec UI Toolkit, le processus de conception de Mechanistry est plus propre et plus direct, et ils peuvent ajouter des finitions beaucoup plus rapidement. « Cela nécessite beaucoup de manipulation et de changements, ce qui pourrait prendre des semaines », explique Paweł. "Maintenant, le processus prend des jours, une semaine maximum. Il en va de même pour l'attente des ressources de l'artiste. Les jours sont réduits à des heures.”

L'adoption de UI Toolkit de Unity a considérablement transformé le pipeline UI de Mechanistry, accélérant le développement de Timberborn alors qu'ils se dirigent vers leur très attendu lancement 1.0.

Créer et intégrer une UI d'exécution 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 UI plus rapidement.