Menu
CoddyTech

Canvas et texte

Fait partie de la section Créer de vrais jeux du Journey Unity de Coddy. Leçon 1 sur 60.

Unity affiche à l’écran le texte, les boutons et les barres avec son système d’interface utilisateur. Dans Unity 6, GameObject > UI > Text - TextMeshPro ajoute un objet texte nommé Text (TMP) ; la première fois, Unity demande d’importer les éléments essentiels de TMP, dont le texte a besoin pour sa police. Si la scène ne contient pas encore de Canvas, Unity en crée un et y place le texte, ainsi qu’un EventSystem par lequel passent les clics sur l’interface. Le Canvas affiche ses enfants par-dessus l’image de la caméra, à un endroit fixe de l’écran, quel que soit l’endroit où regarde la caméra. Réglez son Canvas Scaler sur Scale With Screen Size, 1920 x 1080, Match 0.5, comme dans chaque scène de ce cours, et la disposition conservera ses proportions sur n’importe quelle taille d’écran.

Le composant du texte est TextMeshPro - Text (UI). Les scripts le stockent dans un champ de son type de base TMP_Text, provenant de l’espace de noms TMPro, et modifient le texte affiché grâce à sa propriété text, une chaîne de caractères. Ce script nomme le niveau au démarrage :

using UnityEngine;
using TMPro;

public class LevelIntro : MonoBehaviour
{
    public TMP_Text titleText;

    void Start()
    {
        titleText.text = "World 2: Ice Caves";
    }
}

Faites glisser l’objet Text (TMP) depuis la Hierarchy vers le champ Title Text dans l’Inspector, et Unity place son composant texte dans le champ. Sans using TMPro;, le nom TMP_Text est inconnu et le script ne compile pas (CS0246). Si le champ reste vide, le premier titleText.text déclenche une UnassignedReferenceException. Le texte écrit par le script remplace celui saisi dans Text Input dans l’Inspector, qui est New Text pour un texte fraîchement créé.

challenge icon

Défi

Facile

Affiche la zone dans laquelle se trouve l’explorateur dans ZoneText, en haut.

  1. Dans Explorer.cs, ajoute using TMPro; et le champ public TMP_Text zoneText;. Dans la scène, ZoneText est associé à ce nom.
  2. Dans Update(), sous le commentaire, définis zoneText.text sur Zone: Beach lorsque transform.position.x est inférieur à 2, et sur Zone: Jungle dans le cas contraire.

Appuie sur « Jouer » et marche vers la droite jusqu’à l’herbe : le texte devient Jungle. Puis appuie sur « Vérifier ».

Essayez vous-même

using UnityEngine;

public class Explorer : MonoBehaviour
{
    public float speed = 4f;

    void Update()
    {
        float move = Input.GetAxisRaw("Horizontal");
        transform.Translate(move * speed * Time.deltaTime, 0f, 0f);

        // Afficher la zone dans ZoneText : Zone: Plage si x est inférieur à 2, Zone: Jungle à partir de 2
    }
}

Toutes les leçons de Créer de vrais jeux

Entraînez-vous par vous-même : Playground Unity