Learn Unity and C# by Making Games / Clicker Game Project

🧱 Building the Foundation for Your First Game UI

Create the UI foundation for your first small game.

Project setup checklist

Before you start

Basic computer skills
A willingness to build along inside Unity

You’ll be able to

Create a Canvas
Add basic UI elements
Understand screen-space 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

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

🖼️ 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

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

🎯 Step 4: Add a Button

Right-click the Canvas → UI → Button - TextMeshPro
Rename it to ClickButton
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

Try It Yourself

Open Unity and recreate the smallest version of this lesson's main idea.
Change one value, name, or setting so you can see the cause and effect.
Use the Console or the Game view to confirm the result before moving on.

Keep it small enough to finish in five minutes, then write down what changed and what Unity showed you.

Reading the whole lesson before trying the first concrete step.
Changing multiple settings at once and losing track of what mattered.
Ignoring Console errors because the scene still appears to load.

Quick Check

What is the best next step after reading a lesson section?

Key Takeaways

A Canvas is the root of Unity UI.
UI scale settings affect how your game feels on different screens.
Simple layout choices save cleanup later.

Resources

download

Project setup checklist

Use this before starting a new Unity prototype.

reference

Unity Manual

Official reference for Unity editor concepts, components, and workflows.

reference

Unity Scripting API

The fastest way to verify classes, methods, and Unity-specific behavior.

download

DMG Forge Resources

Checklists and creator resources for keeping projects moving.

🖼️ 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.

Try It Yourself

Open Unity and recreate the smallest version of this lesson's main idea.
Change one value, name, or setting so you can see the cause and effect.
Use the Console or the Game view to confirm the result before moving on.

Keep it small enough to finish in five minutes, then write down what changed and what Unity showed you.