Text and TextMeshPro in Unity - Mini Project: Build & Apply

Displaying Text with Text and TextMeshPro in Unity

📖 Scenario: You are creating a simple Unity scene where you want to display a welcome message to the player using two different text components: the built-in Text and the more advanced TextMeshPro.

🎯 Goal: Build a Unity script that sets the text of both a Text component and a TextMeshProUGUI component to show a welcome message.

📋 What You'll Learn

Create a public variable for a Text component

Create a public variable for a TextMeshProUGUI component

Assign the welcome message to both text components in the Start() method

Print the final messages to the Unity Console

💡 Why This Matters

🌍 Real World

Displaying text is essential in games and apps for instructions, scores, and messages. Unity's Text and TextMeshPro components are common tools for this.

💼 Career

Understanding how to use UI text components is a basic skill for Unity developers, useful in game development, interactive apps, and UI design.

1

Create public variables for Text components

Write a Unity C# script named WelcomeText. Inside the class, create two public variables: one called simpleText of type UnityEngine.UI.Text and another called tmpText of type TMPro.TextMeshProUGUI.

Unity

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class WelcomeText : MonoBehaviour
{
    // Your code here
}

Hint

Remember to include using UnityEngine.UI; for the Text component and using TMPro; for the TextMeshProUGUI component.

2

Create a welcome message string

Inside the WelcomeText class, create a private string variable called welcomeMessage and set it to "Welcome to Unity Text Demo!".

Unity

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class WelcomeText : MonoBehaviour
{
    public Text simpleText;
    public TextMeshProUGUI tmpText;

    // Create the welcome message string here
    // Your code here
}

Hint

Use private string welcomeMessage = "Welcome to Unity Text Demo!"; inside the class but outside any method.

3

Set the text components in Start()

Add a Start() method to the WelcomeText class. Inside it, set the text property of simpleText and tmpText to the welcomeMessage string.

Unity

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class WelcomeText : MonoBehaviour
{
    public Text simpleText;
    public TextMeshProUGUI tmpText;

    private string welcomeMessage = "Welcome to Unity Text Demo!";

    // Add Start() method and set text properties
    // Your code here
}

Hint

Use the Start() method to set both simpleText.text and tmpText.text to the welcomeMessage.

4

Print the welcome messages to the Console

Inside the Start() method, after setting the text properties, add two Debug.Log() statements to print the values of simpleText.text and tmpText.text.

Unity

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class WelcomeText : MonoBehaviour
{
    public Text simpleText;
    public TextMeshProUGUI tmpText;

    private string welcomeMessage = "Welcome to Unity Text Demo!";

    void Start()
    {
        simpleText.text = welcomeMessage;
        tmpText.text = welcomeMessage;

        // Print the text values to the Console
        // Your code here
    }
}

Hint

Use Debug.Log() to print the text values after setting them.

Practice

1. Which component in Unity provides sharper and more customizable text rendering compared to the basic Text component?

easy

A. Sprite Renderer

B. Canvas Renderer

C. TextMeshPro

D. Audio Source

Solution

1. Step 1: Understand Unity text components

   Unity has a basic Text component and a more advanced TextMeshPro component for displaying text.

2. Step 2: Identify which is sharper and customizable

   TextMeshPro is designed to provide sharper, clearer text with more customization options than the basic Text component.

3. Final Answer:

   TextMeshPro -> Option C

4. Quick Check:

   Sharper text = TextMeshPro [OK]

Hint: TextMeshPro is the advanced text component in Unity [OK]

Common Mistakes:

• Confusing Canvas Renderer with text rendering
• Thinking Sprite Renderer handles text
• Choosing Audio Source which is unrelated

2. Which of the following is the correct way to change the displayed text of a TextMeshPro component in a Unity C# script?

easy

A. myText.display = "Hello World!";

B. myText.SetText = "Hello World!";

C. myText.content = "Hello World!";

D. myText.text = "Hello World!";

Solution

1. Step 1: Recall TextMeshPro text property usage

   TextMeshPro components have a public property called 'text' to set the displayed string.

2. Step 2: Identify correct syntax

   Assigning a string directly to 'text' like myText.text = "Hello World!"; is correct and common.

3. Final Answer:

   myText.text = "Hello World!"; -> Option D

4. Quick Check:

   Set text with .text property [OK]

Hint: Use .text property to set displayed text [OK]

Common Mistakes:

• Using SetText() which exists but is a method, not property assignment
• Using non-existent properties like content or display
• Missing quotes around string

3. What will be the output on screen after running this Unity C# code snippet if myText is a TextMeshProUGUI component?

myText.text = "Score: " + 10 + 5;

medium

A. Score: 15

B. Score: 105

C. Score: 10 5

D. Score: 10+5

Solution

1. Step 1: Understand string concatenation in C#

   When using + with a string and numbers, numbers are converted to strings and concatenated left to right.

2. Step 2: Evaluate expression "Score: " + 10 + 5

   "Score: " + 10 becomes "Score: 10", then + 5 becomes "Score: 105" as 5 is appended as string.

3. Final Answer:

   Score: 105 -> Option B

4. Quick Check:

   String + numbers concatenates left to right [OK]

Hint: String + numbers concatenate as strings left to right [OK]

Common Mistakes:

• Assuming 10 + 5 adds first before string concatenation
• Expecting spaces between numbers automatically
• Thinking + signs appear in output

4. You wrote this code to update a TextMeshProUGUI text but it doesn't change on screen:

public TextMeshProUGUI myText;

void Start() {
    myText.text = "Game Over";
}

What is the most likely reason?

medium

A. The myText variable is not assigned in the Inspector

B. TextMeshProUGUI does not have a text property

C. You must call Refresh() after setting text

D. The text must be set in Update(), not Start()

Solution

1. Step 1: Check common setup mistakes

   If myText is not assigned in the Inspector, the script has a null reference and text won't update.

2. Step 2: Verify other options

   TextMeshProUGUI has a text property; no Refresh() needed; setting text in Start() works fine.

3. Final Answer:

   The myText variable is not assigned in the Inspector -> Option A

4. Quick Check:

   Assign UI references in Inspector [OK]

Hint: Always assign UI variables in Inspector before running [OK]

Common Mistakes:

• Assuming text property doesn't exist
• Thinking Refresh() is required
• Believing Start() is too early to set text

5. You want to display a player's health as text using TextMeshProUGUI and update it every frame. Which code snippet correctly updates the text to show "Health: " followed by the current health integer stored in playerHealth?

hard

A. All of the above

B. void Update() { myText.text = "Health: " + playerHealth.ToString(); }

C. void Update() { myText.text = string.Format("Health: {0}", playerHealth); }

D. void Update() { myText.text = $"Health: {playerHealth}"; }

Solution

1. Step 1: Review ways to convert int to string in C#

   playerHealth is an int; to display it, convert to string or use string interpolation or formatting.

2. Step 2: Check each option

   B uses + and ToString(), C uses string.Format(), D uses string interpolation with $"..."; all work.

3. Step 3: Confirm all are correct

   All three methods correctly update the text with the health value.

4. Final Answer:

   All of the above -> Option A

5. Quick Check:

   Multiple string methods work for text update [OK]

Hint: Use any string conversion method to update text [OK]

Common Mistakes:

• Forgetting to convert int to string
• Using incorrect string syntax
• Updating text outside Update() when dynamic