Ajouter une interface utilisateur à la carte des statistiques des joueurs

  • 10 minutes

Une carte de statistiques contient le nom et le PER d’un joueur de la Tune Squad. Vous aurez besoin d’un objet texte pour chaque étiquette, et d’un objet texte pour les valeurs respectives. La configuration de chaque objet texte est la même, sauf en ce qui concerne leur position. Par conséquent, vous pouvez créer un objet texte, le configurer, puis dupliquer les autres objets texte. Une fois que tous les objets texte nécessaires ont été créés, vous pouvez les repositionner.

  1. Dans la fenêtre Hierarchy, cliquez avec le bouton droit sur l’objet Background, puis sélectionnez 3D Object>Text - TextMeshPro. Vérifiez que l’objet Text (TMP) est bien créé comme un enfant de l’objet Background.

  2. Sélectionnez l’objet Text (TMP) dans la fenêtre Hierarchy. Dans la fenêtre Inspector, renommez l’objet LabelPlayerName.

  3. Vous allez maintenant modifier les paramètres des propriétés TextMeshPro-Text. Dans les propriétés TextMeshPro - Text, entrez Name.

  4. Dans les propriétés Main Settings, modifiez les éléments suivants pour ajuster la taille et la position du texte :

    • Font Size : 1.3
    • Alignement : Centre
    • Alignment : Middle

  5. Dans les propriétés Rect Transform, modifiez les éléments suivants pour ajuster la taille de la zone de texte et la position du texte :

    • Pos Z : 0
    • Width : 1
    • Height : 0.2

  6. À l’aide de l’outil de déplacement, sélectionnez les flèches haut et bas pour faire glisser le texte dans le quad, en haut de celui-ci et au centre.

  7. Maintenant qu’un objet texte est configuré, dupliquez (Ctrl+D) l’objet trois fois et renommez chaque objet comme indiqué ci-dessous :

    • PlayerName
    • LabelPER
    • PER

    Screenshot of the hierarchy window. The background text child objects are highlighted.

  8. Pour chacun des objets de texte nouvellement créés, remplacez la valeur de la propriété Text Input par ce qui suit :

    • PlayerName : Bugs Bunny
    • LabelPER : PER
    • PER : 24.88924

    Même si les données des objets texte PlayerName et PER sont extraites du fichier JSON, il est utile d’avoir un exemple de texte pour tester le positionnement.

    Étant donné que les objets texte sont dupliqués, ils s’affichent les uns sur les autres. Vous allez repositionner chaque objet pour l’étape suivante.

  9. À l’aide de l’outil déplacement, sélectionnez les flèches haut et bas pour repositionner chaque objet texte afin qu’il y ait de l’espace entre chaque objet.

  10. Pour les objets LabelPlayerName et LabelPER, remplacez la valeur de Font Style par B. Le texte s’affichera en gras ce qui permettra de distinguer visuellement l’étiquette de la valeur.

    Screenshot of the scene window that displays the completed stats card. The stats card includes a label for name, the player's name, a label for p e r, and the player's p e r.

Bouton Créer pour fermer la carte de statistiques

Vous pouvez utiliser un préfabriqué de bouton MRTK pour créer un bouton qui ferme la carte quand vous appuyez dessus. Dans la dernière unité, vous avez créé un bouton à partir de zéro à l’aide de scripts MRTK. Pour cette unité, vous allez utiliser le préfabriqué PressableButtonHoloLens2. Ce préfabriqué contient un script ButtonConfigHelper qui vous permet de modifier l’icône, le texte et l’étiquette du bouton.

  1. Dans la fenêtre Project, entrez PressableButtonHoloLens2 dans la barre de recherche. Sous la barre de recherche, en regard de Search, sélectionnez In Packages. Cela vous permet d’effectuer des recherches dans le dossier Packages où se trouvent les préfabriqués de bouton MRTK.

    Sélectionnez le bouton PressableButtonHoloLens2, puis faites-le glisser dans la fenêtre Inspector en tant qu’enfant de l’objet StatsCard.

    Screenshot of the hierarchy window. The pressable button hololens 2 object is highlighted as the child of the stats card object.

  2. Sélectionnez l’objet PressableButtonHoloLens2 dans la fenêtre Hierarchy. Dans la fenêtre Inspector, renommez l’objet CloseCardButton.

  3. Dans la fenêtre Inspector, sélectionnez les points de suspension situés à droite du composant Transform, puis sélectionnez Reset. Cela réinitialise la position du bouton sur 0, 0, 0.

  4. L’objet CloseCardButton est relativement petit par rapport aux autres objets. Même si le bouton est petit, il doit être entièrement visible. Pour agrandir le bouton, remplacez la valeur de Scale par 4.5, 4.5, 4.5.

  5. Pour le moment, les objets CloseCardButton et PlayerButton ont la même position (0, 0, 0). Par conséquent, l’objet CloseCardButton s’affiche au milieu de l’objet PlayerButton. L’objet CloseCardButton devrait cependant s’afficher devant l’objet Background.

    Pour positionner l’objet CloseCardButton à afficher devant les objets PlayerButton et Background, remplacez la valeur de Position par 0, 0, -0.8 pour CloseCardButton.

  6. À l’aide de l’outil déplacement, repositionnez l’objet CloseCardButton à afficher en haut à droite de l’objet Background.

    Screenshot of the scene window. The close card button object is at the top-right of the stats card object.

  7. Pour ce projet, vous n’avez besoin que de l’icône de bouton, sans texte ni étiquette. Par conséquent, vous pouvez désactiver les propriétés Main Label et See it/Say it Label. Dans la propriété Labels des composants ButtonConfigHelper, désactivez chaque étiquette.

    Screenshot of the button config helper component for the close card button object. The enable main label and enable see it say it label properties are unchecked.

    À présent, le bouton doit uniquement afficher une icône.

    Screenshot of the scene window that displays the stats card object. The close card button only displays an icon.

  8. L’objet CloseCardButton doit indiquer que l’utilisateur peut appuyer sur le bouton pour fermer la carte. Dans le composant ButtonConfigHelper se trouvent les icônes fournies avec MRTK. Quand un utilisateur sélectionne une icône de bouton, l’icône doit idéalement refléter la fonction du bouton. Dans ce cas, utilisez l’icône de bouton X.

    Dans la propriété Icon Set du composant ButtonConfigHelper, sélectionnez l’icône X.

    Screenshot of the icon set properties for the close card button object. The x icon is highlighted.

Vous devez maintenant avoir un objet StatsCardButton finalisé qui comprend le nom du joueur ainsi que son PER. Il doit également y avoir un bouton pour fermer la carte.

Screenshot of the scene window that displays the completed stats card object.

© 2021 Warner Bros. Ent. Tous droits réservés.