Que recherchez-vous ?
Games

Tout est là : Le guide ultime de la création d'interfaces UI dans Unity

SHANTI ZACHARIAH / UNITY TECHNOLOGIESSenior content marketing manager
Dec 15, 2022|9 Min
Tout est là : Le guide ultime de la création d'interfaces UI dans Unity
Cette page a été traduite automatiquement pour faciliter votre expérience. Nous ne pouvons pas garantir l'exactitude ou la fiabilité du contenu traduit. Si vous avez des doutes quant à la qualité de cette traduction, reportez-vous à la version anglaise de la page web.
Des milliers de personnes se sont préinscrites et le moment est enfin venu : Notre plus gros e-book à ce jour, Conception et mise en œuvre de l'interface utilisateur dans Unityest disponible au téléchargement. Préparez-vous à plonger dans plus de 130 pages d'instructions avancées sur la conception de l'interface utilisateur.

L'interface utilisateur de votre jeu est peut-être le moyen le plus direct de communiquer avec vos joueurs et de les guider, comme une carte pliée que vous leur tendez et qui révèle des indices, des détails clés et des directions au fur et à mesure qu'ils progressent. Que vous utilisiez des éléments plus traditionnels tels que des barres de santé et des messages contextuels, ou des éléments complètement intégrés à l'univers du jeu, comme l'affichage de statistiques au dos de la combinaison de survie d'un joueur, l'interface utilisateur fait partie intégrante de l'immersion des joueurs dans l'histoire, le royaume et le style artistique de votre jeu.

Nous sommes ravis d'annoncer que notre dernier e-book technique, Conception et mise en œuvre de l'interface utilisateur dans Unityest disponible en téléchargement gratuit. Des milliers de personnes se sont déjà inscrites et autant ont téléchargé le projet de démonstration qui l'accompagne, Exemple de boîte à outils d'interface utilisateur - Dragon Crashersà ce jour. C'est maintenant à vous de jouer.

Un regard sur la conception et l'implémentation de l'interface utilisateur dans Unity
Un aperçu de l'e-book "Conception et mise en œuvre de l'interface utilisateur" dans Unity
Principes de l'interface utilisateur : De la création artistique aux outils les plus récents

L'intérêt pour ce livre électronique est compréhensible. Comme indiqué dans l'introduction, "l'interface utilisateur est un élément essentiel de tout jeu... une interface utilisateur graphique (GUI) solide est une extension de l'identité visuelle d'un jeu... [et] le public moderne souhaite des GUI raffinées et intuitives qui s'intègrent de manière transparente à votre application."

Le guide commence par aborder les principes fondamentaux de la conception de l'interface utilisateur et de la création artistique, puis passe à des sections pédagogiques approfondies sur le développement de l'interface utilisateur dans Unity. Rédigé et revu par des artistes techniques et des artistes de l'interface utilisateur - des professionnels externes et de Unity - l'e-book décortique à la fois Unity UI, la solution par défaut, et le plus récent UI Toolkit.

L'accent est toutefois mis sur ce dernier ensemble d'outils, car UI Toolkit offre désormais de nombreux avantages pour les projets comportant des interfaces complexes en plein écran. Pensez aux projets qui nécessitent un système évolutif et performant pour l'interface utilisateur en cours d'exécution. Pour vous aider à choisir la bonne solution pour votre projet, veuillez vous référer à cette section du manuel Unity.

Wireframing, roundtripping, grey-boxing, etc.
 Exemples de projets de l'UI Toolkit, utilisant des illustrations de la démo Dragon Crashers, construits avec des wireframes dans Adobe XD pour tester les flux de navigation et partager les retours d'expérience.
Exemples de projets de l'UI Toolkit, utilisant des illustrations de la démo Dragon Crashers, construits avec des wireframes dans Adobe XD pour tester les flux de navigation et partager les retours d'expérience.

Cet e-book est une véritable mine d'informations pour les concepteurs d'interface utilisateur professionnels, les artistes et autres créateurs d'Unity qui souhaitent approfondir leurs connaissances en matière de développement d'interface utilisateur. Voici un aperçu de ce qu'il contient.

La première section vise à inspirer en donnant des conseils fondamentaux pour créer des interfaces utilisateur efficaces. Il examine des exemples d'interfaces utilisateur diégétiques, où des éléments d'interface utilisateur peuvent être trouvés au sein même de l'histoire, faisant fonctionner certaines parties de l'univers du jeu comme une interface utilisateur. Il explique comment les éléments peuvent contribuer à l'immersion d'un joueur ou la rompre. Nous avons même transformé cette section en un article de blog que vous pouvez lire ici.

Le guide aborde ensuite les rôles et les responsabilités d'un concepteur d'interface utilisateur, ainsi que les outils et les méthodes qu'il utilise, tels que le wireframing, la création artistique par le biais de maquettes, de polices de caractères et de boîtes grises. Un chapitre est également consacré à la préparation des ressources et à l'exportation de graphiques à partir d'outils de création de contenu numérique (DCC). Ces premières sections du guide sont utiles quel que soit le moteur de jeu et la solution d'interface utilisateur que vous utilisez.

Conseils avancés pour l'utilisation d'Unity UI

Un chapitre complet est consacré à l'interface utilisateur d'Unity. Unity UI est notre système de longue date pour la création d'interfaces utilisateur dans les jeux, et actuellement la solution de référence pour le positionnement d'interfaces utilisateur dans un monde 3D ou l'utilisation de systèmes Unity basés sur des GameObjects.

La ressource Unity UI Samples utilise des éléments basés sur des GameObjects.
La ressource Unity UI Samples utilise des éléments basés sur des GameObjects.

Cette section présente les principes fondamentaux de l'Unity UI pour le prototypage et l'intégration de ressources dans l'éditeur : le Canvas, les éléments d'UI préconstruits, TextMesh Pro, et les Prefabs, entre autres. Nous avons récemment mis à jour un article sur les techniques d'optimisation avancées pour Unity UI, dans lequel vous trouverez des conseils sur des sujets connexes.

Développez vos compétences grâce à la boîte à outils UI en constante évolution

UI Toolkit est conçu pour une performance et une réutilisation maximales, avec des flux de travail et des outils de création basés sur des technologies web standard. Les concepteurs d'interface utilisateur et les artistes le trouveront probablement familier, surtout s'ils ont une expérience préalable de la conception de pages web.

Trois grandes sections du guide présentent des instructions pour le développement d'une interface utilisateur d'exécution avec UI Toolkit. Il y a une explication détaillée des éléments qui composent les interfaces utilisateur réalisées avec UI Toolkit, y compris le langage de balisage extensible Unity (UXML) et la feuille de style Unity (USS) à l'aide d'UI Builder.

Vous découvrirez comment UI Toolkit positionne les éléments visuels sur la base des principes suivants Yogaun moteur de mise en page HTML/CSS qui implémente un sous-ensemble de la technologie Flexbox. L'architecture Flexbox offre des avantages, tels que l'interface utilisateur réactive, qui vous permet d'adapter votre interface utilisateur à différentes résolutions et tailles d'écran. Grâce à l'UXML et à l'USS, vous pouvez découpler les styles appliqués aux présentations de l'interface utilisateur (et modifier ces styles en fonction des besoins), tandis que la logique et la fonctionnalité continuent de vivre dans le code. Les flux de travail pour les éléments visuels, les éléments fondamentaux de chaque interface, sont également abordés en détail - du positionnement, de la taille et des paramètres d'alignement, aux marges et au rembourrage.

Logique et conception du découplage : Les programmeurs relieront les éléments visuels à la logique du jeu (en bas), tandis que les concepteurs se concentreront sur la définition des styles (UI Builder en haut).
Logique et conception du découplage : Les programmeurs relieront les éléments visuels à la logique du jeu (en bas), tandis que les concepteurs se concentreront sur la définition des styles (UI Builder en haut).
Tout sur le stylisme
Vous pouvez passer d'un style à l'autre à l'aide d'animations de transition.
Vous pouvez passer d'un style à l'autre à l'aide d'animations de transition.

Le chapitre sur le style vous montre comment définir un style réutilisable pour les éléments visuels à l'aide de sélecteurs, comment remplacer les styles et définir des attributs uniques à l'aide de styles en ligne, et comment créer des animations et des effets avec l'animation USS et une texture de rendu de caméra. Il montre également comment thématiser les éléments de l'interface utilisateur pour les fêtes et autres événements spéciaux.

C'est à ce moment-là que le livre électronique entre en jeu. Exemple d'UI Toolkit - Dragon Crashersavec différentes sections qui décrivent comment l'interface utilisateur a été créée, des menus et des contrôles personnalisés comme les compteurs radiaux ou les vues par onglets, aux modèles UXML intégrés et plus encore.

A partir de l'exemple de l'UI Toolkit : L'inventaire, alimenté par les données de ScriptableObject
A partir de l'exemple de l'UI Toolkit : L'inventaire, alimenté par les données de ScriptableObject

Enfin, le guide se termine par un mini-profil de la migration de l'interface utilisateur du studio Mechanistry vers UI Toolkit pour leur nouveau jeu, Timberborn. Cette brève étude montre comment une équipe réduite a réussi à faire évoluer son jeu et à le rendre cohérent sur différents menus et écrans.

De nouvelles ressources pour affiner la création d'IU dans Unity

Avec ses 137 pages, le livre électronique de l'assurance-chômage n'est pas une lecture légère. Comme pour les autres livres électroniques techniques publiés l'année dernière, il convient de s'y référer régulièrement.

En plus de l'e-book, nous vous invitons à consulter deux ressources récemment publiées qui contiennent des conseils utiles pour tirer parti d'Unity UI et d'UI Toolkit :

Les livres électroniques techniques sont tous à portée de clic

Ajoutez un signet à l'une de ces pages ou aux deux. Ils compilent tous nos livres électroniques techniques et notre contenu avancé :

Nous espérons que vous apprécierez ce nouveau livre électronique et nous attendons avec impatience vos commentaires dans ce forum.

Illustration de promotion pour le livre électronique 'User interface design and implementation in Unity' (conception et mise en œuvre de l'interface utilisateur dans Unity).