Interface utilisateur Toolkit à l'exécution : Obtenez le détail

UI Toolkit est une collection de fonctionnalités, de ressources et d'outils conçus pour développer des interfaces utilisateur et des extensions d'éditeur. D'abord introduit sous le nom d'UI Elements, UI Toolkit offre un cadre UI en mode retenu pour faciliter le développement d'UI personnalisées pour les extensions de l'éditeur Unity.

Disponible dans la dernière version de Unity, UI Toolkit prend en charge la création d'UI à l'exécution grâce à une expérience d'auteur familière et intuitive, inspirée des technologies web. Cet article examine la spécificité de ses capacités et partage des conseils pour commencer avec UI Toolkit à l'exécution comme alternative à UGUI.

Consultez ce manuel pour une comparaison approfondie entre les systèmes UI.

Unity 2021 LTS est maintenant disponible en téléchargement et utilisation. Cette version représente plus d'un an de développement ciblé à travers l'ensemble de l'éditeur Unity, plus des fonctionnalités fondamentales sous-jacentes, combinées avec les fonctionnalités incluses dans nos versions Unity 2021.1 et Unity 2021.2 Tech Stream (avec six mois supplémentaires de polissage de qualité).

Pour commencer, téléchargez la dernière version de Unity depuis le Unity Hub.

Clarifions comment UI Toolkit peut garantir des flux de travail plus fluides lors de la création d'UI.

Créer une UI en collaboration avec des artistes peut être une tâche complexe. Alors que l'artiste édite le Canvas pour ajouter des couleurs et des matériaux, le développeur ajoute des scripts, des comportements et des écouteurs OnClick. Ensuite, lorsque la fusion se produit, des conflits de fusion peuvent survenir et entraîner des problèmes nécessitant une résolution rapide.

UI Toolkit empêche de tels conflits de fusion en faisant travailler l'artiste sur les fichiers UXML et USS pendant que C# gère toute la logique. Par exemple, la gestion des boutons se fait uniquement avec C#, qui interroge le bouton en utilisant son nom, et ajoute de la logique sans modifier aucun fichier UXML ou USS.

Non seulement ce processus facilite la fusion, mais il simplifie également les futurs changements de style. Par exemple, si toutes les polices du projet devaient soudainement être changées, vous n'auriez pas besoin de passer par chaque actif, un par un, pour modifier les paramètres de texte. Cela évite un travail fastidieux qui peut entraîner des problèmes de négligence - et plus le jeu est grand, plus cela devient compliqué.

Avec UI Toolkit, les paramètres de panneau contiennent tous les paramètres de texte. Donc, pour changer les polices sous un UI Document, vous devez seulement modifier ces Panel Settings. Bien que les scripts de l'éditeur puissent également aider avec UGUI, le cadre d'UI Toolkit gère automatiquement ce processus.

Un Visual Element est la classe de base de chaque élément d'UI Toolkit : boutons, images, texte, etc. Vous pouvez le considérer comme le GameObject d'UI Toolkit. Pendant ce temps, UI Builder (Window > UI Toolkit > UI Builder) est un outil visuel qui aide à créer et à modifier des interfaces sans écrire de code. Ceci est utile pour les artistes et les designers, car cela leur permet de visualiser l'UI pendant qu'elle est construite.

En tant qu'outil principal pour les personnes déjà familières avec les technologies web, UI Toolkit améliore également la collaboration entre artistes et développeurs en séparant la logique et le style pour affiner l'organisation et éviter les conflits de fichiers. Alors qu'UI Builder s'occupe des positions, du style et du design des éléments, le code peut être géré dans une section distincte du projet pour interroger les parties de UXML dont il a besoin et y connecter la logique.

Les fichiers UXML sont comparables aux fichiers web HTML. Ils représentent des éléments visuels et contiennent la hiérarchie de l'UI. Créez un UXML document via Assets > Create > UI Toolkit > UI Document. Ensuite, utilisez UI Builder pour visualiser et travailler sur le nouveau UXML créé.

Notez cependant qu'un fichier UXML ne doit pas être traité comme un GameObject, mais plutôt comme un arbre d'éléments visuels. Pour alléger la hiérarchie, utilisez un seul UI Document et chargez tous les éléments UXML dessus. Vous pouvez visualiser l'UI avec UI Toolkit Debugger sous Windows > UI Toolkit > Debugger.

Pour vous aider à commencer, jetez un œil à quelques UXML Element examples de Windows > UI Toolkit > Samples.

Grâce à UI Builder, les fichiers UXML peuvent être créés, visualisés et testés sans lancer le jeu. Il suffit de faire glisser et de déposer contrôles UI (standards ou créés par l'utilisateur) dans la hiérarchie depuis la Bibliothèque de l'UI Builder panneau, et de combiner plusieurs fichiers UXML pour créer l'UI finale.

Disons que nous avons une UI composée de trois éléments :

• Santé
• Score
• Pop-up « Vous gagnez »

Le pop-up « Vous gagnez » affichera la Santé, le Score, ainsi qu'un bouton Redémarrer.

Chaque élément est utilisé dans un panneau UI différent du jeu, car ils font partie de fichiers UXML séparés avec popup.uxml – une combinaison de health.uxml et score.uxml plus le bouton Redémarrer. Ainsi, la logique de code gérant le score et la santé (score.cs et health.cs) est indépendante de la hiérarchie. Cela signifie que health.cs mettra toujours à jour les valeurs de health.uxml, que l'UI soit affichée seule à l'écran ou à l'intérieur d'un autre pop-up.

Combiner des UXML peut également faciliter la visualisation des objets modifiés. En activant l'Liste de classes option dans la hiérarchie de l'UI Builder, vous pouvez voir ce qui impacte l'objet d'un coup d'œil, et utiliser des sélecteurs pour garder le style organisé :

Un autre avantage concerne la hiérarchie de la scène. Au lieu d'avoir un seul Canvas avec des dizaines de GameObjects, l'UI Toolkit n'a besoin que d'un seul fichier UXML lié à un Document UI.

vs

Ce flux de travail est particulièrement avantageux pour les grandes équipes. Au lieu de travailler sur la même scène, avec le risque possible de problèmes de fusion, chaque membre de l'équipe peut travailler sur ses propres fichiers UXML, qui sont ensuite ajoutés à un seul Document UI dans la scène.

L'Actif des paramètres du panneau (Actifs > Créer > UI Toolkit > Actif des paramètres du panneau) définit comment le UXML va être instancié et visualisé dans le jeu. Il est possible d'avoir plusieurs Actifs des paramètres du panneau pour activer différents styles pour les UIs. Par exemple, utiliser certains paramètres de panneau pour le HUD et d'autres pour la minimap a du sens, car ce sont des interfaces utilisateur très différentes avec des besoins distincts.

Paramètres de Panneau peuvent être vus comme un UGUI Canvas + Canvas Scaler avec des options supplémentaires comme les paramètres de texte, de sorte que tout le texte à l'intérieur du panneau utilise le même paramètre de base. Cela évite de passer du temps à réinitialiser manuellement chaque police – mais bien sûr, les polices peuvent toujours être remplacées à l'intérieur des documents UI individuels, si nécessaire.

Le constructeur d'UI n'est pas destiné à la gestion des événements, pas plus que le document UXML. Pour gérer un clic de bouton ou tout autre événement, créez un Script C# et liez-le au UXML.

public class UIEventHandler : MonoBehaviour
{
   [SerializeField]
   private UIDocument m_UIDocument;
 
   private Label m_Label;
   private int m_ButtonClickCount = 0;
   private Toggle m_Toggle;
   private Button m_Button;
 
   public void Start()
   {
       var rootElement = m_UIDocument.rootVisualElement;
 
       // This searches for the VisualElement Button named “EventButton”
       // rootElement.Query<> and rootElement.Q<> can both be used
       m_Button = rootElement.Q<Button>("EventButton");
 
       // Elements with no values like Buttons can register callBacks
// with clickable.clicked
       m_Button.clickable.clicked += OnButtonClicked;
 
       // This searches for the VisualElement Toggle named “ColorToggle”
       m_Toggle = rootElement.Query<Toggle>("ColorToggle");
 
       // Elements with changing values: toggle, TextField, etc... 
// implement the INotifyValueChanged interface,
       // meaning they use RegisterValueChangedCallback and 
// UnRegisterValueChangedCallback
       m_Toggle.RegisterValueChangedCallback(OnToggleValueChanged);
 
       // Cache the reference to the Label since we will access it repeatedly.
       // This avoids the relatively costly VisualElement search each time we update
       // the label.
       m_Label = rootElement.Q<Label>("IncrementLabel");
       m_Label.text = m_ButtonClickCount.ToString();
   }
 
   private void OnDestroy()
   {
       m_Button.clickable.clicked -= OnClicked;
       m_Toggle.UnregisterValueChangedCallback(OnToggleValueChanged);
   }
 
   private void OnButtonClicked()
   {
       m_ButtonClickCount++;
       m_Label.text = m_ButtonClickCount.ToString();
   }
 
   private void OnToggleValueChanged(ChangeEvent<bool> evt)
   {
       Debug.Log("New toggle value is: " + evt.newValue);
   }
}

Le positionnement de l'Élément utilise par défaut l'architecture Flexbox. Cela garantit que la plupart des mises en page sont réactives à la taille du conteneur ou de l'écran. Appliquez-le à un Arbre d'Éléments Visuels avec deux éléments ou plus, puis définissez comment ils s'alignent sur l'arbre.

Placer un élément en positionnement Absolu signifie qu'il sera situé par rapport au positionnement de ses parents, et n'affectera ni ne sera affecté par d'autres positions.

Pour les Flex et Aligner paramètres, utilisez cette simple hiérarchie comme exemple :

Modifiez les paramètres suivants à l'aide de l'Inspecteur du Constructeur d'UI :

• Base : Cela fait référence à la taille par défaut de l'élément, avant toute opération de Réduction (ratio de réduction si le parent n'a plus de taille) ou de Croissance (ratio de croissance de l'élément si de la taille est laissée dans le parent).
• Direction (Ligne et Colonne) : Utilisez ceci pour créer des comportements similaires au Groupe de Mise en Page Verticale et au Groupe de Mise en Page Horizontale de UGUI, respectivement.

• Envelopper : Déterminez quels éléments ne s'adaptent pas et ignorez-les, sinon allez au-dessus ou en dessous des éléments précédents.

• Aligner les éléments: Packez les éléments sur les positions sélectionnées en utilisant leur taille minimale.

• Justifier le contenu: Déterminez l'espacement entre les éléments le long de l'axe principal.

Pour plus d'informations sur le positionnement des éléments visuels, consultez la documentation du moteur de mise en page de l'UI Toolkit.

La stylisation est là où l'UI Toolkit montre toute sa puissance. Ajouter du style aux éléments visuels se fait via des fichiers USS (Actifs > Créer > UI Toolkit > feuilles de style). Ils sont l'équivalent Unity des fichiers CSS web et utilisent le même format basé sur des règles.

Notez que les fichiers USS créés par l'utilisateur ne sont pas obligatoires pour que l'UI fonctionne. Les styles d'exécution et d'éditeur sont fournis par défaut, mais créer des USS personnalisés vous permet d'étendre ce qui est déjà fourni ou même de créer un style à partir de zéro.

Vous pouvez ajouter des sélecteurs de style via le panneau de la feuille de style de l'inspecteur de l'UI Builder panel et ensuite les modifier en utilisant du code ou l'UI Builder.

Sélecteurs de style USS dans l'UI Builder

Classe ajoutée correspondante dans l'inspecteur

Dans la capture d'écran ci-dessus, le sélecteur .RedButton est ajouté à un bouton. Le sélecteur apparaît donc aux côtés des classes intégrées .unity-text-element et .unity-button que tous les boutons ont automatiquement.

Voici un exemple d'une règle USS qui définit la couleur de fond de tous les éléments avec la classe .RedButton en rouge. La première ligne de la règle est un sélecteur utilisant le nom de la classe suivi d'une liste de styles à appliquer.

.RedButton { background-color: red; }

Tout comme en CSS, les classes peuvent être combinées pour restreindre davantage le champ d'application du sélecteur d'une règle :

.RedButton.BlueText { color: blue; }

Dans cet exemple, seuls les objets ayant à la fois les classes .RedButton et .BlueText auront un texte bleu. Lorsqu'il est combiné avec le snippet précédent, le bouton aura également un fond rouge.

Comme les styles CSS, les fichiers USS peuvent être utilisés pour remplacer l'apparence des objets en fonction de leur état :

.unity-button:hover { background-color: red; }

Dans cet exemple, tous les boutons qui sont dans l'état de survol auront leur fond changé en rouge. Pour prévisualiser le style de survol et voir à quoi ressemblent les effets, cliquez sur Prévisualiser dans la UI Builder barre d'outils.

Maintenant que nous connaissons les bases de l'UI Toolkit, construisons un exemple qui compare la création d'interfaces en utilisant UGUI par rapport à l'UI Toolkit. Notre objectif est de construire un menu simple, y compris le survol de la souris avec les deux effets suivants :

• Changement de la couleur de fond des boutons
• Changement de la couleur du texte des boutons

Pour créer ce menu avec UGUI, configurez la hiérarchie suivante :

Nous devons également ajouter quelques composants supplémentaires à certains objets :

• Menu a une image pour l'arrière-plan et nécessite un ancrage pour l'alignement.
• Les boutons doivent être ancrés correctement afin qu'ils soient correctement alignés.
• Les boutons Redémarrer et Quitter nécessitent :
• Un script pour changer dynamiquement leur couleur de texte au survol.
• Paramètres du composant bouton (édités dans l'éditeur) pour changer la couleur de fond.

Dans cet exemple, Quitter est un Prefab définissant un bouton rouge.

Maintenant, pour créer le menu avec UI Builder, commencez par une hiérarchie similaire :

Avec Popup Aligner défini comme Centre, et Les boutons Direction Flex défini comme Ligne, notre pop-up actuel de l'UI Toolkit ressemble à ceci :

Notez que le bouton Quitter est rouge, car il utilise le composant QuitButton.uxml, un équivalent du Prefab du bouton Quitter.

Pour voir où la magie de l'UI Toolkit se produit vraiment, ajoutez un PopupStyle.uss avec un tas de règles et…

.background {
   background-image: url('/Assets/Assets/OptionsMenu.png#OptionsMenu');
   width: 500px;
   height: 300px;
}
 
.title {
   font-size: 32px;
   color: rgb(255, 255, 255);
}
 
.unity-base-field__input {
   background-color: rgba(0, 0, 0, 0);
   background-image: url('/Assets/Assets/OptionsMenu9Slice.png#OptionsMenu9Slice_2');
   width: 300px;
   height: 75px;
   font-size: 20px;
   color: rgba(255, 255, 255, 0.5);
   -unity-text-align: middle-center;
}
 
.unity-button {
   color: white;
   background-color: rgba(0, 0, 0, 0);
   background-image: url('/Assets/Assets/StartMenu.png#StartMenu_ButtonDefault');
   width: 160px;
   height: 30px;
   -unity-slice-bottom: 1;
}
 
.unity-button:hover {
   color: rgb(0, 21, 255);
}
 
#Restart {
   -unity-background-image-tint-color: rgb(112, 202, 125);
}

Veuillez noter qu'il y a une priorité de sélecteur en place ici. Par exemple, un style écrit directement dans le UXML remplacera celui des fichiers USS. Ici, la largeur et la hauteur des éléments sont ajoutées à PopupStyle.uss, mais elles pourraient également être modifiées directement dans UI Builder, et remplacer PopupStyle.uss. Les règles de priorité peuvent être trouvées ici.

Disons que nous voulons changer toutes les couleurs qui apparaissent dans le menu, mais pas dans le reste du jeu : UGUI nous obligerait à modifier manuellement toutes les couleurs de tous les composants, un par un. Considérez notre exemple, cependant. Bien que seul le bouton Quitter soit un Prefab, nous pourrions tous les rendre des Prefabs, afin de les remplacer une fois localement. Ensuite, comme ils sont modifiés, tout changement de couleur futur dans le Prefab serait ignoré par le menu.

Avec l'UI Toolkit, nous n'avons besoin que de créer un NouveauStyle.uss dupliquant les balises PopupStyle.uss, et remplacer PopupStyle.uss par NouveauStyle.uss.

Une fois le fichier UXML créé et stylisé, la dernière étape consiste à l'ajouter à la scène réelle. Pour ce faire, remplacez l'élément Scene Canvas element et créez un empty GameObject avec un UI Document element. Remplissez-le avec le popup.uxml et les Paramètres du panneau fichiers, puis appuyez sur play pour tester la nouvelle interface utilisateur.

Une fois que vous avez eu l'occasion d'essayer l'interface utilisateur Toolkit, veuillez nous faire savoir ce que vous en pensez sur les forums UI, ou consultez la documentation officielle pour plus de détails.

Enfin, vous pouvez suivre les dernières mises à jour en visitant notre nouvelle Feuille de route de la plateforme Unity. Veuillez partager vos commentaires directement avec l'équipe produit – nous avons hâte d'avoir de vos nouvelles !

Cet article est écrit par Marina Joffrineau de l'équipe Unity Studio Productions, composée des développeurs de logiciels les plus expérimentés de Unity. L'équipe Unity Studio Productions propose des solutions de conseil et de développement personnalisé pour les studios de jeux de toutes tailles. Pour en savoir plus sur Unity Studio Productions et comment nous pouvons vous aider à atteindre vos objectifs, visitez notre site web.