๐ Episode 7 ยท Improver+ ยท The Professional Layer
Menus Matter! UI & Menus
The layer every real game needs: a title screen, settings with working volume and quality options that SAVE, a pause menu, smooth fades and juicy button feedback, wrapped around your RPG.
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;
}
}
}
๐ก 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
๐๐๐ฎโจ๐
Workshop Complete!
Title, settings, pause, saving, transitions, the professional wrapper is on. One episode remains: multiplayer!