✍️ Make Your UI Feel Alive!

You’ve got a working click counter — nice!
But now it’s time to go beyond boring black-and-white numbers and make your UI react to the player.

In this lesson, you’ll learn how to:

  • Format text on the fly
  • Change color and size dynamically
  • Use simple logic to make your UI feel smarter and more fun

🎯 Step 1: Changing Text Style via Code

Let’s start by making our click count look bold and colorful once it passes a certain number.

Update your script:

public void CountClick()
{
    clickCount++;
    
    if (clickCount >= 10)
    {
        clickText.color = Color.yellow;
        clickText.fontSize = 60;
    }

    clickText.text = "Clicks: " + clickCount;
}

This makes the text larger and yellow after 10 clicks — perfect for small celebrations 🥳

🔤 Step 2: Using String Formatting

For better control, you can format text like this:

clickText.text = string.Format("Total Clicks: <b>{0}</b>", clickCount);

You can also use rich text tags with TextMeshPro (TMP) like <b>, <i>, <color=red>.

Example:

clickText.text = $"<color=green>Clicks:</color> <b>{clickCount}</b>";

🧪 Step 3: Animate It with LeanTween (Optional)

If you want to animate the text size on each click:

  1. Install LeanTween from the Asset Store
  2. Add this inside CountClick():
LeanTween.scale(clickText.gameObject, Vector3.one * 1.2f, 0.1f).setEasePunch();

Boom 💥 – the text will “pop” every time it’s updated.

🧠 Recap

  • You can style UI text dynamically via script
  • TextMeshPro supports HTML-style rich tags
  • Combine logic with visuals to celebrate progress
  • Optional: use LeanTween or DOTween for simple UI animations

🧪 Mini Challenge: Reactive UI

  • When clicks reach 20, make the text red and say “🔥 YOU’RE ON FIRE!”
  • Change the button label to “Keep Going!” once player reaches 50 clicks
  • Reset everything after 100 clicks

🚀 What’s Next?

Let’s make that click feel good. We’ll add sound effects and make the whole experience more satisfying.

🔊 Go to Lesson 16 → Playing a Sound on Click in Unity