Un élément de barre de score est un élément d'interface utilisateur qui affiche les informations du joueur qui sont importantes pour le partiede votre expérience, telles que leur statistiquesde niveau, leur nombre de devises ou leurs articles de puissance dans leur inventaire. En affichant directement les barres de score sur le écran du joueur, vous pouvez garder leur attention sur ce qu'ils ont besoin pour accomplir divers objectifs dans votre expérience.
En utilisant le Gold Rush.rbxl fichier comme référence, ce tutoriel vous montre comment créer un barre de score qui suit le montant de joueurs d'or collectant, y compris les conseils sur :
- Créer un cadre dans le coin supérieur droit de l'écran.
- Ajout d'une icône de couronne qui communique ce que la barre de score suit sans aucun conseil textuel.
- Insérer du texte de score qui enregistre le montant d'or que le joueur collecte.
- Tester votre design d'interface utilisateur sur plusieurs appareils émulés pour vérifier son apparence sur différents écrans et ratios d'aspect.
Comme avec toutes les créations 2D, il existe de nombreuses façons d'atteindre n'importe quelle cible spécifique. Vous pouvez créer vos propres ressources 2D dans des outils d'interface tiers et suivre avec votre propre conception.
Créer le cadre
Pour afficher les éléments de l'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'interface utilisateur sur l'écran, et le service 1> Class
Après avoir créé un objet ScreenGui, vous pouvez créer et personnaliser son enfant GuiObjects en fonction du but de chaque conteneur. Pour démontrer ce concept, cette section vous apprend à créer un objet ScreenGui avec un enfant 1> Class.Frame1> qui contiendra à la fois l'ic
En plus de personnaliser les propriétés de la fenêtre, cette section fournit également des instructions sur la façon d'ajouter un enfant UISizeConstraint et UIListLayout objet à la fenêtre. Cette technique garantit que Class.GuiObject|GuiObjects</
Pour recréer le conteneur de cadre dans l'échantillon Gold Rush placez le fichier :
Créez un objet ScreenGui pour contenir votre interface utilisateur sur l'écran.
- Dans la fenêtre Explorateur , 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 de l'interface de score.
Insérez un cadre dans l'objet ScreenGUI.
Sélectionnez le nouveau cadre, puis dans la fenêtre propriétés,
- Définir AnchorPoint à 0.5, 0 pour définir le point d'origine du cadre dans le coin supérieur droit de lui (50% de la gauche à la droite du cadre et 0% de la droite à la gauche du cadre).
- Définir la couleur de l'arrière-plan à 0.6 pour rendre l'arrière-plan de la fenêtre noir.
- Définir la transparence de l'arrière-plan à 0.6 pour rendre le fond du cadre semi-透明.
- Définir la position Position à {0.5, 0},{0.01, 0} pour définir le cadre près du haut du milieu de l'écran (50% de la gauche à la droite de l'écran et 1% du haut au bas de l'écran).
- Définir la taille taille à {0.25, 0},{0.08, 0} afin que le cadre occupe une grande partie du milieu de l'écran pour attirer l'attention du joueur (25% horizontalement et 8% verticalement).
- Définir nom à ScoreBarFrame .
Ajoutez une contrainte à la fenêtre pour qu'elle 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 propriétés , définissez MinSize sur 0, 40 pour vous assurer que le cadre ne se rapetisse jamais en dessous de 40 pixels verticalement.
Ajoutez un objet de mise en page à la fenêtre afin qu'elle se compose de contenu de gauche à droite et soit centrée verticalement dans le périmètre de la fenêtre.
- Insérez un objet UIListLayout dans ScoreBarFrame .
- Sélectionnez l'objet de nouvelle conception, puis dans la Fenêtre propriétés ,
- Set Remplir la direction à horizontale .
- Définir <a href="/reference/engine/vertically-align">VerticalAlign</a> à <a href="/reference/engine/centre">Centre</a>.
Ajouter une icône
L'icône est un symbole qui représente une action, un objet ou un concept dans une expérience. En utilisant des icônes simples et intuitives, les joueurs peuvent facilement reconnaître ce que vous communiquez avec votre interface utilisateur sans utiliser du texte, ce qui peut encombrer l'écran et attirer l'attention sur le contenu qui importe.
Par exemple, l'échantillon utilise une simple icône de couronne d'or pour indiquer combien d'or un joueur a collecté. Cette icône est facilement reconnaissable en tant que but le plus important dans l'expérience, et il inclut des détails minimums afin qu'il reste lisible sur les écrans des appareils mobiles.
Pour recréer l'icône de la couronne d'or dans l'échantillon Gold Rush place de fichier:
Insérez un ImageLabel objet dans ScoreBarFrame.
Dans la fenêtre Explorateur , 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 propriétés ,
Définir Image à rbxassetid://5673786644 pour faire de l'icône une couronne.
Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
Définir LayoutOrder à 1 . Ceci garantit que l'icône reste le premier GuiObject dans le cadre de gauche à droite lorsque vous insérez du texte dans la prochaine section du tutoriel.
Définir la taille taille à {1.25,0},{1,0} pour élargir la zone d'étiquette au-delà de la largeur complète du cadre.
Définir Contrôle de taille à RelativeYY pour conserver le ratio de l'icône en adaptant la taille de l'étiquette avec la hauteur du cadre parent.
Insérer texte de score
Score text enregistre le score du joueur dans une expérience, comme le nombre de points qu'il gagne dans un correspondre. Il est important que tout le texte de l'interface soit clair et facile à lire afin que les joueurs puissent comprendre rapidement les informations dont ils ont besoin pour réussir dans votre expérience.
Par exemple, l'échantillon utilise un grand texte au-dessus d'une couleur contrastée afin qu'il ne se mélange pas avec le bruit de l'arrière-plan. Ceci est particulièrement important pour l'accessibilité car il garantit que le texte reste lisible lorsque le joueur se déplace dans l'espace 3D, ce qui peut inclure des objets de la même couleur que le texte.
Pour recréer le score textuel dans l'échantillon Gold Rush placez le fichier :
Insérez un TextLabel objet dans ScoreBarFrame.
Dans la fenêtre Explorateur , 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 propriétés ,
Définir la transparence de l'arrière-plan à 1 pour rendre le fond de l'étiquette complètement transparent.
Définir la taille Size à {1,0},{1,0} pour élargir l'étiquette à tout le cadre (100% horizontalement et 100% verticalement de la feuille parent). La balise s'étend au-delà des limites du cadre car elle est décalée par l'icône.
Définir Contrôle de taille à RelativeYY pour assurer que la taille de l'étiquette s'adapte à la hauteur du cadre parent, et conserve le ratio de la hauteur de l'icône. Cette étape fait également de l'étiquette un carré et le maintient dans les limites du cadre.
Définir police de caractère à GothamSSm pour correspondre à l'esthétique de l'environnement.
Définir texte à 0 pour commencer le score à partir de zéro.
Définir couleur de texte3 à 255, 200, 100 pour teindre le texte en or.
Définir la taille du texte à 30 pour rendre le texte plus grand sur l'écran.
Définir TextXAlignment à gauche pour assurer que le texte de score reste à gauche de l'icône de couronne, peu importe si le score du joueur est 0, 1,000, ou 1,000,000.
Tester le design
L'émulateur de dispositifs Studio vous permet de tester comment les joueurs verront et interagiront avec votre interface utilisateur sur différents appareils. Cet outil est une partie vitale du design de l'interface car la proportionnalité de votre fenêtre dans Studio n'est pas nécessairement réfléchée par la proportionnalité des écrans que les joueurs utilisent pour accéder à votre expérience, et il est important que votre interface soit à la fois lisible et accessible sur chaque appareil.
Par exemple, si vous n'avez pas testé votre interface utilisateur sur une gamme de tailles d'écran, les joueurs avec de grands écrans peuvent ne pas pouvoir lire votre texte ou déchiffrer vos icônes, et les joueurs avec de petits écrans peuvent ne pas pouvoir voir l'espace 3D car vos éléments d'interface prennent trop de place sur l'affiche.
Pour éмуuler votre interface utilisateur sur différentes tailles d'écran :
Dans la barre de menu, sélectionnez l' Test onglet.
Dans la section Émulation , cliquez sur Dispositif . La fenêtre change pour refléter le ratio d'aspect d'un ordinateur portable moyen.
Dans le menu déroulant de la résolution, sélectionnez Résolution actuelle . Cela vous permet de voir la résolution réelle de vos éléments d'interface utilisateur sur le dispositif sur lequel vous éмуlez.
Dans le menu déroulant des appareils, sélectionnez au moins un appareil dans les Phone , Tablet , Desktop et 1> Console1> sections.
