Une barre de score est un élément d'interface utilisateur qui affiche des informations sur le joueur qui sont importantes pour le gameplay de votre expérience, telles que leurs statistiques de montée en niveau, le nombre de devises ou les objets de puissance dans leur inventaire. En affichant des barres de score directement sur l'écran du joueur, vous pouvez garder son attention sur ce dont il a besoin pour accomplir divers objectifs au sein de votre expérience.
En utilisant le fichier Gold Rush .rbxl comme référence, ce tutoriel vous montre comment créer une barre de score qui suit la quantité d'or que les joueurs collectent, y compris des conseils sur :
- Création d'un cadre en haut au centre de l'écran.
- Ajout d'une icône de couronne qui communique ce que la barre de score suit sans guide textuel.
- Insertion de texte de score enregistrant la quantité d'or que le joueur collecte.
- Test de votre conception d'UI sur plusieurs appareils émulés pour revoir son apparence sur différents écrans et rapports d'aspect.
Comme pour toute création 2D, il existe de nombreuses façons d'atteindre un but particulier. Vous pouvez créer vos propres actifs 2D dans des outils UI tiers et suivre votre propre conception.
Créer le cadre
Pour afficher des éléments d'interface utilisateur sur l'écran de chaque joueur, vous pouvez créer un objet ScreenGui dans le service StarterGui. Les objets ScreenGui sont les conteneurs principaux pour l'UI à l'écran, et le service StarterGui copie son contenu dans chaque conteneur PlayerGui des joueurs lorsqu'ils entrent dans une expérience.
Après avoir créé un objet ScreenGui, vous pouvez créer et personnaliser ses enfants GuiObjects en fonction de l'objectif de chaque conteneur. Pour démontrer ce concept, cette section vous enseigne comment créer un objet ScreenGui avec un objet enfant Frame qui contiendra à la fois l'icône et le texte de la barre de score.
En plus de personnaliser les propriétés du cadre, cette section fournit également des instructions sur l'ajout d'un objet enfant UISizeConstraint et UIListLayout au cadre. Cette technique garantit que les GuiObjects s'organisent automatiquement horizontalement à mesure que vous les insérez dans le cadre, et qu'ils sont toujours lisibles sur des tailles d'écran plus petites. Si vous ne suivez pas ces conseils, chaque GuiObject que vous ajoutez au cadre s'organisera en dehors du périmètre du cadre.
Pour recréer le conteneur du cadre dans le fichier d'exemple Gold Rush :
Créez un objet ScreenGui pour contenir votre UI à l'écran.
- Dans la fenêtre Explorer, passez la souris sur StarterGui et cliquez sur l'icône ⊕. Un menu contextuel s'affiche.
- Insérez un ScreenGui.
Créez un conteneur pour l'ensemble du composant UI de la barre de score.
Insérez un Frame dans l'objet ScreenGui.
Sélectionnez le nouveau Frame, puis dans la fenêtre Properties,
- Réglez AnchorPoint sur 0.5, 0 pour définir le point d'origine du cadre au centre supérieur de lui-même (50 % de la gauche à la droite du cadre, et 0 % du haut vers le bas du cadre).
- Réglez BackgroundColor sur 0.6 pour que l'arrière-plan du cadre soit noir.
- Réglez BackgroundTransparency sur 0.6 pour rendre l'arrière-plan du cadre semi-transparent.
- Réglez Position sur {0.5, 0},{0.01, 0} pour placer le cadre près du centre supérieur de l'écran (50 % de la gauche à la droite de l'écran, et 1 % du haut vers le bas de l'écran).
- Réglez Size sur {0.25, 0},{0.08, 0} pour que le cadre occupe une grande partie du milieu de l'écran et attire l'attention du joueur (25 % horizontalement, et 8 % verticalement).
- Réglez Name sur ScoreBarFrame.
Ajoutez une contrainte au cadre afin que son contenu soit toujours lisible sur les petites tailles d'écran.
- Insérez un objet UISizeConstraint dans ScoreBarFrame.
- Sélectionnez la nouvelle contrainte, puis dans la fenêtre Properties, réglez MinSize sur 0, 40 pour garantir que le cadre ne se rétrécit jamais à moins de 40 pixels verticalement.
Ajoutez un objet de disposition au cadre afin que son contenu s'organise horizontalement et soit centré verticalement dans le périmètre du cadre.
- Insérez un objet UIListLayout dans ScoreBarFrame.
- Sélectionnez le nouvel objet de disposition, puis dans la fenêtre Properties,
- Réglez FillDirection sur Horizontal.
- Réglez VerticalAlignment sur Center.
Ajouter une icône
Une icône est un symbole qui représente une action, un objet ou un concept dans une expérience. L'utilisation d'icônes simples et intuitives permet aux joueurs de reconnaître facilement ce que vous communiquez avec votre interface utilisateur sans utiliser de texte, ce qui peut encombrer l'écran et détourner l'attention du contenu important.
Par exemple, l'exemple utilise une icône de couronne en or simple pour indiquer combien d'or un joueur a collecté. Cette icône est facilement reconnaissable comme étant le but le plus important de l'expérience, et elle comprend peu de détails afin de rester lisible sur les écrans des appareils mobiles.
Pour recréer l'icône de couronne en or dans le fichier d'exemple Gold Rush :
Insérez un objet ImageLabel dans ScoreBarFrame.
Dans la fenêtre Explorer, passez la souris sur ScoreBarFrame et cliquez sur l'icône ⊕. Un menu contextuel s'affiche.
Insérez un ImageLabel.
Sélectionnez la nouvelle étiquette, puis dans la fenêtre Properties,
Réglez Image sur rbxassetid://5673786644 pour faire de l'icône une couronne.
Réglez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'étiquette complètement transparent.
Réglez LayoutOrder sur 1. Cela garantit que l'icône reste le premier GuiObject dans le cadre de gauche à droite lorsque vous insérez le texte dans la section suivante du tutoriel.
Réglez Size sur {1.25,0},{1,0} pour élargir la zone de l'étiquette au-delà de la largeur totale du cadre.
Réglez SizeConstraint sur RelativeYY pour préserver le rapport d'aspect de l'icône en mettant à l'échelle la taille de l'étiquette avec la hauteur du cadre parent.
Insérer du texte de score
Le texte de score enregistre le score du joueur dans une expérience, par exemple, combien de points il gagne dans un match. Il est important que tout le texte de l'interface utilisateur soit à la fois clair et facile à lire afin que les joueurs puissent rapidement comprendre les informations dont ils ont besoin pour réussir dans votre expérience.
Par exemple, l'échantillon utilise un texte grand sur un fond contrastant afin qu'il ne se fonde pas dans le bruit de l'arrière-plan. Cela est particulièrement significatif pour l'accessibilité car cela garantit que le texte reste lisible lorsque le joueur évolue dans l'espace 3D, qui peut inclure des objets de la même couleur que le texte.
Pour recréer le texte de score dans le fichier d'exemple Gold Rush :
Insérez un objet TextLabel dans ScoreBarFrame.
Dans la fenêtre Explorer, passez la souris sur ScoreBarFrame et cliquez sur l'icône ⊕. Un menu contextuel s'affiche.
Insérez un TextLabel.
Sélectionnez la nouvelle étiquette, puis dans la fenêtre Properties,
Réglez BackgroundTransparency sur 1 pour rendre l'arrière-plan de l'étiquette complètement transparent.
Réglez Size sur {1,0},{1,0} pour élargir l'étiquette à la totalité du cadre (100 % horizontalement et 100 % verticalement par rapport au cadre parent). L'étiquette s'étend au-delà des limites du cadre en raison de son décalage par rapport à l'icône.
Réglez SizeConstraint sur RelativeYY pour s'assurer que la taille de l'étiquette s'adapte à la hauteur du cadre parent, préservant le rapport d'aspect de l'icône. Cette étape rend également l'étiquette carrée et la garde à l'intérieur des limites du cadre.
Réglez Font sur GothamSSm pour correspondre à l'esthétique de l'environnement.
Réglez Text sur 0 pour commencer le score à zéro.
Réglez TextColor3 sur 255, 200, 100 pour teinter le texte en or.
Réglez TextSize sur 30 pour rendre le texte plus grand à l'écran.
Réglez TextXAlignment sur Left pour garantir que le texte du score reste aligné à gauche près de l'icône de couronne, que le score du joueur soit 0, 1 000 ou 1 000 000.
Tester la conception
L'Émulateur d'Appareil de Studio vous permet de tester comment les joueurs verront et interagiront avec votre interface utilisateur sur divers appareils. Cet outil fait partie intégrante de la conception de l'interface utilisateur car le rapport d'aspect de votre fenêtre d'affichage dans Studio ne reflète pas nécessairement le rapport d'aspect des écrans que les joueurs utilisent pour accéder à votre expérience, et il est important que votre interface utilisateur soit à la fois lisible et accessible sur chaque appareil.
Par exemple, si vous ne testez pas votre interface utilisateur sur une gamme de tailles d'écran, les joueurs avec de grands écrans peuvent ne pas être en mesure de lire votre texte ou de déchiffrer vos icônes, et les joueurs avec de petits écrans peuvent ne pas être en mesure de voir l'espace 3D car vos éléments d'interface occupent trop de place sur l'affichage.
Pour émuler votre interface utilisateur sur diverses tailles d'écran :
À partir du menu Test de Studio, activez Device Emulator.
Dans le menu déroulant de la résolution, sélectionnez Actual Resolution. Cela vous permet de voir la vraie résolution de vos éléments d'interface utilisateur sur l'appareil que vous émulez.
Dans le menu déroulant des appareils, sélectionnez au moins un appareil dans les sections Phone, Tablet, Desktop, et Console.
