Essayez le nouvel exemple de kit d'outils IU, maintenant disponible sur l'Asset Store

Dans Unity 2021 LTS, UI Toolkit propose un ensemble de fonctionnalités, de ressources et d'outils pour vous aider à créer et à déboguer des IU d'exécution adaptatives sur un large éventail d'applications de jeu et d'extensions d'éditeur. Son flux de production intuitif permet aux créateurs Unity dans différents rôles – artistes, programmeurs et concepteurs – de démarrer le développement de l'IU le plus rapidement possible.

Consultez notre article de blog pour une explication des principaux avantages du kit d'outils IU, tels que l'évolutivité et les performances améliorées, déjà utilisées par des studios comme Mechanistry pour leur jeu, Timberborn.

Si Unity UI reste la solution de référence pour positionner et éclairer l'IU dans un monde 3D ou s'intégrer à d'autres systèmes Unity, UI Toolkit pour l'IU d'exécution peut déjà bénéficier aux productions de jeux en quête de performances et d"évolutivité dès le LTS Unity 2021. Il est particulièrement efficace pour l'interface utilisateur d'espace écran - Superposition et s'adapte bien à une variété de résolutions d'écran.

C'est pourquoi nous sommes ravis d'annoncer deux nouvelles ressources d'apprentissage pour mieux prendre en charge le développement de l'IU avec UI Toolkit :

• Exemple de kit d'outils IU pour Dragon Crashers : La démo est désormais disponible en téléchargement gratuit depuis l'Asset Store.
• Conception et implémentation de l'interface utilisateur dans Unity : Cet ebook gratuit peut être téléchargé à partir d'ici

Lisez la suite pour en savoir plus sur certaines fonctionnalités principales de l'exemple de projet du kit d'outils IU.

L'exemple du kit d'outils IU montre comment vous pouvez tirer parti du kit d'outils IU pour vos propres applications. Cette démo implique une interface complète sur une tranche du projet 2D Dragon Crashers, un mini RPG, en utilisant le flux de production du kit d'outils IU LTS Unity 2021 lors de l'exécution.

Certaines des actions illustrées dans l'exemple de projet vous montrent comment :

• Créez des styles avec des sélecteurs dans les fichiers de feuille de style Unity (USS) et utilisez des modèles UXML
• Créez des commandes personnalisées, comme un compteur circulaire ou des vues par onglets
• Personnalisez l'apparence des éléments tels que les curseurs et les boutons à bascule
• Utilisez Render Texture pour les effets de superposition d'IU, les animations USS, les thèmes saisonniers, etc.

Pour essayer le projet après l'avoir ajouté à vos ressources, entrez en mode lecture. Veuillez noter que les interfaces du kit d'outils IU n'apparaissent pas dans la fenêtre Scene. Vous pouvez plutôt les afficher dans la vue Game ou dans UI Builder.

Le menu de gauche vous aide à naviguer dans les écrans de menu principaux modaux. Cette colonne verticale de boutons donne accès aux cinq écrans modaux qui composent le menu principal (ils restent actifs tout en basculant entre les écrans).

Bien qu'une certaine interactivité soit possible, comme la guérison des personnages en faisant glisser les potions disponibles dans la scène, l'expérience de jeu a été réduite au minimum pour garantir une concentration continue sur les exemples d'IU.

Intéressons-nous de plus près aux IU de la barre de menus :

• L'écran d'accueil sert de pas de tir au lancement de l'application. Vous pouvez utiliser cet écran pour jouer au jeu ou recevoir des messages de chat simulés.

• L'écran de personnage implique un mélange de GameObjects et d'éléments de l'IU. C'est ici que vous pourrez explorer chacun des quatre personnages de Dragon Crashers. Utilisez les onglets statistiques, compétences et bio pour lire les détails spécifiques du personnage, et cliquez sur les emplacements de l'inventaire pour ajouter ou supprimer des objets. La zone d'aperçu montre un personnage éclairé en 2D et riggé sur un fond carrelé.

• L'écran de ressources renvoie à la documentation, au forum et à d'autres ressources pour tirer le meilleur parti du kit d'outils IU.

• L'écran de la boutique simule une boutique dans le jeu où vous pouvez acheter des devises fortes et douces, comme de l'or ou des pierres précieuses, ainsi que des articles virtuels comme des potions de soin. Chaque article de l'écran de la boutique est un VisualTreeAsset distinct. Le kit d'outils IU instancie ces ressources à l'exécution, une pour chaque objet programmable dans les ressources/GameData.

• L'écran de messagerie est un lecteur frontal de messages fictifs qui utilise un menu à onglets pour séparer la boîte de réception des messages supprimés.

• L'écran de jeu est une mini version du projet Dragon Crashers qui démarre automatiquement. Dans ce projet, vous remarquerez quelques éléments révisés avec le kit d'outils IU, tels qu'un bouton de pause, des barres de vie et la possibilité de faire glisser un élément de potion de soin à vos personnages lorsqu'ils subissent des dommages.

Le kit d'outils IU vous permet de créer des IU stables et cohérentes pour l'ensemble de votre projet. Dans le même temps, il fournit des outils flexibles pour ajouter vos propres graphismes et détails afin d'étoffer davantage le thème et le style du jeu.

Découvrons quelques-unes des fonctionnalités utilisées pour affiner les conceptions de l'IU dans l'exemple :

• Textures de rendu : les interfaces du kit d'outils IU sont rendues en dernier dans la file d'attente de rendu, ce qui signifie que vous ne pouvez pas superposer d'autres graphismes de jeu à une IU du kit d'outils IU. Les textures de rendu permettent de contourner cette limite en intégrant des effets dans le jeu aux IU du kit d'outils IU. Bien que ces effets basés sur les textures de rendu doivent être utilisés avec parcimonie, vous pourrez toujours vous permettre des effets nets dans le contexte d'une IU plein écran, sans exécuter d'expérience de jeu. Les images suivantes montrent un certain nombre de textures de rendu de la démo.

• Thèmes avec feuilles de style de thème (TSS) : Les fichiers TSS sont des fichiers ressource similaires aux fichiers USS standard. Ils servent de point de départ pour définir votre propre thème personnalisé via des sélecteurs USS, ainsi que des paramètres de propriétés et de variables. Dans la démo, nous avons dupliqué les fichiers de thème par défaut et modifié les copies pour offrir des variations saisonnières.

• Éléments d'IU personnalisés : Puisque les concepteurs sont formés pour penser en dehors des sentiers battus, le kit d'outils IU vous offre une grande marge de manœuvre pour personnaliser ou étendre la bibliothèque standard. Le projet de démo met en évidence quelques éléments personnalisés dans les menus à onglets, les bascules de diapositives et les listes déroulantes, ainsi qu'un compteur radial pour démontrer ce dont les artistes de l'IU sont capables aux côtés des développeurs.

• Transitions USS pour les modifications d'état animées de l'IU : Ajouter des transitions aux écrans de menu peut peaufiner et fluidifier vos visuels. Le kit d'outils IU facilite cette tâche grâce à la propriété Transition Animations, qui fait partie de l'Inspector de UI Builder. Réglez les propriétés Property, Duration, Easing et Delay pour configurer l'animation. Il vous suffit ensuite de changer les styles du kit d'outils IU pour appliquer la transition animée lors de l'exécution.

• Volume de post-traitement pour un flou d'arrière-plan : Un effet populaire dans les jeux est de flouter une scène de jeu bondée pour attirer l'attention du joueur sur un message contextuel ou une fenêtre de dialogue en particulier. Vous pouvez obtenir cet effet en activant la profondeur de champ dans le cadre Volume (disponible dans le pipeline de rendu universel).

Nous nous sommes assurés que des flux de production efficaces étaient utilisés pour fortifier l'IU. Voici quelques recommandations pour que le projet reste bien organisé :

• Conventions de dénomination cohérentes : Il est important d'adopter des conventions de dénomination qui correspondent à vos éléments visuels et feuilles de style. Des conventions de dénomination claires maintiennent non seulement l'organisation de la hiérarchie dans UI Builder, mais elles la rendent plus accessible à vos coéquipiers et maintiennent le code propre et lisible. Plus spécifiquement, nous suggérons la convention de dénomination BEM ( Block Element Modifier) pour les éléments visuels et les feuilles de style. D'un simple coup d'œil, le nommage BEM d'un élément peut vous indiquer ce qu'il fait, comment il apparaît et comment il est lié aux autres éléments qui l'entourent. Consultez les exemples de dénomination BEM suivants :

• Disposition adaptative : À l'instar des technologies Web, UI Toolkit offre la possibilité de créer des mises en page où les éléments visuels « enfants » s'adaptent à la taille disponible actuelle à l'intérieur de leurs éléments visuels « parents », et d'autres où chaque élément a une position absolue ancrée à un point de référence, à l'instar du système Unity UI. L'exemple utilise les deux options au besoin via les éléments visuels de l'IU.

• PSD Importer : L'un des outils les plus efficaces pour créer la démo, PSD Importer permet aux artistes de travailler dans un document maître sans avoir à exporter manuellement chaque sprite séparément. Lorsque des modifications sont nécessaires, elles peuvent être effectuées dans le fichier PSD original et mises à jour automatiquement dans Unity.
• ScriptableObjects : Afin de se concentrer sur la conception et l'implémentation de l'IU, l'exemple de projet simule des données backend, telles que des achats intégrés et des messages électroniques, à l'aide d'objets programmables. Vous pouvez personnaliser facilement ces données standard à partir du dossier Ressources/GameData et utiliser l'exemple pour créer des ressources de données similaires, telles que des éléments d'inventaire et des données de personnage ou de dialogue dans le kit d'outils IU.

Souvenez-vous qu'avec le kit d'outils IU, les dispositions et les styles de l'IU sont découplés du code. Cela signifie que la réécriture des données backend peut se produire indépendamment de la conception de l'IU. Si votre équipe de développement remplace ces systèmes, l'interface devrait continuer à fonctionner.

Les autres outils utilisés dans la démo incluent les systèmes de particules créés avec le système de particules intégré pour les effets spéciaux, et l'ensemble d'outils 2D, entre autres. N'hésitez pas à consulter le projet via l'Inspector pour voir comment ces différents éléments entrent en jeu.

Vous trouverez les illustrations de référence réalisées par les artistes de l'IU sous IU/Reference, telles que reproduites dans UI Builder. L'ensemble du processus, des maquettes aux wireframes, est également documenté dans l'ebook. Enfin, tout le contenu de l'exemple peut être ajouté à votre propre projet Unity.

Vous pouvez télécharger l'exemple de kit d'outils IU – Dragon Crashers à partir de l'Asset Store. Une fois que vous aurez exploré ses différentes conceptions d'IU, veuillez donner votre avis sur le forum.

Alors n'hésitez pas à consulter notre ebook sur la conception et l'implémentation de l'interface utilisateur dans Unity. Télécharger