Unity Tutorial

Create your first UI button in Unity

Build a Button on a Canvas and run code from On Click with a simple C# method.

公開日: 2026-05-06#Unity#UI#Button#TextMeshPro

Coco

Game dev learning guide

This English lesson uses the same guided screen structure as the Japanese tutorials: a visual start, character guidance, step cards, code, mistakes, and a final checklist.

Hajime

Beginner game engine learner

I want to know what to make first, what to check, and how to tell whether I actually understood it.

Create your first UI button in Unity is designed around one visible result. We will keep the first pass focused so the lesson turns into practice quickly.

So I should finish the exact lesson once before changing it?

Yes. Finish the stable version first, then change one variable, setting, or layout detail to make the idea yours.

Lesson Overview

Finish one working result first

Goal

This is the quickest path to understanding Unity UI basics: Canvas, Button, text, and how an Inspector event can call your method.

Time

20-30 min / Beginner. Keep the first pass small, then change one thing on your own.

Result

The button appears at runtime on the Canvas.

Before You Start

Check the goal, inputs, and success condition

The lesson is easiest to follow when you know what should happen on screen, which control or editor action triggers it, and what counts as done.

This is the quickest path to understanding Unity UI basics: Canvas, Button, text, and how an Inspector event can call your method.

Understand the role of Canvas as the root of Unity UI.

The button appears at runtime on the Canvas.

1Conclusion first

UI work is a necessary skill even for learners who mainly care about 3D gameplay, because almost every game eventually needs menus, HUD elements, buttons, or feedback text. A first button lesson is a good way to understand Unity's Canvas-based interface world before connecting it to larger systems.

The goal here is not to build a polished menu. The goal is to understand the path from a visible button to a function call in code. Once that path is clear, you can reuse it for pause menus, dialogue choices, inventory tabs, stage selection, and countless small interactions.

2What you will learn

Understand the role of Canvas as the root of Unity UI.
Create a Button and label it so the hierarchy stays readable.
Use a public method as an On Click event target in the Inspector.
Learn the difference between seeing a button in the scene and wiring behavior to it correctly.

3Before you start

A Unity scene where you can add UI without competing with too many other experiments.
Basic knowledge of creating a new C# script and attaching it to a scene object.
TextMeshPro imported if your project prompts for it.
A simple testing habit: press Play, click once, then verify the result in the Console or visible text.

4Step by step

Step 1

Create the Canvas and Button

Add a Canvas to your scene, then create a Button and a readable label so you can immediately see the UI hierarchy.

Step 2

Write a small button handler

Create a C# script with a public method such as HandleClick and attach it to a GameObject in the scene.

Step 3

Wire the On Click event

In the Button component, add your object to the On Click list and choose the public method so the button triggers code at runtime.

5Button handler

Button handler

csharp

using UnityEngine;

public class FirstButtonExample : MonoBehaviour
{
    public void HandleClick()
    {
        Debug.Log("Button clicked.");
    }
}

The public method appears in the Button's event dropdown, which is why public visibility matters for this beginner workflow.
Using Debug.Log first is helpful because it confirms the button is wired correctly before you build more visible UI behavior.
Inspector events are beginner-friendly, but later you may also connect buttons through code for more dynamic menu systems.

6Common mistakes

The button is visible but clicking does nothing

This usually means the On Click event was not assigned, or the method chosen in the Inspector does not match the object where the script is attached. The button exists visually, but the event pipeline is incomplete.

The UI appears too large or too small

Canvas scaling settings and Game view resolution often affect beginner perception. Before rewriting the layout, confirm whether the Canvas Scaler and current test resolution are responsible.

The wrong object was dragged into On Click

A common beginner mistake is selecting the Button object itself even though the handler method lives on another GameObject. Double-check where the script actually exists in the scene.

7Checklist

The button appears at runtime on the Canvas.
Clicking the button runs your method.
You understand the difference between scene objects and UI hierarchy objects.

8Practice ideas

Change a Text label on screen instead of only printing to the Console.
Create two buttons that each call a different public method.
Build a small panel that appears and disappears when the button is pressed.

9FAQ

Why use the Inspector event instead of writing everything in code?

Because it lets beginners see the connection directly. You can verify the relationship between the Button and the handler without learning dynamic event setup too early.

Do I always need a Canvas for Unity UI?

For standard Unity UI, yes. The Canvas is the main root that tells Unity how and where interface elements should render.

Should I learn TextMeshPro right away?

It is worth using early because many modern Unity UI workflows rely on it. You do not need to master every TMP feature, but becoming comfortable with it helps quickly.

Can the same button start gameplay later?

Absolutely. This exact event flow can later load scenes, toggle menus, confirm choices, or trigger progression systems.

10Wrap-up

A button lesson teaches both UI structure and event wiring, not just visual layout.
Understanding Canvas and On Click now makes future menus far less intimidating.
The smallest useful extension after this is changing visible text or opening a panel instead of only logging a message.

11Character review

If I can make the result once and explain what changed, I can move on with more confidence.

Exactly. The best next step is one small variation: adjust a value, swap an input, or connect the idea to a tiny scene of your own.

Tiny variation: finish the lesson once exactly as written, then change one value, label, axis, or UI detail. That small change is where understanding starts to stick.

Next tutorials

Mix UI with a simple 3D example Use UI knowledge before building more gameplay