Unity niveau intermédiaire : conception d'UI

Name: Unity niveau intermédiaire : conception d'UI
Author: Ken Geary

Création d'écrans de démarrage de l'interface utilisateur (IU), d'un menu principal et d'éléments de superposition

Preview the first lesson free — get full access to all 4 lessons.

Cours : à la demande

Bonjour, bienvenue dans cette leçon dans Unity. Dans ces leçons, vous apprendrez à travailler avec l'utilisateur interfaces pour créer un menu Démarrer, des écrans de démarrage et dans -superpositions de statut de jeu. Les interfaces utilisateur, généralement appelées UI, font partie intégrante de toute application ou jeu interactif. Il permet à un utilisateur de sélectionner les options de jeu en cliquant ou en appuyant sur boutons de menu, saisissez des données ou ajustez un widget, tel qu'un curseur. Les écrans d'interface utilisateur sont également utilisés pour afficher un titre de jeu ou un jeu sur l'écran. Nous allons créer un jeu de base de style plateforme en 2D. Lancez le Hub Unity, puis sélectionnez Nouveau projet, choisissez la 2D, vérifiez le chemin de votre fichier, alors nous nommerons ce projet Platformer. Cliquez sur Créer un projet. L'éditeur Unity aura la même apparence que s'il travaillait sur un Le projet 3D, autre que la fenêtre de scène, est basculé en 2D voir. Créez un dossier Scènes, si on n'y est pas déjà. Nous allons enregistrer cette scène en tant qu'interface utilisateur. Nous explorerons un échantillon des nombreux éléments d'interface utilisateur disponibles pour créer des interfaces utilisateur en commençant par un jeu de canevas objet. Le canevas est un espace réservé invisible pour votre autre interface utilisateur éléments, tels que des panneaux, des images et des boutons. Dans la hiérarchie, faites un clic droit, sélectionnez UI, puis sélectionnez Toile. Dans l'inspecteur, plusieurs composants composent La toile. En mode rendu, vous pouvez faire apparaître le canevas dans le monde espace, ce qui est utile si on veut avoir, par exemple, un jeu objet avec un graphique d'informations flottant montrant le la santé de l'objet. Nous voulons que ce menu occupe tout l'écran de jeu, nous allons donc laissez-le dans l'espace de l'écran. Réglez le scaler de la toile pour qu'il soit adapté à la taille de l'écran, donc si l'utilisateur exécute le jeu sur un niveau inférieur ou supérieur moniteur de résolution, l’interface utilisateur évoluera en conséquence. Définissez la résolution de référence sur 960 x 540. si vous basculez la 3D en orbite pour zoomer, vous pouvez voir quelle est sa taille dans l’espace mondial. Unity lorsque vous travaillez dans un espace d'écran 2D n'affichera que ceci toile en plein écran et verrouillée sur la caméra. On peut ajouter un simple fond coloré en faisant un clic droit sur Toile, sélectionnez l'interface utilisateur, et nous ajouterons un panneau. Le panneau par défaut est basé sur une image de sprite blanc. Nous pouvons changer la couleur et la transparence en cliquant sur le outil de couleur dans l’inspecteur. Utilisez la roue chromatique et le carré pour sélectionner un bleu clair. Par défaut, la couleur du composant du panneau est également transparente. Nous pouvons créer une couleur unie en cliquant sur le curseur alpha désigné par la lettre A et en faisant 100%. Si nous appuyons sur play, nous verrons le panneau en plein écran. Arrêtez de jouer, et définissons notre vue de jeu pour un affichage HD. Cliquez sur l'onglet jeu, et utilisez le menu déroulant pour régler l'affichage sur 16 x 9. aspect. Assurez-vous que le curseur d'échelle est réglé sur 1x, afin que nous puissions voir le jeu entier dans la vue du jeu. Cliquez de nouveau sur l'onglet scène et sélectionnez le panneau dans le hiérarchie. L'élément texte de l'interface utilisateur vous permet d'ajouter, par exemple, des titres à votre toile. Assurez-vous de sélectionner d'abord le panneau, afin que chaque élément soit apparaissent sur la toile. Faites un clic droit, sélectionnez UI, Texte, Text Mesh Pro. Si vous n'avez jamais utilisé Text Mesh Pro auparavant, vous pouvez voir une fenêtre contextuelle fenêtre pour installer les éléments essentiels, tels que les polices, dont nous avons besoin. Cliquez sur importer. Cela installe les polices dont nous avons besoin, mais nous n'avons pas besoin d'exemples, donc nous allons fermer le panneau. Maintenant que nous avons une police à utiliser, dans l'inspecteur, modifiez la saisie de texte dans My Platformer Game. si vous cliquez dessus pendant la lecture. Appuyez sur la touche W pour activer l'outil de déplacement et déplacez le texte vers le haut. près du sommet. Vous pouvez également saisir les poignées latérales, faites-les glisser vers l'un ou l'autre bord, et on peut centrer le titre. Vous pouvez également appuyer sur l'alignement, cliquez sur l'icône pour faire un alignement au centre, et cela devrait être plutôt bon pour notre titre. Une bascule est utile pour les menus de jeu, où vous souhaiterez peut-être que le l'utilisateur pour activer ou désactiver des éléments, tels que des sons. Faites un clic droit sur le panneau, sélectionnez l'interface utilisateur, basculer. Déplaçons cette bascule vers le haut et vers la gauche du panneau. Tournez la bascule ouverte dans la hiérarchie. Sélectionnez le label et nous changerons ce label en musique. Par défaut, l'image utilisée dans un carré bascule est une coche, mais vous pouvez changer cela en n'importe quelle autre image de sprite. Cliquez sur jouer. Nous pouvons maintenant cliquer sur notre bouton musique, cocher et décocher comme si nous activions ou désactivions la musique. Gardez à l'esprit que nous devons encore ajouter du code pour travailler avec le éléments interactifs dans votre jeu. Un élément curseur est utile pour les commandes de l'interface utilisateur du jeu, telles que le son volume. Sélectionnez le panneau, faites un clic droit, interface utilisateur, glissière. On va virevolter dans la hiérarchie, et vous pouvez voir plusieurs composants. Tous ces éléments peuvent être personnalisés en forme et en couleur. Déplaçons le curseur sous la bascule, cliquez sur jouer, et cliquez et faites glisser pour ajuster le curseur. Arrêtez de jouer. Le curseur peut également être réaffecté pour fonctionner comme une barre de santé, en utiliser du code pour ajuster la barre de remplissage du curseur en fonction de la santé d'un joueur diminue ou augmente. Cela permet de gagner du temps sans avoir à créer cela à partir de zéro. Un élément bouton agit comme un bouton poussoir et réagit lorsque cliqué. Faites un clic droit sur le panneau, interface utilisateur, bouton, maillage de texte pro. Déplaçons le bouton sous le curseur. Tournez pour ouvrir le bouton dans la hiérarchie, sélectionnez le texte, et dans l'inspecteur, modifiez la saisie de texte pour cliquer sur moi. Appuyez sur PLAY. Voyons maintenant comment la couleur des boutons change à mesure que vous Cliquez sur. Ce vous indique que le bouton est cliqué. Arrêtez de jouer. Vous pouvez personnaliser les couleurs selon vos besoins, pour chaque élément. Un élément déroulant permet à l'utilisateur de voir les choix lorsque cliqué et sélectionnez ce choix. Panneau de clic droit, interface utilisateur, dérouler, maillage de texte pro. Déplacez-le un peu à droite de notre dernier élément, et dans l'inspecteur, faites défiler vers le bas, et la section options vous permet de supprimer ou d'ajouter des options, ainsi que modifier le nom de l'option et ajouter un image facultative. Ajoutons une option supplémentaire en cliquant sur le plus, et nous allons le renommer en option D. Pour renommer, cliquez sur le petit cercle, surlignez le texte, et renommer. Cliquez sur jouer. Cliquez sur le menu déroulant, et il vous permet de sélectionner une option. Arrêtez de jouer. L'élément de champ de saisie permet à l'utilisateur de saisir des informations pendant le jeu, comme saisir le nom d'un joueur. Panneau de clic droit, interface utilisateur, champ de saisie. Nous allons déplacer cela vers le bas de l’écran. Maintenant, nous allons jouer, et parce que c'est un champ de saisie, cela vous permet de saisir du texte. Arrêtez de jouer. Dans la prochaine leçon, nous allons apprendre à créer des splash écrans dans Unity. Merci d'avoir regardé.

Intermédiaire Fournisseur : Ken Geary 4 leçons · 34m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Dans ces leçons, vous apprendrez à utiliser les composants de l'interface utilisateur, notamment la création d'écrans de démarrage, d'un menu principal et d'une superposition d'intégrité et de ramassages.

Vous utiliserez les composants de l'interface utilisateur (IU) pour améliorer la conception de votre jeu de plateforme en 2D, découvrir les composants qui composent une interface utilisateur, tels qu'un canevas, un panneau, des boutons, des entrées de texte et des curseurs. Vous allez créer une séquence d'écran de démarrage qui peut être utilisée pour présenter le jeu.

Ces leçons expliqueront également le cadre d'un menu principal interactif, y compris la superposition d'éléments de panneau, l'ajout de boutons et l'ajout d'effets tels que des ombres portées.

Une partie importante d'un jeu de plateforme en 2D est d'avoir des informations affichées à l'écran pendant le jeu. Vous allez concevoir un indicateur de niveau d'intégrité à l'aide d'un élément d'interface utilisateur de curseur modifié qui sera ensuite lié au code du lecteur. Vous allez également ajouter un compteur de ramassage à l'écran qui utilise un élément de texte de base, où le texte sera mis à jour par le code du joueur au fur et à mesure que le lecteur récupère les préfabriqués de ramassage.

Ce que vous allez apprendre

Identifier les différents types de composants d'interface utilisateur (UI), y compris la zone de dessin (canvas), les panneaux, les boutons, les champs de texte et les curseurs
Créer une séquence d'écrans de présentation (splash screen) pour introduire le jeu
Construire un menu principal interactif en superposant des éléments de panneau, en ajoutant des boutons et en appliquant des effets tels que des ombres portées
Concevoir un indicateur de niveau de santé à l'aide d'un élément d'interface utilisateur de type curseur (slider) modifié
Ajouter un compteur d'objets ramassés à l'écran à l'aide d'un élément de texte de base mis à jour par le code du joueur

Points clés à retenir

Le cours utilise des composants d'interface utilisateur Unity pour améliorer la conception d'un jeu de plateforme 2D.
Une interface utilisateur est composée d'éléments tels qu'une zone de dessin (canvas), des panneaux, des boutons, des champs de texte et des curseurs.
Un menu principal interactif peut être construit en superposant des éléments de panneau, en ajoutant des boutons et en ajoutant des effets tels que des ombres portées.
L'indicateur de niveau de santé est un élément d'interface utilisateur de type curseur (slider) modifié qui sera par la suite relié au code du joueur.
Le compteur d'objets ramassés utilise un élément de texte de base qui est mis à jour par le code du joueur lorsque celui-ci collecte des prefabs d'objets.

Foire aux questions

Que vais-je apprendre dans ce cours ?

Vous apprendrez à utiliser des composants d'interface utilisateur (UI), y compris la création d'écrans de présentation, d'un menu principal, et d'une surcouche pour la santé et les objets ramassés, ainsi que la manière d'utiliser ces composants pour améliorer la conception de votre jeu de plateforme 2D.

Quels composants d'interface utilisateur (UI) ce cours couvre-t-il ?

Il couvre les composants qui constituent une interface utilisateur, tels qu'une zone de dessin (canvas), un panneau, des boutons, des champs de saisie de texte et des curseurs (sliders).

Quelles leçons sont incluses ?

Les leçons sont Comprendre les composants de l'interface utilisateur (UI), Créer des écrans de présentation (Splash Screens), Créer le menu principal et Créer des éléments d'interface utilisateur du jeu.

Quelles compétences vais-je développer ?

Vous développerez des compétences en interface utilisateur codée (UI), conception d'interfaces, composants d'interface utilisateur (UI Components), rédaction UI/UX, interface utilisateur (UI) et conception d'interface utilisateur (UI Design).

Comment ce cours gère-t-il les informations de jeu à l'écran ?

Vous concevrez un indicateur de niveau de santé à l'aide d'un élément d'interface utilisateur de curseur modifié et ajouterez un compteur de ramassage à l'écran en utilisant un élément de texte de base qui est mis à jour par le code du joueur à mesure que ce dernier collecte des prefabs de ramassage.