1

🎨-🖥️

Canvas & Anchors

UI that survives every screen size

Active

🎯

Goal for this step

Understand the Canvas system and build a resolution-proof layout.

1New scene MainMenu. UI → Canvas; set Canvas Scaler to Scale With Screen Size, reference 1920×-1080, the setting that makes UI work on every monitor.
2Anchors are the key concept: a corner-anchored element stays that distance from that corner at ANY resolution. Centre-anchored stays centred.
3Build: big title text (top-centre anchored), a vertical group of buttons (centre), version text (bottom-left corner).
4Test: drag the Game view to silly sizes. Nothing breaks. That is anchors working.

✏️

Fill in the Blanks

+15 XP

Resolution independence comes from the Canvas Scaler set to Scale With Size. Elements pin themselves to screen regions via .

🧠

Knowledge Check

+15 XP

A minimap pinned to the top-right on every monitor size is achieved with…

AA very wide image

BAnchoring the element to the top-right corner, it keeps its offset from THAT corner

CUpdating position in code every frame

2

🔘

Buttons That Do Things

OnClick events, hover states and scene flow

Locked

🎯

Goal for this step

Wire the menu buttons to real actions.

1A MenuActions script with public methods: PlayGame() (LoadScene), OpenSettings(), QuitGame().
2Each Button’s OnClick list in the Inspector: + → drag the script’s object → pick the method. Visual event wiring.
3Button feel: set Transition to Color Tint (subtle), and add a tiny scale punch on hover with an EventTrigger or a small script. Buttons must FEEL clickable.
4Application.Quit() does nothing in the editor, wrap it so you can still test.

MenuActions.cs

using UnityEngine;
using UnityEngine.SceneManagement;

public class MenuActions : MonoBehaviour
{
    public void PlayGame()  { SceneManager.LoadScene("Village"); }

    public void QuitGame()
    {
#if UNITY_EDITOR
        UnityEditor.EditorApplication.isPlaying = false;
#else
        Application.Quit();
#endif
    }
}

✏️

Fill in the Blanks

+15 XP

Buttons call code through their event list in the Inspector. Application. only works in a built game, not the editor.

🧠

Knowledge Check

+15 XP

The #if UNITY_EDITOR block exists because…

AEditors are slow

BQuit does nothing inside the editor, the compile-time switch gives you a testable quit in both worlds

CIt is decoration

3

⏸️

The Pause Menu

timeScale, a panel, and the resume flow

Locked

🎯

Goal for this step

Add a working pause menu to the game scenes.

1In the game scene: a full-screen semi-transparent panel (inactive by default) with Resume / Settings / Main Menu buttons.
2PauseManager: Escape toggles, Time.timeScale = 0 freezes physics, coroutines with WaitForSeconds, everything time-based; the panel appears.
3Gotcha you now know: timeScale survives scene loads, ALWAYS set it back to 1 when leaving to the menu (your Episode 3 restart already did!).
4Any UI animation that must run while paused uses unscaled time.

PauseManager.cs

using UnityEngine;

public class PauseManager : MonoBehaviour
{
    public GameObject pausePanel;
    bool paused;

    void Update()
    {
        if (Input.GetKeyDown(KeyCode.Escape))
        {
            paused = !paused;
            pausePanel.SetActive(paused);
            Time.timeScale = paused ? 0f : 1f;
        }
    }
}

⌨️

Code Challenge

+20 XP

Toggle the pause state:

PauseManager.cs

paused = ;
pausePanel.SetActive(paused);
Time.timeScale = paused ?  : ;

💡 Hint: Flip the boolean; zero time when paused, full speed when not.

🧠

Knowledge Check

+15 XP

Why does Time.timeScale = 0 pause "everything" so effectively?

AIt stops the CPU

BPhysics, animation and deltaTime all multiply by it, zero scales the whole simulation to a standstill

CIt hides the scene

4

🎚️

Settings: Sliders & Toggles

Volume, quality dropdown and fullscreen toggle

Locked

🎯

Goal for this step

Build a settings panel whose controls actually work.

1Settings panel: a volume Slider (0-1), a quality Dropdown, a fullscreen Toggle.
2Each control has an OnValueChanged event, same wiring as buttons.
3Volume: AudioListener.volume = value; (one global line for now, mixers come later in your journey).
4Quality: QualitySettings.SetQualityLevel(index). Fullscreen: Screen.fullScreen = isOn.
5Move the slider while music plays, live feedback sells settings.

SettingsMenu.cs

using UnityEngine;

public class SettingsMenu : MonoBehaviour
{
    public void SetVolume(float value)
    {
        AudioListener.volume = value;
    }

    public void SetQuality(int index)
    {
        QualitySettings.SetQualityLevel(index);
    }

    public void SetFullscreen(bool isOn)
    {
        Screen.fullScreen = isOn;
    }
}

✏️

Fill in the Blanks

+15 XP

Sliders and toggles fire their event when adjusted. Global game volume is one line: AudioListener..

🧠

Knowledge Check

+15 XP

Settings controls pass their new value INTO your method automatically because…

AMagic

BThe event system supports dynamic parameters, pick the "Dynamic float" version of your method when wiring

CUnity reads variable names

5

💾

PlayerPrefs: Settings That Stick

Save and load preferences across sessions

Locked

🎯

Goal for this step

Persist every setting so it survives quitting the game.

1PlayerPrefs is Unity’s built-in key-value store: SetFloat/SetInt/GetFloat/GetInt, localStorage for Unity!
2Save each setting when it changes; load them all in Start (with sensible defaults as the second Get argument).
3Also apply loaded values back to the UI controls so sliders show the truth.
4Quit fully, relaunch, your volume remembered. Small feature, huge respect from players.

SettingsMenu.cs (persistence)

public Slider volumeSlider;

void Start()
{
    float vol = PlayerPrefs.GetFloat("volume", 1f);
    AudioListener.volume = vol;
    volumeSlider.value = vol;      // sync the UI
}

public void SetVolume(float value)
{
    AudioListener.volume = value;
    PlayerPrefs.SetFloat("volume", value);
}

⌨️

Code Challenge

+20 XP

Load the saved volume with a default:

SettingsMenu.cs

float vol = PlayerPrefs.("volume", );
volumeSlider. = vol;

💡 Hint: Read the stored float; the second argument is the first-run default; then push it into the slider so UI matches reality.

🧠

Knowledge Check

+15 XP

PlayerPrefs is Unity’s equivalent of which tool from your browser games?

AThe canvas

BlocalStorage, a persistent key-value store for small data like settings and high scores

CrequestAnimationFrame

6

🎞️

Fades & Final Polish

Scene transitions and the pro checklist

Locked

🎯

Goal for this step

Add fade-to-black transitions and complete the UI layer.

1A persistent full-screen black Image (alpha 0, Raycast Target off so it never blocks clicks!) + a Fader script.
2Coroutine fades: alpha 0→1, LoadScene, 1→0. Every door and menu button now goes through the fader. Instant production feel.
3Use unscaled time in the fade so it works even from the paused menu.
4Final checklist: title ✓ settings that save ✓ pause ✓ fades ✓ hover feedback ✓. Players never praise good UI, they just stop noticing it. That is the goal.
5One episode left. It is the big one: MULTIPLAYER.

Fader.cs

IEnumerator FadeAndLoad(string scene)
{
    for (float a = 0; a < 1; a += Time.unscaledDeltaTime * 2f)
    {
        black.color = new Color(0, 0, 0, a);
        yield return null;
    }
    SceneManager.LoadScene(scene);
    for (float a = 1; a > 0; a -= Time.unscaledDeltaTime * 2f)
    {
        black.color = new Color(0, 0, 0, a);
        yield return null;
    }
}

✏️

Fill in the Blanks

+15 XP

The fade uses delta time so it runs even while paused, and the black image must have Raycast disabled so it never blocks buttons.

🧠

Knowledge Check

+15 XP

yield return null inside the fade loop means…

AStop the fade

B"Wait one frame", the loop advances the alpha a little every frame, creating the smooth fade

CReturn no scene

Menus Matter!UI & Menus

Menus Matter!
UI & Menus