Image and Button

Learn to make clickable UI elements with Image and Button.

Image component

The Image component renders 2D Sprite graphics (panels, health bars, icons) on a Canvas. Within a Canvas hierarchy, Image is used instead of the 3D world's SpriteRenderer.

// Creating a health bar by adjusting Image fillAmount
using UnityEngine.UI;
Image healthBar = GetComponent<Image>();
healthBar.fillAmount = 0.75f;

Setting Image Type to Filled allows the fillAmount property to drive circular cooldowns or horizontal progress bars.

Button and onClick event

The Button component is an interactive UI element capturing mouse clicks or touchscreen taps. To dictate what occurs upon a click, functions are registered to its onClick event.

// Binding a function to button click via code
Button playButton = GetComponent<Button>();
playButton.onClick.AddListener(StartGame);

This mechanism underpins all interactive actions like launching gameplay, opening menus, or advancing dialogue.

Exercise Print button interaction

Assign "Button" to uiType and "StartGame" to action. Print UI: Button | Triggered: StartGame to the console.

Show example solution

using System;

class Program
{
    static void Main()
    {
        string uiType = "Button";
        string action = "StartGame";
        Console.WriteLine("UI: " + uiType + " | Triggered: " + action);
    }
}

Test yourself

Which event is used to listen to the exact moment a user clicks a UI Button component?
- onHover
- onTrigger
- onRelease
- onClick
Show answer

onClick — onClick is the standard UnityEvent triggered whenever a Button component receives a click.

Attach click listener

playButton.onClick.____(OnPlayClicked);

Show answer

playButton.onClick.AddListener(OnPlayClicked);

Image and Button fields

Image

Displays 2D sprite on Canvas
Button

Receives user click interactions
onClick

UnityEvent on button click
fillAmount

Image fill ratio (0-1)

Next lesson: Rect Transform

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies