Back to Game Development

Module 6: UI/UX & Audio

Master UI design, menu systems, HUD, inventory systems, and audio integration

🎨 What is Game UI/UX?

UI (User Interface) is what players see and interact with - menus, buttons, health bars. UX (User Experience) is how it feels to use - is it intuitive? Responsive? Satisfying? Great UI/UX is invisible - players don't notice it, they just enjoy the game!

Simple Definition

Game UI/UX is the bridge between player and game. Good UI shows information clearly without cluttering the screen. Good UX makes interactions feel natural and rewarding.

Great UI/UX should:

• Be instantly understandable

• Provide clear feedback

• Match the game's style

• Never block important gameplay

• Work on all screen sizes

Why Learn UI/UX?

Player Retention

Bad UI makes players quit, good UI keeps them playing

Professional Polish

UI quality signals overall game quality

Accessibility

Good UI makes games playable for everyone

Immersion

Diegetic UI keeps players in the game world

📚 Learn More:

🖼️ UI Canvas and Layout

Unity's Canvas is the container for all UI elements. It handles rendering, scaling, and positioning. Understanding Canvas is essential for creating responsive UI that works on any screen size!

Canvas Render Modes

Screen Space - Overlay

UI renders on top of everything. Perfect for menus and HUD. Most common mode!

Screen Space - Camera

UI renders at distance from camera. Allows 3D effects and particles in front of UI.

World Space

UI exists in 3D world. Perfect for health bars above enemies, signs, terminals.

Layout Components

Rect Transform

Every UI element has this instead of Transform. Controls position, size, anchors, and pivots.

Anchors

Define how UI scales with screen size. Set anchors to corners/edges for responsive design!

Layout Groups

Horizontal/Vertical/Grid Layout Groups automatically arrange children. Great for lists and grids!

// Accessing UI elements in code

using UnityEngine.UI;

using TMPro; // TextMeshPro

public TextMeshProUGUI healthText;

public Image healthBar;

public Button startButton;

void Start()

{

// Update text

healthText.text = "Health: 100";

// Update image fill (health bar)

healthBar.fillAmount = 0.75f; // 75%

// Add button listener

startButton.onClick.AddListener(OnStartClicked);

}

void OnStartClicked()

{

Debug.Log("Start button clicked!");

}

📋 Menu Systems and HUD

Menus let players navigate your game, adjust settings, and manage inventory. HUD (Heads-Up Display) shows real-time game information. Both need to be clear, responsive, and match your game's style!

Menu System Example

// MenuManager.cs - Simple menu system

using UnityEngine;

using UnityEngine.SceneManagement;

public class MenuManager : MonoBehaviour

{

public GameObject mainMenu;

public GameObject settingsMenu;

public GameObject pauseMenu;

private bool isPaused = false;

void Update()

{

if (Input.GetKeyDown(KeyCode.Escape))

{

if (isPaused) ResumeGame();

else PauseGame();

}

}

public void StartGame()

{

SceneManager.LoadScene("GameScene");

}

public void OpenSettings()

{

mainMenu.SetActive(false);

settingsMenu.SetActive(true);

}

public void CloseSettings()

{

settingsMenu.SetActive(false);

mainMenu.SetActive(true);

}

public void PauseGame()

{

pauseMenu.SetActive(true);

Time.timeScale = 0f; // Freeze game

isPaused = true;

}

public void ResumeGame()

{

pauseMenu.SetActive(false);

Time.timeScale = 1f; // Resume game

isPaused = false;

}

public void QuitGame()

{

Application.Quit();

}

}

HUD Example

// HUDManager.cs - Update HUD elements

using TMPro;

using UnityEngine.UI;

public class HUDManager : MonoBehaviour

{

public Image healthBar;

public TextMeshProUGUI scoreText;

public TextMeshProUGUI ammoText;

public void UpdateHealth(float current, float max)

{

healthBar.fillAmount = current / max;

}

public void UpdateScore(int score)

{

scoreText.text = "Score: " + score;

}

public void UpdateAmmo(int current, int max)

{

ammoText.text = $"{current}/{max}";

}

}

🎒 Inventory System

Inventory systems let players collect, manage, and use items. They're essential for RPGs, survival games, and many other genres. Let's build a simple but functional inventory!

// Item.cs - Item data structure

[System.Serializable]

public class Item

{

public string itemName;

public Sprite icon;

public int quantity;

public int maxStack = 99;

}

// Inventory.cs - Inventory manager

public class Inventory : MonoBehaviour

{

public List<Item> items = new List<Item>();

public int maxSlots = 20;

public bool AddItem(Item newItem)

{

// Check if item already exists (stackable)

foreach (Item item in items)

{

if (item.itemName == newItem.itemName)

{

if (item.quantity < item.maxStack)

{

item.quantity += newItem.quantity;

return true;

}

}

}

// Add as new item if space available

if (items.Count < maxSlots)

{

items.Add(newItem);

return true;

}

return false; // Inventory full

}

public void RemoveItem(Item item)

{

items.Remove(item);

}

}

🔊 Sound Effects and Music

Audio brings games to life! Sound effects provide feedback, music sets the mood, and ambient sounds create atmosphere. Good audio design is as important as good visuals!

Audio in Unity

// AudioManager.cs - Centralized audio control

public class AudioManager : MonoBehaviour

{

public static AudioManager instance;

public AudioSource musicSource;

public AudioSource sfxSource;

public AudioClip buttonClick;

public AudioClip gunShot;

public AudioClip coinCollect;

void Awake()

{

if (instance == null) instance = this;

else Destroy(gameObject);

DontDestroyOnLoad(gameObject);

}

public void PlaySFX(AudioClip clip)

{

sfxSource.PlayOneShot(clip);

}

public void PlayMusic(AudioClip clip)

{

musicSource.clip = clip;

musicSource.Play();

}

public void SetMusicVolume(float volume)

{

musicSource.volume = volume;

}

public void SetSFXVolume(float volume)

{

sfxSource.volume = volume;

}

}

🎵 Audio Tips:

  • • Use 2D audio for UI sounds, 3D audio for world sounds
  • • Compress audio files (OGG for music, WAV for short SFX)
  • • Add volume sliders in settings - players appreciate control!
  • • Use audio mixers for professional mixing and effects

📚 Learning Resources

UI/UX Design

Audio

🎯 What's Next?

You now understand UI/UX and audio! In the final module, we'll dive into Multiplayer and Networking - learning client-server architecture, Photon Unity Networking, and building multiplayer games!