Button component and click events in Unity - Performance & Optimization

Performance: Button component and click events

MEDIUM IMPACT

This affects the responsiveness and smoothness of user interactions in the game or app.

Handling button clicks in Unity UI

Unity

public void OnButtonClick() {
  HandleClick();
}
// Assign OnButtonClick to the Button's OnClick event in the Inspector

Uses Unity's built-in event system to handle clicks only when they happen, reducing overhead.

📈 Performance GainSingle event call per click, improving input responsiveness

Handling button clicks in Unity UI

Unity

void Update() {
  if (Input.GetMouseButtonDown(0)) {
    Ray ray = Camera.main.ScreenPointToRay(Input.mousePosition);
    if (Physics.Raycast(ray, out RaycastHit hit)) {
      if (hit.collider.gameObject.name == "Button") {
        HandleClick();
      }
    }
  }
}

Checking for clicks every frame and using raycasts is expensive and can cause input lag.

📉 Performance CostTriggers multiple raycasts per frame, blocking input responsiveness

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual raycast in Update	N/A (GameObjects checked each frame)	N/A	High CPU usage for raycasts	[X] Bad
Unity Button OnClick event	N/A (Event-driven)	N/A	Minimal CPU usage	[OK] Good

Rendering Pipeline

Button click events are processed by Unity's event system which listens for input and triggers callbacks without continuous polling.

→Input Processing

→Event Dispatch

→UI Update

⚠️ BottleneckInput Processing when using manual polling and raycasts

Core Web Vital Affected

INP

This affects the responsiveness and smoothness of user interactions in the game or app.

Optimization Tips

1Avoid checking for clicks every frame with raycasts.

2Use Unity UI Button's OnClick event for efficient click handling.

3Profile input handling to detect unnecessary CPU usage.

Performance Quiz - 3 Questions

What is the main performance problem with checking button clicks using raycasts every frame in Update?

A It causes unnecessary CPU usage by running raycasts even when no clicks happen.

B It improves responsiveness by checking clicks constantly.

C It reduces memory usage by avoiding events.

D It prevents UI from rendering.

DevTools: Unity Profiler

How to check: Open Profiler, record while clicking button, check CPU usage and Event system calls.

What to look for: Look for high CPU spikes during Update or excessive raycast calls indicating inefficient input handling.

Practice

1. What does the onClick property of a Unity Button component do?

easy

A. It lets you specify what happens when the button is clicked.

B. It changes the button's color automatically.

C. It disables the button permanently.

D. It moves the button to a new position.

Solution

1. Step 1: Identify the purpose of the onClick property and match options

   The onClick property holds actions that execute when the button is clicked. Only "It lets you specify what happens when the button is clicked." correctly describes this; other options refer to disabling, color changes, or movement.

2. Final Answer:

   It lets you specify what happens when the button is clicked. -> Option A

3. Quick Check:

   Button onClick triggers actions on click [OK]

Hint: Remember: onClick runs code when button is pressed [OK]

Common Mistakes:

• Thinking onClick changes button appearance
• Confusing onClick with button position or state
• Assuming onClick disables the button

2. Which of the following is the correct way to add a click event listener to a Button in Unity using C#?

easy

A. button.onClick.AddListener = Debug.Log("Clicked!");

B. button.onClick.AddListener(() => Debug.Log("Clicked!"));

C. button.onClick.Add(() => Debug.Log("Clicked!"));

D. button.Click.AddListener(() => Debug.Log("Clicked!"));

Solution

1. Step 1: Verify syntax for Button onClick.AddListener and check options

   The correct syntax uses onClick.AddListener with a lambda: button.onClick.AddListener(() => Debug.Log("Clicked!")). B uses invalid assignment (=), C calls wrong method Add(), D uses nonexistent Click.

2. Final Answer:

   button.onClick.AddListener(() => Debug.Log("Clicked!")); -> Option B

3. Quick Check:

   Use onClick.AddListener with lambda [OK]

Hint: Use AddListener with a lambda or method reference [OK]

Common Mistakes:

• Using assignment (=) instead of AddListener method
• Misspelling onClick or AddListener
• Using wrong event names like Click or Add

3. Consider this C# code attached to a Unity Button:

public Button myButton;
void Start() {
    myButton.onClick.AddListener(() => Debug.Log("Button Pressed"));
}

What will happen when the button is clicked during play?

medium

A. The message "Button Pressed" will be printed to the Console.

B. Nothing will happen because the listener is not assigned.

C. The game will crash with an error.

D. The button will become invisible.

Solution

1. Step 1: Trace code execution and predict button click outcome

   The code adds a listener in Start() that executes Debug.Log("Button Pressed") on click, printing to Console. No errors, crashes, or visual changes occur.

2. Final Answer:

   The message "Button Pressed" will be printed to the Console. -> Option A

3. Quick Check:

   Click triggers Debug.Log message [OK]

Hint: Click runs listeners added with AddListener [OK]

Common Mistakes:

• Assuming no effect without explicit call
• Expecting visual changes without code
• Confusing runtime errors with correct code

4. What is wrong with this code snippet for adding a click event to a Button?

public Button myButton;
void Start() {
    myButton.onClick = () => Debug.Log("Clicked");
}

medium

A. The listener must be added in Update(), not Start().

B. The Debug.Log statement is missing parentheses.

C. The Button variable must be private, not public.

D. You cannot assign a lambda directly to onClick; use AddListener instead.

Solution

1. Step 1: Detect the invalid assignment to onClick UnityEvent

   Direct lambda assignment to myButton.onClick fails because it is a UnityEvent requiring AddListener(). Other options misidentify unrelated issues like timing, syntax, or access modifiers.

2. Final Answer:

   You cannot assign a lambda directly to onClick; use AddListener instead. -> Option D

3. Quick Check:

   Use AddListener, not direct assignment [OK]

Hint: Add listeners with AddListener, never assign onClick directly [OK]

Common Mistakes:

• Assigning lambda directly to onClick
• Confusing event assignment with method call
• Adding listeners in wrong Unity method

5. You want to create a Unity Button that, when clicked, disables itself so it cannot be clicked again. Which code snippet correctly achieves this behavior?

hard

A. myButton.onClick.AddListener(() => myButton.gameObject.enabled = false);

B. myButton.onClick = () => myButton.enabled = false;

C. myButton.onClick.AddListener(() => myButton.interactable = false);

D. myButton.onClick.AddListener(() => myButton.SetActive(false));

Solution

1. Step 1: Identify correct method to disable Button interaction and validate options

   Set interactable = false using onClick.AddListener prevents further clicks. B uses invalid direct assignment. C references nonexistent gameObject.enabled (compile error). D calls nonexistent SetActive on Button (compile error).

2. Final Answer:

   myButton.onClick.AddListener(() => myButton.interactable = false); -> Option C

3. Quick Check:

   Disable button by setting interactable false [OK]

Hint: Set button.interactable = false inside AddListener to disable [OK]

Common Mistakes:

• Assigning onClick instead of using AddListener
• Using enabled instead of interactable
• Calling SetActive on Button component