Boîte à outils UI : Démos nouvelles et mises à jour pour les programmeurs et les artistes
Nous sommes heureux d'annoncer la disponibilité de deux nouveaux échantillons éducatifs mis à jour pour soutenir les différentes perspectives des programmeurs et des artistes/designers dans la création d'une interface utilisateur de jeu professionnelle avec UI Toolkit.
UI Toolkit fournit un ensemble d'outils pour développer des interfaces utilisateur performantes et évolutives pour les jeux et les applications, des extensions personnalisées pour l'éditeur Unity et des outils de débogage en cours d'exécution. Ses concepts de base et ses flux de travail vous seront familiers si vous avez l'habitude de développer des pages web ou des applications.
L'objectif de ces exemples éducatifs est de vous aider à créer des interfaces utilisateur riches, réactives et évolutives avec UI Toolkit. La nouvelle démo QuizUpour les programmeurs, et la mise à jour de l'échantillon UI Toolkit - Dragon Crashers pour les artistes et les concepteurs, sont deux projets très différents, chacun étant accompagné d'un vaste contenu didactique.
QuizU est un exemple d'application de quiz interactif centré sur le programmeur qui montre comment les composants d'UI Toolkit peuvent fonctionner ensemble, en tirant parti de divers modèles de conception, dans un jeu petit mais fonctionnel avec plusieurs écrans et une gestion du déroulement du jeu.
La démo se compose de deux parties : 10 petits échantillons digestes qui démontrent différents aspects d'UI Toolkit, et un mini jeu quiz qui consolide de nombreuses techniques des 10 scènes dans un projet complet.
Le style visuel minimaliste du mini-jeu vous permet de vous concentrer sur les mécanismes de mise en œuvre de l'interface utilisateur, sans vous perdre dans les détails de la conception.
Ce jeu illustre comment utiliser le modèle d'état pour le déroulement du jeu, gérer plusieurs écrans de menu, utiliser le modèle modèle-vue-présentateur, mettre en œuvre la gestion des événements dans UI Toolkit, et plus encore. L'objectif est de montrer et d'enseigner des techniques de mise en œuvre que vous pouvez utiliser dans vos propres projets.
En intégrant certains de ces modèles de conception de manière cohérente dans votre projet, vous pouvez améliorer la lisibilité du code et rendre votre base de code plus propre. Les modèles de conception ne réduisent pas seulement le remaniement et le temps consacré aux tests, ils peuvent aussi accélérer les processus de développement pour l'ensemble de l'équipe.
En outre, l'architecture pilotée par les événements, dans laquelle les composants du jeu communiquent entre eux par le biais d'événements, favorise un couplage lâche pour l'évolutivité et la testabilité.
La deuxième partie de la démo consiste en 10 petites scènes de démonstration. Chaque scène de démonstration représente une technique ou une caractéristique spécifique. Considérez-les comme un ensemble de recettes qui vous inspireront et vous guideront lorsque vous évaluerez UI Toolkit pour votre prochain projet. Voici un bref aperçu des fonctionnalités et des techniques de l'UI Toolkit illustrées par les scènes de démonstration :
- UXML et arbres visuels: Les fichiers UXML forment une structure hiérarchique d'éléments d'interface utilisateur. Ces arborescences visuelles servent de schéma directeur à votre interface utilisateur.
- Flexbox: Le modèle de mise en page Flexible Box (Flexbox) fournit un modèle de mise en page efficace pour la disposition dynamique des éléments de l'interface utilisateur à l'intérieur d'un conteneur.
- Feuilles de style Unity (USS): USS permet aux développeurs de personnaliser les éléments de l'interface utilisateur à l'aide de styles prédéfinis. Le remodelage de l'interface utilisateur se résume à l'échange de feuilles de style.
- UQuery: UQuery simplifie le processus de recherche dans une hiérarchie complexe d'éléments d'interface utilisateur, permettant une navigation transparente vers des composants spécifiques de l'interface utilisateur dans l'arbre visuel.
- Pseudo-classes: Les pseudo-classes peuvent être utilisées pour créer des éléments d'interface utilisateur interactifs et animés avec un minimum de code supplémentaire, ajoutant ainsi du "jus" à votre interface visuelle (par exemple, en agrandissant un bouton lorsqu'on le survole ou en changeant la couleur d'un champ de texte après sélection).
- Système d'événements de la boîte à outils UI: UI Toolkit possède son propre système d'événements, conçu pour gérer les clics, les modifications et les entrées de pointeur de votre interface utilisateur, même dans des hiérarchies complexes.
- Manipulateurs: Encapsulant les rappels d'événements connexes dans une classe unique, un manipulateur favorise la réutilisation et facilite la définition des interactions avec l'utilisateur (par exemple, un manipulateur de type cliquer-déplacer pour un système d'inventaire, un manipulateur de type gestuel pour un effet "pincer-zoomer", etc.)
- Contrôles personnalisés: La démo montre comment définir et instancier un VisualElement personnalisé grâce aux classes UxmlFactory et UxmlTraits. Ces contrôles personnalisés peuvent ensuite être réutilisés par le biais de scripts ou de l'UI Builder.
Nous vous recommandons de télécharger QuizU en utilisant Unity 2022 LTS. Vous pouvez également suivre notre série d'articles, publiés sur Unity Discussions, qui accompagnent la démo. Les articles sont disponibles ici :
En septembre 2022, nous avons lancé UI Toolkit Sample - Dragon Crashers (vous pouvez lire l'article de blog sur le lancement). Cette démo d'une interface complète sur une partie du projet de mini RPG en 2D Dragon Crashersmontre des techniques permettant d'utiliser UI Toolkit dans vos propres applications. C'est le complément de l'e-book Conception d'interface utilisateur et implémentation dans Unityqui sortira également à la fin de l'année 2022.
Vous pouvez maintenant télécharger une nouvelle version de UI Toolkit Sample - Dragon Crashers pour Unity 2022 LTS. Les améliorations et les mises à jour de cette dernière version sont les suivantes :
- Prise en charge des modes paysage et portrait de l'écran en cours d'exécution grâce aux thèmes et à l'événement GeometryChangedEvent dans UI Toolkit
- Mise en œuvre de l'API SafeArea pour contenir la fonctionnalité de l'interface utilisateur dans la zone d'écran utilisable d'un appareil.
- Augmentation de la limite d'images par seconde pour les appareils mobiles à 60 images par seconde
- Refonte, simplification des sélecteurs et des feuilles de style USS
- Icônes à plus haute résolution
- Amélioration de la position fixe des VFX pour les différents ratios d'écran et quelques incohérences au niveau du curseur.
- Refonte des modèles de conception pour une architecture d'interface utilisateur plus propre
- Nouveau contenu d'apprentissage fourni par la fenêtre de l'inspecteur de didacticiel
Nous avons également ajouté un guide de l'utilisateur pour le projet mis à jour. Ceci est une réponse aux commentaires que nous avons reçus des utilisateurs qui ont demandé un meilleur contenu pédagogique pour les aider à comprendre les techniques et les fonctionnalités utilisées dans la démo.
Enfin, une vidéo de présentation du projet est désormais disponible pour vous aider à naviguer dans la démo. A vérifier :
Nous espérons que vous trouverez de nombreux conseils utiles avec QuizU et l'exemple mis à jour de la boîte à outils de l'interface utilisateur - Dragon Crashers. Vous trouverez tous les livres électroniques avancés d'Unity pour les programmeurs, les artistes, les artistes techniques et les concepteurs dans le hub des meilleures pratiques d'Unity.