🧱 Building the Foundation for Your First Game UI

It’s clickin’ time!
Before we start counting clicks and printing gold coins, we need a Canvas — Unity’s system for displaying anything on the screen that isn’t a GameObject in the world.

Think of it as the HUD layer in a game — for buttons, text, score counters, menus, etc.

Let’s set it up 👇

🧰 Step 1: Create a Canvas

  1. In the Hierarchy, right-click
  2. Select UI → Canvas
  3. Unity will automatically add:
    • A Canvas (your UI space)
    • An EventSystem (handles UI interactions)

💡 Tip: If your Canvas looks giant or zoomed out, switch your Scene view to 2D and adjust the UI scale.

🖼️ Step 2: Change Canvas Settings (Optional)

Click the Canvas in the Hierarchy and look at the Inspector.

  • Render Mode: Should be Screen Space - Overlay (default)
  • UI Scale Mode (in Canvas Scaler):
    • Set to Scale With Screen Size
    • Reference Resolution: 1920 x 1080
    • Match: 0.5 (for balanced scaling)

This makes your UI responsive across different screen sizes — critical for WebGL and mobile builds.

🔤 Step 3: Add a UI Text Element

  1. Right-click the Canvas → UI → Text - TextMeshPro
  2. Unity will prompt you to import TextMeshPro essentials — click Import
  3. Rename the text element to ClickCountText
  4. Customize the font size, color, alignment, and position using the RectTransform and Inspector

📝 This is where we’ll show the player how many times they’ve clicked.

🎯 Step 4: Add a Button

  1. Right-click the Canvas → UI → Button - TextMeshPro
  2. Rename it to ClickButton
  3. Customize the text to something fun like:
    • “Click Me!”
    • “Smash This!”
    • “Coin Factory!”

Position it wherever you want. (Center works great for now.)

🧪 Test the UI

  • Hit Play
  • Hover and click the button
  • Nothing happens yet… but it looks like a game now! 🥳

Next lesson = making the button actually count clicks.

🧠 Recap

  • You created a Canvas (the root of all UI)
  • Set the canvas to scale with screen size
  • Added a TextMeshPro label and a button
  • UI is now ready for scripting!

🧪 Mini Task: Polish It Up

  • Change the text font, color, and size
  • Rename all UI elements clearly
  • Add an icon or sprite to your button if you’re feeling fancy
  • Bonus: Add a background image to the Canvas!

🚀 What’s Next?

Time to make the button actually do something. We’ll write a simple script to count clicks and update the text in real-time.

👉 Go to Lesson 14 → Writing a Simple Click Counter