Les écrans de sélection de mission apparaissent généralement au début d'un jeu pour offrir aux joueurs un choix de missions. Dans certains cas, un écran de sélection de mission apparaît après un tutoriel de jeu rapide qui permet aux joueurs de se familiariser avec les règles et les mécaniques du jeu.
La sélection d'une mission démarre le jeu et place les joueurs à un point de départ spécifique sur l'île correspondant à cette mission. Ces écrans peuvent inclure des détails sur les statistiques de la mission, fournir des informations sur le type de missions que le joueur peut choisir, ou simplement déposer les joueurs dans la mission sélectionnée.
Consultez le tutoriel suivant pour apprendre à créer un écran de mission qui dépose les joueurs dans la mission qu'ils ont sélectionnée.
Étape 1 : Rechercher des styles de sélection de missions
Il existe plusieurs façons de concevoir un écran de sélection de menus, en fonction de la quantité d'informations que vous souhaitez fournir aux joueurs. Les informations peuvent prendre la forme de descriptions de mission ou d'images de texture du niveau de mission. Dans cet exemple, nous vous fournissons ces deux types d'informations pour que vous constatiez l'impact que vous pouvez créer uniquement avec des matériaux, ou en ajoutant stratégiquement des textures à votre conception.
Les textures utilisent beaucoup de mémoire et peuvent consommer une partie importante de la mémoire totale de votre île.
Il est donc important de déterminer la quantité d'informations à inclure dans l'écran de sélection de mission pour faciliter la phase de conception.
Étape 2 : Concevoir la disposition
Concevez la disposition de l'écran de mission avant d'ouvrir UMG. Tous les choix de conception que vous faites à ce stade sont provisoires et vous pouvez les modifier sans impacter les fonctionnalités de l'interface utilisateur. La disposition de l'écran dépend des éléments inclus dans l'écran de sélection de mission.
À ce stade, vous devez prendre 4 décisions initiales en matière de disposition :
Schéma de couleurs : faites appel à la règle 60/30/10 lorsque vous utilisez la couleur dans votre interface utilisateur.
Choix de la police : deux polices sont actuellement disponibles : Burbank et HeadingNow.
Matériaux : utilisez les matériaux du modèle d'interface utilisateur pour personnaliser l'aspect de votre interface utilisateur.
Images/Textures : les textures doivent être réservées aux conceptions complexes qu'il est difficile de recréer avec des matériaux, notamment des personnages ou des conteneurs artistiques.
La règle 60/30/10 signifie que 60 % de la couleur utilisée dans la conception de votre interface utilisateur doit être la couleur principale, 30 % la couleur secondaire et 10 % la couleur d'accompagnement. Cette règle facilite la compréhension et la navigation dans votre interface utilisateur.
Après avoir choisi un schéma de couleurs, créez des matériaux et des instances de matériau à utiliser dans la conception de votre interface utilisateur.
Dans cet exemple, nous avons choisi une conception simple. Nous avons placé un appel à l'action en haut de l'écran indiquant aux joueurs de « choisir leur mission », suivi de trois images intitulées Mission 1, 2 et 3, chacune dotée d'un bouton DÉMARRER.
Étape 3 : Concevoir la disposition du widget
L'exemple de disposition du widget comporte 4 parties principales :
Conception de l'arrière-plan
Conception de la tuile Mission 1
Conception de la tuile Mission 2
Conception de la tuile Mission 3
Pour créer un widget doté de boutons fonctionnels, vous devez utiliser un widget de variante de fenêtre modale. Faites appel au modèle d'affichage spécial utilisé avec le widget de variante de fenêtre modale pour lier des boutons aux appareils.
Dans ce dossier, créez un widget de variante de fenêtre modale.
Nommez le widget Mission_Select_UI.
Double-cliquez sur le widget Mission_Select_UI pour ouvrir l'éditeur de widgets.
Conception de l'arrière-plan
Dans cet exemple, la conception de l'arrière-plan de l'écran de sélection de mission implique l'utilisation de matériaux pour ajouter des blocs de couleur à l'arrière-plan, l'ajout d'un appel à l'action en haut de l'écran et l'ajout d'une image de texture d'un personnage.
Dans l'éditeur de widget, procédez comme suit :
Dans le panneau Palette, faites glisser un widget Superposition sur le graphique du widget. Ce widget devient le widget racine et fait office d'écran sur lequel l'interface utilisateur apparaît.
Dans le graphique du widget, développez le widget Superposition jusqu'à ce que sa taille soit de 1 920 x 1 080.
Dans le panneau Hiérarchie, faites un clic droit sur le widget Superposition pour ouvrir le menu contextuel. Sélectionnez Renommer dans le menu déroulant et nommez le widget Racine. Ce widget englobe tous les widgets qui composent l'écran de sélection de mission.
Modifiez la disposition du graphique sur Souhaitée. Cela vous permet de définir l'interface utilisateur à la taille exacte à laquelle vous souhaitez qu'elle apparaisse sur n'importe quel écran.
Pour voir la façon dont votre interface utilisateur change en fonction de la plateforme, sélectionnez un écran dans le menu déroulant Taille de l'écran.
Faites glisser un panneau Superposition depuis le panneau Palette sous le widget racine et renommez-le conteneur parent. Ce widget de superposition hébergera toutes les parties de l'écran de sélection de mission.
Ce widget doit être de la même taille que le widget racine.
Modifiez les options d'alignement du widget Conteneur parent sur Remplissage horizontal et Remplissage vertical.
Faites glisser un widget Image du panneau Palette vers le panneau Hiérarchie sous le widget Conteneur parent.
Faites un clic droit sur le widget Image pour ouvrir le menu contextuel. Sélectionnez Renommer dans le menu déroulant et nommez le widget Couleur d'arrière-plan de l'IU.
Sélectionnez le widget Couleur d'arrière-plan de l'IU dans le panneau Hiérarchie pour ouvrir les options correspondantes dans le panneau Détails.
Sous les options Emplacement (emplacement de superposition), utilisez les paramètres d'alignement suivants :
Alignement horizontal = Remplissage horizontal
Alignement vertical = Remplissage vertical
Sous les options Apparence, utilisez le menu déroulant Pinceau > Image pour sélectionner votre matériau principal. Le widget image devient la couleur du matériau.
Faites glisser un widget Panneau de grille du panneau Palette vers le widget Conteneur parent et renommez-le Corps. Le panneau de grille sert de conteneur pour englober tout le contenu de l'interface utilisateur. Il ajoute également une grille flexible à la disposition, qui permet d'organiser ses widgets enfants en lignes et en colonnes. Dans cet exemple, le contenu de l'écran de mission et l'image du personnage.
Sous les options Emplacement (emplacement de superposition), utilisez les paramètres suivants :
Alignement horizontal = Alignement central
Alignement vertical = Alignement central
Marge intérieure = 64,0
Faites glisser une zone empilable dans le widget Corps et renommez-la Contenu. Une zone empilable utilise un alignement horizontal ou vertical pour disposer ses widgets enfants.
Modifiez les paramètres d'alignement du widget Contenu sur Remplissage horizontal et Remplissage vertical.
Sous l'option Comportement, modifiez le paramètre Orientation sur Verticale.
Ajouter un texte de légende
Faites glisser un widget Zone de texte depuis le panneau Palette et imbriquez-le sous Contenu. Ce widget devient le texte de légende invitant les joueurs à choisir une mission.
Renommez la zone de texte Choisissez votre mission.
Sélectionnez le widget Choisissez votre mission dans le panneau Hiérarchie pour ouvrir les options correspondantes dans le panneau Détails.
Sous les options Emplacement (emplacement de superposition), utilisez les paramètres suivants :
Taille = Auto
Alignement horizontal = Alignement à gauche
Alignement vertical = Remplissage vertical
Cliquez sur le champ Texte, supprimez le texte par défaut et saisissez Choisissez votre mission.
Sous les options Apparence, utilisez les paramètres suivants :
Couleur et opacité = Linéaire hexadécimal E0137CFF
Famille de polices = HeadingNow
Police de caractères = 86Bold
Taille = 85
Taille du contour = 2
Coins à onglets = Option activée
Couleur du contour = Linéaire hexadécimal FFFFFFFF
Faites glisser un widget Image dans le widget Contenu et renommez-le Espaceur. Ce widget est utilisé comme espaceur pour insérer un espace entre la légende et les tuiles de mission.
Ajouter un espace à la tuile de mission
Faites glisser un widget Superposition dans le widget Contenu et renommez-le Tuiles.
Faites glisser un widget Image dans le widget Tuiles et renommez-le TileBG.
Sélectionnez le widget TileBG dans le panneau Hiérarchie pour ouvrir les options correspondantes dans le panneau Détails.
Sous les options Emplacement (emplacement de superposition, utilisez les paramètres suivants :
Alignement horizontal = Remplissage horizontal
Alignement vertical = Remplissage vertical
Sous les options Apparence, utilisez les paramètres suivants.
Pinceau > Image = Matériau d'arrière-plan secondaire
Taille de l'image :
X = 1 200
Y = 32,0
Faites glisser un widget Zone empilable dans le widget Tuiles et renommez-le Tuiles de mission. Cette zone empilable ordonne les tuiles de mission de gauche à droite.
La disposition de l'arrière-plan est terminée. À ce stade, l'écran de sélection des missions devrait être pratiquement vide.
Dans la prochaine étape, vous allez disposer les trois tuiles de sélection de mission et les insérer à l'intérieur du widget Zone empilable. Vous ajouterez également une texture Personnage à la conception pour ajouter un intérêt visuel. Conception de la tuile Mission 1
La conception de tuiles de mission peut fournir des informations sur le niveau et les objectifs, et présenter des statistiques sur les objectifs du joueur, voire suivre la progression du joueur dans ces objectifs. Cet exemple de tuile offre une conception plus simple. L'une des textures d'arrière-plan indique une représentation du niveau, un numéro de mission et un bouton de démarrage. L'utilisation d'une série de zones empilables permet de disposer les widgets de gauche à droite ou de haut en bas. Si votre disposition est verticale ou horizontale, une zone empilable permet de maintenir la cohérence de la disposition. Les trois tuiles de mission suivent le même modèle de conception. Procédez comme suit pour créer les trois tuiles de sélection.
Faites glisser un widget Superposition dans le panneau de grille du panneau Hiérarchie et renommez-le Mission 1. Il est converti en compartiment qui contient tous les éléments de conception de la tuile Mission 1.
Sélectionnez le widget Mission 1 dans le panneau Hiérarchie pour ouvrir les options correspondantes dans le panneau Détails.
Sous l'option Emplacement (emplacement de zone empilable), utilisez les paramètres de marge intérieure suivants :
Gauche = 0,0
Haut = 0,0
Droite = 24,0
Bas = 0,0
Faites glisser un widget Image dans le widget Mission 1 dans le panneau Hiérarchie et renommez-le Mission1Image. Ce widget est la représentation visuelle de Mission 1.
Sélectionnez Mission1Image dans le panneau Hiérarchie pour ouvrir les options correspondantes dans le panneau Détails.
Sous les options Emplacement (emplacement de zone empilable, utilisez les paramètres suivants :
Alignement horizontal = Horizontal complet
Alignement vertical = Vertical complet
Sous les options Apparence, modifiez les paramètres suivants :
Image = texture de la Mission 1
Taille de l'image :
X = 256,0
Y = 256,0
Le réglage de la taille de l'image assure un niveau de contrôle supplémentaire sur la conception des tuiles.
Ordonner le contenu des tuiles
Faites glisser un widget Zone empilable dans le widget Mission 1 et renommez-le M1Content.
Sélectionnez M1Content dans le panneau Hiérarchie pour ouvrir les options correspondantes dans le panneau Détails.
Sous les options Emplacement (emplacement de superposition, modifiez les paramètres suivants :
Alignement horizontal = Alignement central
Alignement vertical = Alignement central
Tous les widgets enfants de la zone empilable sont alignés au centre.
Sous l'option Comportement , définissez Orientation sur Verticale. Cela provoque l'empilement vertical de tous les widgets enfants.
Faites glisser un widget Superposition dans M1Content et renommez-le M1Header. Cette superposition fait office de compartiment pour tous les éléments d'en-tête et les formate en fonction des paramètres de la superposition.
Sélectionnez M1Header dans le panneau Hiérarchie pour ouvrir les options correspondantes dans le panneau Détails.
Sous Emplacement (emplacement de zone empilable), modifiez les options suivantes :
Marge intérieure :
Gauche = 0,0
Haut = 0,0
Droite = 0,0
Bas = 128,0
Taille = Auto
Alignement horizontal = Alignement central
Alignement vertical = Vertical complet
Les paramètres de marge intérieure uniques créent une marge intérieure sur le côté droit de la tuile Mission 1.
Styliser le texte de la tuile de mission
Faites glisser un widget Image dans M1Header et renommez-le M1Stroke.
Sélectionnez M1Stroke dans le panneau Hiérarchie pour ouvrir les options correspondantes dans le panneau Détails.
Sous Emplacement (emplacement de superposition), définissez l'alignement sur Horizontal complet et Vertical complet.
Sous les options Apparence, utilisez les paramètres suivants :
Image = Matériau de découpe
Taille de l'image :
X = 200,0
Y = 32,0
Faites glisser une zone de texte dans le widget M1Header et renommez le widget Mission_1.
Sélectionnez le widget de texte Mission_1 dans le panneau Hiérarchie pour ouvrir les options correspondantes dans le panneau Détails.
Sous les options Emplacement (emplacement de superposition), utilisez les paramètres d'alignement suivants :
Alignement horizontal = Alignement central
Alignement vertical = Alignement supérieur
Changez le texte en Mission 1.
À partir de l'outil Pinceau > Image, ouvrez le sélecteur de couleurs et choisissez votre couleur d'accompagnement pour le texte.
Sous Police, définissez les options suivantes :
Police de caractères = Gras
Taille = 25,0
Espacement des lettres = 65
Degré d'inclinaison = 0,28
Sous Paramètres de contour, définissez les options suivantes :
Taille du contour = 1
Alpha de remplissage séparé = Option activée
Appliquer un contour à l'ombre portée = Option activée
Couleur du contour = Sélectionnez votre couleur principale à partir du sélecteur de couleurs
Remplacez la couleur de l'ombre par votre couleur principale à partir du sélecteur de couleurs. La police doit avoir un aspect 3D et présenter un style distinct du texte de légende.
Ajouter un bouton Démarrer
Faites glisser un widget Bouton discret dans le widget M1Content et renommez-le START_M1_Button.
Sélectionnez le bouton START_M1_Button dans le panneau Hiérarchie pour ouvrir les options correspondantes dans le panneau Détails.
Remplacez le texte du bouton par DÉMARRER.
Sous les options Emplacement (emplacement de zone empilable), définissez Hauteur minimale sur 56. Ce paramètre permet de réduire la hauteur du bouton.
Cochez Sélection > Sélectionnable. Le joueur est ainsi en mesure de sélectionner le bouton.
Sous Entrée, définissez les options suivantes :
Méthode tactile = Bas
Méthode d'appui = Appui sur le bouton
Suivez les étapes pour créer la disposition des tuiles Mission 2 et Mission 3.
Avant d'ajouter les tuiles Mission 2 et Mission 3, la conception doit ressembler à l'image ci-dessous.
Une fois toutes les tuiles de mission terminées, ajoutez un personnage à la conception pour donner à l'interface utilisateur un certain intérêt visuel.
Ajouter une texture de personnage
L'ajout d'une texture de personnage à l'interface utilisateur reprend toutes les couleurs choisies pour la conception et les ajoute au style visuel de l'interface utilisateur. N'oubliez pas d'utiliser la puissance de deux et de vous assurer que la texture que vous avez choisie est de haute qualité et peut s'adapter à n'importe quelle taille.
Faites glisser un widget Image dans le widget Corps et renommez-le Personnage.
Sélectionnez le widget Personnage dans le panneau Hiérarchie pour ouvrir les options correspondantes dans le panneau Détails.
Sous Apparence, utilisez les paramètres suivants :
Pinceau > Image = Texture du personnage
Taille de l'image :
X = 700
Y = 700
Sous les options Emplacement (emplacement de grille), utilisez les paramètres suivants :
Alignement horizontal = Alignement à droite
Alignement vertical = Vertical complet
Déplacement = Utilisez les outils des axes X et Y pour placer précisément la texture de personnage.
Une fois la section de missions terminée, vous êtes prêt à connecter la fonctionnalité des boutons dans votre interface utilisateur.
Étape 4 : Ajouter un modèle d'affichage
Un modèle d'affichage contrôle les informations de joueur via une liste de fonctions et fournit un moyen spécifique de lier les widgets UMG aux appareils du mode Créatif. Il existe un modèle d'affichage spécifique qui fonctionne avec des boutons : le modèle CreativeModalDialogViewmodel. Ce modèle d'affichage fonctionne uniquement avec le widget de variante de fenêtre modale et fournit de nombreuses fonctions de bouton.
Pour utiliser le modèle d'affichage, procédez comme suit :
Ouvrez le menu Fenêtres dans la barre de menus principale.
Sélectionnez Modèles d'affichage dans le menu déroulant. Le panneau CreativeModalDialogView s'affiche automatiquement dans la fenêtre de l'éditeur de widgets.
Toutes les fonctions de bouton sont ajoutées au widget. Vous devez maintenant ajouter les liaisons pour faire fonctionner les boutons.
Étape 5 : Ajouter des appareils
Une fois les zones de mission configurées, chaque zone doit disposer de son propre téléporteur configuré pour recevoir le joueur. Un appareil de fenêtre pop-up sélectionne le widget de fenêtre modale et affiche l'interface utilisateur des widgets lorsqu'il est déclenché.
Appareil de fenêtre pop-up
Commencez par ajouter un appareil de fenêtre pop-up au projet. Modifiez ses options, puis ajoutez le widget Variante de fenêtre modale à l'appareil.
Faites glisser un appareil de fenêtre pop-up dans le hublot.
Dans le panneau Détails, définissez les options utilisateur suivantes :
Description = Écran de sélection de mission
Affichage automatique = Démarrage du jeu
Type de réponse = 3 boutons
Ces options identifient le widget, et déterminent le moment où l'interface utilisateur s'affiche dans l'ATH et le nombre de boutons liés au widget.
Sous Options avancées, définissez les options suivantes :
Bouton de retour par défaut = Aucun
Texte du bouton 1 = DÉMARRER
Texte du bouton 2 = DÉMARRER
Texte du bouton 3 = DÉMARRER
Masquer le fond = Option activée
Activé pendant la phase = Partie
Faites défiler l'écran jusqu'à la section Widget modal > Classe de remplacement de modèle et sélectionnez votre widget Mission_Select_UI dans le menu déroulant.
Faites défiler l'écran jusqu'à la section Options utilisateur - Fonctions puis sous Afficher, ouvrez un élément de matrice.
Ajoutez le point d'apparition de joueur 1 au champ supérieur.
Sélectionnez À l'apparition du joueur pour la fonction Point d'apparition de joueur.
Téléporteurs
Pour réduire le temps de développement, créez le premier téléporteur et modifiez ses options, puis copiez l'appareil et placez les appareils supplémentaires dans leurs zones de mission respectives.
Faites glisser un téléporteur dans le hublot.
Dans le panneau Détails sous Options utilisateur, décochez les options Faille de téléportation visible et Jouer les effets visuels.
Faites défiler l'écran jusqu'à la section Options utilisateur - Fonctions puis sous Téléporter, ouvrez un élément de matrice.
Ajoutez l'appareil de fenêtre pop-up au champ supérieur.
Sélectionnez En choisissant le bouton 1.
Dupliquez le téléporteur à 2 reprises.
Dans chacune des fonctions supplémentaires Options utilisateur - Fonctions > Téléporter > Appareil de fenêtre pop-up du téléporteur, remplacez la fonction par le bouton correspondant (En choisissant le bouton 2, En choisissant le bouton 3).
Pour démarrer une mission, le joueur clique sur le bouton associé à une zone de mission, puis est téléporté vers la zone de mission sélectionnée. Pour créer cette fonctionnalité, vous allez lier la fonctionnalité du bouton aux boutons de l'écran de sélection.
Étape 6 : Liaisons d'affichage
Les liaisons d'affichage ajoutent la logique qui lie l'appareil et la fonction du widget ensemble.
Dans cet exemple, les boutons sont liés aux appareils Téléporteur via la fonction Téléporter. Lorsque le joueur sélectionne une mission, un clic sur le bouton DÉMARRER active le téléporteur connecté et téléporte le joueur vers cette zone de mission.
Tous les boutons ajoutés à la hiérarchie sont numérotés. Cela facilite la liaison de la fonction du bouton à l'appareil.
Pour ajouter les liaisons, procédez comme suit :
Sélectionnez le bouton Start_Mission_1_Button dans le panneau Hiérarchie pour le mettre en surbrillance, puis sélectionnez Afficher les liaisons dans la barre d'outils inférieure. La fenêtre Afficher les liaisons s'ouvre avec le bouton discret déjà sélectionné.
Sélectionnez +Ajouter le widget Start_Mission_1_Button. Une liaison d'affichage est créée en dessous.
Sélectionnez le champ de gauche qui contient le bouton Start_Mission_1_Button et sélectionnez Au clic > Événement dans le menu déroulant. L'événement Au clic est ajouté au bouton discret.
Sélectionnez ensuite le champ de droite et choisissez CreativeModalDialogViewmodel > Réponse > Sélectionner dans le menu déroulant. Une fonction de réponse est ajoutée à l'événement Au clic du bouton.
Dans le menu déroulant Réponse, sélectionnez Bouton 1. La fonction est liée au premier bouton discret.
Répétez ces étapes pour lier les deux boutons suivants.
À ce stade, tous les boutons doivent être liés aux téléporteurs et l'écran de sélection de mission doit s'afficher lorsque le joueur apparaît au début du jeu.
Résultat
La dernière étape consiste à tester le projet pour s'assurer que l'interface utilisateur fonctionne comme prévu. Lancez une session ; l'écran de sélection de mission doit s'afficher après que le joueur est apparu sur l'île, et le joueur doit être téléporté vers la mission sélectionnée dans l'interface utilisateur.
À vous de jouer
Il existe plusieurs façons de modifier la conception de l'écran de sélection de mission pour le rendre unique à votre propre projet.
Vous pouvez convertir la tuile de mission d'arrière-plan en un matériau plutôt qu'en une texture. Cela peut donner à l'écran de mission un aspect différent.
Vous pouvez ajouter un traqueur à chaque mission pour suivre les statistiques des joueurs ou les objets collectés.
Vous pouvez ajouter un appareil Paramètres de manches pour faire réapparaître les joueurs et afficher à nouveau l'écran de sélection de mission afin que les joueurs puissent sélectionner les autres missions auxquelles ils n'ont pas encore joué, et rendre les missions sélectionnées indisponibles une fois celles-ci terminées.
