Share
Ce que vous allez créerDans ce didacticiel de notre série Amazon Lumberyard, je vais vous montrer comment utiliser l'éditeur d'interface utilisateur et ses fonctionnalités. Vous allez ajouter et configurer plusieurs éléments tels que l’arrière-plan, les étiquettes de texte et les boutons. Ensuite, vous apprendrez à créer un menu d'interface utilisateur à partir de zéro. Enfin, vous serez confronté à un défi.
Notez qu'il vous est conseillé de lire le reste de la série afin de bien comprendre les notations de cette partie..
Cette série de didacticiels s’adresse principalement à deux groupes de développeurs de jeux: ceux qui ne connaissent pas du tout les moteurs de jeu et ceux qui connaissent d’autres moteurs de jeu (tels que Unity, Unreal Engine ou Cry Engine), mais pas avec Lumberyard. . Je suppose que vous connaissez un peu la notation graphique informatique, je ne couvrirai donc pas toutes les notations de manière exhaustive..
L'éditeur d'interface utilisateur peut être ouvert de deux manières principales: le premier est à travers le Menu principal en utilisant le lien à Affichage> Ouvrir le volet de visualisation> Editeur d'interface utilisateur.
La deuxième voie est à travers le Éditeur d'interface utilisateur icône disponible dans le Barre d'outils de l'éditeur.
Ouvrez le Éditeur d'interface utilisateur en utilisant l'une des options susmentionnées.
Après le Éditeur d'interface utilisateur s'ouvre, vous remarquerez qu'il sera vide. Lorsque l'éditeur d'interface utilisateur s'ouvre, il charge par défaut un canevas vide.
Afin de mieux comprendre comment le Éditeur d'interface utilisateur est organisé, nous allons ouvrir le canevas d’interface utilisateur de Lumberyard. Pour ce faire, cliquez sur Fichier> Ouvrir. Maintenant, naviguez vers le dev \ SamplesProject \ Levels \ Samples \ UIEditor_Sample \ UI dossier et sélectionnez le UiSample.uicanvas fichier. Cliquez sur Ouvrir. Une interface brillante apparaîtra comme suit:
le Éditeur d'interface utilisateur se compose des vitres suivantes:
Notez que vous pouvez augmenter ou diminuer la taille (en effectuant un zoom avant ou arrière) de la fenêtre d'affichage à l'aide de la molette de la souris..
Si vous sélectionnez le Contexte élément à l'intérieur du Hiérarchie, le suivant Propriétés sont présentés:
De même, si vous sélectionnez l’un des boutons, le Propriétés le menu changera en conséquence (il est sensible au contexte).
Avec le Éditeur d'interface utilisateur ouvert, sélectionnez le Contexte élément dans le Hiérarchie vitre. Faites un clic droit dessus et sélectionnez Nouveau> Vider du préfabriqué…> Bouton.
Un nouveau bouton devrait apparaître dans la fenêtre.
Vous remarquerez que la nouvelle Bouton n'a pas la même apparence quela Jouer, Les options, et Quitter boutons.
Pour commencer à modifier l'apparence du bouton, déplaçons-le d'abord vers un nouvel emplacement. Le nouvel emplacement devrait être sous la Quitter bouton. Pour effectuer cette action, sélectionnez le Bouton (en utilisant le fenêtre d'affichage ou la Hiérarchie) puis sélectionnez le Bouge toi outil et enfin, placez-le à l'emplacement souhaité.
Ensuite, vous devez changer le Bouton texte. Sélectionner Texte sous le Bouton à l'intérieur de Hiérarchie vitre. Notez que le Propriété volet a changé en conséquence. Changer la Texte propriété à Sur.
Vous pouvez également modifier le texte Couleur, transparence (Alpha), Chemin de la police, Taille de police, ou Effets de police, et les deux Verticale alignements de texteet Halignements de texte horizontaux. Comme mentionné ci-dessus, ces propriétés sont sensibles au contexte, elles changent donc en fonction de l'élément choisi..
Maintenant, changez le Couleur au blanc et au Alpha valeur à 1. Puis double-cliquez sur la valeur par défaut Chemin de la police. Accédez au les polices dossier et sélectionnez le notosans-regular.xml fichier. Enfin, changez le Effet de police de drop_shadow à défaut. Les configurations de vos boutons doivent être les suivantes:
Sélectionnez le nouveau Bouton à l'intérieur de Hiérarchie volet et modifier le Chemin des sprites. Aller vers SamplesProject \ textures \ UIEditor_Sample, sélectionnez le ButtonNormal déposer et cliquer Ouvrir.
Afin de masquer l'image, vous devez changer sa Alpha. Changer la Type d'image à Étiré, la Couleur au blanc, et le Alpha à 0. La configuration finale est la suivante:
Un bouton sans interaction de l'utilisateur n'est pas un bouton. L'étape suivante consiste à ajouter une interaction aux boutons. Dans Lumberyard, l'action avec un bouton est effectuée en utilisant les états du bouton. La modification des états est un excellent moyen d'envoyer des commentaires à l'utilisateur afin de l'informer lorsqu'il manipule un bouton spécifique dans la fenêtre d'affichage..
Chaque bouton peut avoir trois états:
Commençons par changer le Flotter Etat. Sélectionnez le Lutin dossier et changer sa valeur à ButtonNormal. Par défaut, vous devriez être au dernier dossier utilisé. Sinon, accédez à SamplesProject \ textures \ UIEditor_Sample et sélectionnez le ButtonNormal.
Maintenant changer le Pressé en effectuant la même opération que précédemment, mais sélectionnez maintenant le ButtonPressed fichier.
A ce moment, la prochaine étape logique consistait à tester les interactions que nous venons de créer. Cependant, nous laisserons cela pour une étape ultérieure (dans le prochain tutoriel). Pour l'instant, vous allez simplement croire que ce que vous venez d'accomplir fonctionne comme prévu.
Lorsque vous avez besoin de plus d’un type d’élément, il est conseillé de créer, d’utiliser et de réutiliser des préfabriqués. Cela peut être très utile si vous devez réutiliser votre élément dans plusieurs canevas de votre projet..
Pour sauvegarder lebouton en tant que préfabriqué, faites un clic droit dessus et sélectionnez Enregistrer sous Préfabriqué… .
Nommez le préfabriqué Bouton personnalisé et cliquez sauvegarder.
Maintenant que vous avez déjà créé un préfabriqué, vous pouvez supprimer lebouton du Hiérarchie.
Que diriez-vous du nouveau préfabriqué? Comment pouvons-nous l'ajouter à nouveau? Pour ajouter le préfabriqué, vous devez cliquer sur le bouton Nouveau… bouton et sélectionnez Elément from prefab> CustomButton.
Votre bouton devrait apparaître exactement à l'endroit où il avait été configuré auparavant.
À ce stade, vous connaissez déjà les bases de la Éditeur d'interface utilisateur et ses propriétés. Par conséquent, il est maintenant temps de créer un Toile d'interface utilisateur à partir de rien.
Ouvrez le Éditeur d'interface utilisateur et commencez par ajouter un Image préfabriqué ( Nouveau… > Élément de préfabriqué> Image).
Un carré blanc est placé dans la fenêtre. Il est maintenant temps de le configurer. Sélectionnez le Image et double-cliquez sur son nom. Le changer en Contexte.
Avec le Contexte sélectionné, regardez le Propriétés vitre. Notre objectif est d’adapter l’image d’arrière-plan à la fenêtre complète. Nous devons donc contrôler ses propriétés sous le Transform2D Propriétés.
Sélectionnez le Ancre presets et choisissez celui en bas à droite.
Ce faisant, vous dites que le Image devrait couvrir la fenêtre entière. le Ancre spécifie les positions proportionnelles dans le rectangle de l'élément parent.
Avez-vous remarqué les ancres bleues qui viennent d'apparaître?
Les ancres bleues à l'intérieur du rectangle blanc indiquent les points d'ancrage. En utilisant la configuration susmentionnée, les ancrages seront automatiquement placés près des quatre coins.
Cependant, vous devriez déjà avoir remarqué que la taille du rectangle blanc est différente de la résolution par défaut. Pour résoudre ce problème, vous devez tout modifier. Les compensations à 0.
En utilisant cette configuration, vous pouvez maintenant changer la résolution de la fenêtre d'affichage pour une résolution donnée et l'image de fond changera en conséquence.
Votre prochaine étape consiste à ajouter une jolie image de fond dans le Contexte élément. Téléchargez cette image et placez-la dans le dossier de votre projet (par exemple, sous le dev \ SamplesProject dossier).
Notez que, si vous ne placez pas le fichier image dans notre projet, Lumberyard renverra un "Erreur de texture manquante". Procédez et sélectionnez-le dans le menu Chemin des sprites sous le Image section de la Propriétés vitre.
Texte
Ajouter un Texte préfabriqué (Nouveau… > Elément de prefab> Texte). Changer son Texte nommer à "IMPRESSIONNANT JEU gamedevelopment.tutsplus.com"et sa couleur à un vert clair. Le Taille de police devrait être 60, et il devrait être placé près du sommet.
Vous avez un titre, mais il vous manque des boutons pour l’interaction de l’utilisateur. Par conséquent, la prochaine étape consiste à créer trois boutons:
Pour chaque bouton, vous utiliserez différentes configurations.
Ce que vous êtes censé créer ressemble à ce qui suit:
Si vous rencontrez des problèmes pour réaliser la configuration précédente, passez à la section suivante et je vous guiderai à travers elle..Vous devez créer trois boutons avec des propriétés différentes. Commençons par le plus facile, le Bouton personnalisé préfabriqué Pour importer ce bouton, vous devez cliquer sur Nouveau…> Elément from prefab> CustomButton. Le bouton devrait apparaître. C’est maintenant juste une question de positionnement.
Le deuxième bouton devrait être Démarrer jeu. Ajouter un Bouton préfabriqué (Nouveau…> Elément de prefab> Button) et changer sa Texte nom à Démarrer jeu. Si vous le souhaitez, vous pouvez modifier les propriétés supplémentaires de ce bouton. Est à vous de le faire.
Le troisième bouton, Les options, est un peu plus compliqué que les deux précédents. Commencez par ajouter un autre Bouton préfabriqué (Nouveau…> Elément de prefab> Button). Changer son Sprite Path au options_icon.png fichier. Après cette étape, vous verrez l’image du bouton mais avec le mauvais la taille Taille. Procéder et changer le la taille valeur à 200.
Votre dernière étape consiste à enregistrer le canevas d'interface utilisateur.. Sélectionnez Fichier> Enregistrer sous et nommez-le Mes valises.
Comme mentionné précédemment, certaines étapes n'ont pas été correctement testées (telles que les états des boutons et l'interaction ultérieure de l'utilisateur). La raison principale tient au fait que vous devez utiliser FlowGraph pour tester ces interactions. Par conséquent, le prochain tutoriel de la série sera axé sur FlowGraph, et nous reviendrons pour disséquer cette partie.
Vous devez maintenant créer un nouveau canevas d’interface utilisateur pour le Sur et Les options boutons. Dans le prochain tutoriel, il vous sera demandé de tout connecter.
Ceci conclut ce tutoriel sur Lumberyard. Vous avez appris à utiliser l'éditeur d'interface utilisateur et ses propriétés. Vous avez appris à ajouter et configurer plusieurs éléments de l'interface utilisateur sous forme d'image, de texte et de bouton. Vous êtes maintenant en mesure de créer des menus personnalisés à partir de zéro et de configurer son apparence. Si vous avez des questions ou des commentaires, comme toujours, n'hésitez pas à laisser une ligne dans les commentaires.
Accentsconagua