Ce tutoriel vidéo de Unity explique comment créer des interfaces utilisateur World Space à l'aide du kit d'outils IU de Unity 6.2. Voici quelques-unes des principales étapes que vous apprendrez à suivre :
- Les bases pour configurer le projet et ouvrir UI Builder
- Sauvegarde de votre premier document UXML
- Comment créer une interface utilisateur flexible et maintenable en créant et en appliquant des feuilles de style (fichiers USS) et des classes de style réutilisables
Le tutoriel Unity 6.2 du kit d'outils IU présente également un exemple pratique d'amélioration de l'interaction utilisateur en implémentant des effets de survol personnalisés sur les boutons à l'aide de pseudo-classes.
Enfin, il montre l'intégralité du flux de production permettant d'intégrer l'IU dans une scène 3D en configurant un UI Document et ses paramètres de panneau associés pour le rendu World Space, d'où un menu existant physiquement au sein de l'environnement du jeu.
FAQ
Comment démarrer avec UI Builder ?
Pour commencer à créer une interface utilisateur, ouvrez la fenêtre UI Builder et enregistrez votre travail en tant que ressource UXML. Ce fichier stockera la structure et la hiérarchie de vos éléments d'IU.
Suivez ces étapes pour commencer :
1. Dans le menu principal de l'éditeur Unity, accédez à UI Builder : Fenêtre > Kit d'outils IU > UI Builder
2. Une fois la fenêtre UI Builder ouverte, enregistrez votre nouvel UI Document. Allez dans Fichier > Enregistrer sous... dans le menu de UI Builder.
3. Choisissez un emplacement dans votre projet et enregistrez le fichier. Cela crée la ressource .uxml que vous utiliserez comme source pour votre IU dans la scène.
Vous pouvez voir cet exemple en action en accédant directement aux sections suivantes de la vidéo :
(1:10) - Ouverture de la fenêtre UI Builder
(1:23) - Enregistrement du fichier UXML
Si vous voulez en savoir plus sur UI Builder, consultez la page Documentation Unity.
Comment appliquer des styles cohérents à plusieurs éléments de l'IU ?
Le moyen le plus efficace de conserver une apparence cohérente à travers votre IU est d'utiliser des feuilles de style, qui fonctionnent un peu comme CSS dans le développement Web. Cette approche sépare le style de la structure, ce qui facilite la gestion de votre IU.
Le système comporte trois éléments clés :
- Feuille de style (fichier .uss) : Créez une nouvelle feuille de style dans UI Builder et attachez-la à votre conteneur IU principal. Ce fichier contiendra toutes vos règles de style.
- Style Classes : Pour créer un style réutilisable, sélectionnez un élément visuel dans UI Builder. Dans l'Inspector sous la liste des classes de style, saisissez un nouveau nom de classe (par exemple, « bouton-menu ») et ajoutez-le à la liste.
- Réutilisabilité : Vous pouvez maintenant assigner cette même classe de style à n'importe quel autre élément d'IU. Tous les éléments partageant une classe hériteront automatiquement de ses propriétés définies, garantissant ainsi une apparence uniforme. Toute modification apportée à la classe de style mettra à jour tous les éléments assignés simultanément.
Vous pouvez voir cet exemple en action en accédant directement aux sections suivantes de la vidéo :
(2:18) - Créer une nouvelle feuille de style
(2:57) - Créer une nouvelle classe de style
(3:07) - Création d'un nouveau sélecteur USS à partir de la classe
(3:43) - Expliquer comment les modifications d'une classe de style affectent tous les éléments assignés
Si vous voulez en savoir plus sur le style de votre IU avec la feuille de style Unity (USS), consultez la page Documentation Unity.
Comment créer des effets de survol personnalisés pour les boutons ?
Vous pouvez créer des effets de survol personnalisés et d'autres styles interactifs à l'aide de pseudo-classes USS. La pseudo-classe :hover vous permet de définir un ensemble spécifique de styles qui ne sont appliqués que lorsque le curseur d'un utilisateur est sur un élément.
Pour implémenter un effet de survol personnalisé pour un bouton Unity standard, procédez comme suit :
1. Dans UI Builder, sélectionnez un bouton pour afficher ses classes de style par défaut dans l'Inspector. La classe de bouton standard est Unity Button.
2. Double-cliquez sur la classe du bouton Unity pour ajouter son sélecteur à votre feuille de style. Cela vous permet de modifier l'apparence par défaut du bouton, comme le rendre partiellement transparent.
3. Créez un nouveau sélecteur dans votre feuille de style en ajoutant la pseudo-classe :hover à la classe originale: .Unity-button:hover
4. Avec le nouveau sélecteur :hover actif, définissez les styles que vous voulez pour l'état de survol, comme changer la couleur d'arrière-plan pour qu'elle soit totalement opaque. L'IU basculera automatiquement entre ces styles lors des événements de survol de la souris.
Vous pouvez voir cet exemple en action en accédant directement aux sections suivantes de la vidéo :
(6:29) - Introduction aux pseudo-classes
(6:54) - Trouver la classe de style par défaut du bouton .Unity
(7:24) - Création du sélecteur de pseudo-classe :hover
(7:39) - Démonstration de l'effet de survol final
Si vous voulez en savoir plus sur les pseudo-cours, consultez la page Documentation Unity.
Comment ajouter un élément du kit d'outils IU à ma scène en tant qu'objet World Space ?
Unity 6.2 améliore le kit d'outils IU avec la possibilité de rendre les éléments d'IU directement dans World Space. Ce processus implique d'utiliser un UI Document et un GameObject pour héberger votre ressource UXML dans la scène.
Suivez cette séquence pour créer une interface utilisateur World Space :
1. Dans la fenêtre Hierarchy, faites un clic droit et sélectionnez UI Toolkit > UI Document . Cela crée un nouveau GameObject dans votre scène.
2. Sélectionnez le nouvel UI Document GameObject. Dans l'Inspector, localisez le champ Source Asset et assignez-lui votre fichier .uxml enregistré.
3. Cliquez sur la ressource Paramètres du panneau associée à UI Document. Cela mettra en surbrillance la ressource dans la fenêtre de votre projet.
4. Sélectionnez la ressource Panel Settings pour afficher ses propriétés dans l'Inspector. Changez le mode de rendu de l'espace écran par défaut en espace monde.
5. Après être passé à World Space, vous pouvez ajuster le composant RectTransform de GameObject UI Document pour positionner, faire pivoter et mettre à l'échelle le plan de l'IU dans votre scène 3D.
Vous pouvez voir cet exemple en action en accédant directement aux sections suivantes de la vidéo :
(7:49) - Création d'un UI Document dans la scène
(7:59) - Attribution de la ressource source UXML
(8:08) - Accès aux paramètres du panneau
(8:23) - Passer en mode rendu spatial mondial
(8:58) - Démonstration de l'IU finale de World Space
Si vous voulez en savoir plus sur l'IU World Space, consultez la page Documentation Unity.
