Unity UI and User Interaction

Creating UI Elements: Canvas, Text, and Buttons

Unity’s UI system is built around the Canvas component, which acts as the root for all UI elements. UI components such as Text, Buttons, Images, and Sliders must be children of a Canvas to be visible in the game.

• Canvas: The main container for all UI elements.
• Text (TMP): Displays labels, scores, or instructions. TextMeshPro (TMP) is recommended for sharper text.
• Button: Provides interactive elements that can respond to clicks.

To create UI elements:

1. Right-click in the Hierarchy → UI → Choose Canvas.
2. Right-click on the Canvas → UI → Add Text or Button.

Handling Button Clicks and Events

Unity makes it easy to respond to user interactions through Event System and the OnClick property of Buttons.

Example: Button Click Event

using UnityEngine;
using UnityEngine.UI;

public class UIManager : MonoBehaviour
{
    public Button startButton;

    void Start()
    {
        // Add a listener to the button click
        startButton.onClick.AddListener(OnStartButtonClicked);
    }

    void OnStartButtonClicked()
    {
        Debug.Log("Start button clicked!");
    }
}
      

Simply drag and drop the Button into the StartButton field in the Inspector to link it.

Building HUDs and Health Bars

A HUD (Heads-Up Display) provides players with real-time information such as health, score, and ammo. Health bars can be implemented using Image components with Filled type set to Horizontal or Vertical.

Example: Simple Health Bar

using UnityEngine;
using UnityEngine.UI;

public class HealthBar : MonoBehaviour
{
    public Image healthFill;

    public void UpdateHealth(float healthPercent)
    {
        // healthPercent should be between 0 and 1
        healthFill.fillAmount = healthPercent;
    }
}
      

Attach this script to a UI element with an Image, and call UpdateHealth() whenever the player’s health changes.

Responsive UI for Multiple Resolutions

Ensuring that your UI looks good on all screen sizes is crucial for both mobile and desktop games. Unity provides Canvas Scaler and Anchor settings to make your UI responsive:

• Use Canvas Scaler in Scale With Screen Size mode to adjust automatically.
• Set proper Anchors for UI elements to keep them positioned correctly on different resolutions.
• Test with various Game window aspect ratios to ensure consistency.

By combining anchors, scaling, and flexible layouts, your game UI will adapt smoothly to phones, tablets, and PC screens.

Bringing It All Together

With Canvases, Buttons, Text, and responsive layouts, you can create interactive UIs that enhance the player experience. Add event-driven scripts to handle clicks, update HUDs dynamically, and ensure your UI remains functional and beautiful across all devices.