🗺️ Pixel Quest

What You'll Build

In this tutorial you will build Pixel Quest — a 2D top-down adventure game where the entire world is constructed from tiles. You will use Unity's Tilemap system to paint a multi-layered environment, add physical collision so the player cannot walk through walls, then build a fully functional Settings Menu that persists player preferences (volume, colour theme, difficulty) across game sessions using PlayerPrefs.

Week 7 Concepts in Action

The Four Activities

Project Setup

Unlike previous weeks, this project uses a 2D Core template. The 2D template preconfigures the render pipeline, camera, and physics settings for 2D gameplay — saving considerable setup time.

1. 1
   Create a new 2D project in Unity Hub

   Open Unity Hub → New Project. Select the 2D (Core) template. Name the project PixelQuest. Click Create Project. Wait for Unity to finish setting up the project.

2. 2
   Confirm the Scene view is in 2D mode

   When you use the 2D (Core) template, the Scene view is already in 2D mode by default — you don't need to press any button. Just check what you see: the Scene view should show a flat front-on view with a 2D camera frame visible (a thin rectangle). If instead you see a 3D-looking perspective with X/Y/Z gizmo arms in the corner, look at the small toolbar at the top of the Scene view panel (not the main Unity toolbar at the very top) — there is a "2D" toggle button there. Click it to switch to 2D mode.

3. 3
   Install the 2D Tilemap Extras package

   The 2D (Core) template already includes the 2D Tilemap Editor package — you don't need to install it. However, you do need the 2D Tilemap Extras package for Rule Tiles. Go to Window → Package Manager. In the top-left dropdown select Unity Registry. Search for "2D Tilemap Extras". Click Install. Wait for it to finish, then close the Package Manager.

4. 4
   Add a free tile art pack to your Unity account

   Open your web browser (not inside Unity — the in-editor Asset Store window was removed in Unity 2020). Go to https://assetstore.unity.com and sign in with the same Unity ID you use in Unity Hub. In the search bar, search for "Pixel Dungeon Pack Lite" or any free "Top Down 2D Tileset". On the asset page, click the blue Add to My Assets button. A dialog will pop up — click Open in Unity. Your browser will ask permission to launch Unity; click Open.

5. 5
   Download and import the pack into your project

   Unity opens the Package Manager window automatically with the asset selected. (If it doesn't open, do it manually: Window → Package Manager → Packages dropdown → My Assets.) Click the Download button. Once it finishes, the button changes to Import. Click Import. A list of files appears — leave everything ticked and click Import at the bottom. The pack's sprites will appear in your Project window.

Folder Structure

Create these folders in your Project window now (right-click → Create → Folder):

• Assets/Art/Sprites — sprite sheets and individual tile sprites
• Assets/Art/Tiles — Tile Assets created from your sprites
• Assets/Art/Palettes — the saved Tile Palette assets
• Assets/Scripts — all C# scripts
• Assets/Audio — background music and sound effect clips
• Assets/Scenes — your scene files

Tilemap Architecture

Before creating any tiles, understand how the four core components relate to each other. This is the most important concept in the tutorial.

The Four Core Components

Creating the Grid and Tilemap Layers

• In the Hierarchy, right-click → 2D Object → Tilemap → Rectangular. Unity creates a Grid GameObject with a Tilemap child. Rename the Tilemap child to Floor.
• Right-click the Grid GameObject → 2D Object → Tilemap → Rectangular. This adds a second Tilemap child. Rename it Walls.
• Add a third Tilemap child in the same way. Rename it Decoration.
• Your Hierarchy should now show: Grid → Floor, Walls, Decoration. Expand the Grid arrow to verify.

Creating a Tile Palette

The Tile Palette is the editor window you use to organise and select your tiles before painting them onto a Tilemap. Think of it as an artist's physical palette — you put colours on it, then pick which colour to use on your canvas.

Step 2A — Open the Tile Palette Window

• Go to Window → 2D → Tile Palette. The Tile Palette window opens — dock it near your Scene view for easy access.
• In the Tile Palette window, click the "Create New Palette" button (or the dropdown at the top). Name the palette WorldPalette. Choose Grid → Rectangular, Cell Size Automatic. Click Create. Save it into your Assets/Art/Palettes/ folder.

Step 2B — Create Tile Assets from Sprites

You need to convert your sprites into Tile Assets before they can be placed in the palette.

Method A — Drag and Drop (Recommended):

1. 1
   Drag sprites directly into the Tile Palette window

   In the Project window, select your floor tile sprite. Drag it into the Tile Palette window (the grey grid area, not the toolbar). Unity immediately prompts you to save the new Tile Asset.

2. 2
   Save the Tile Asset

   Unity opens a save dialog. Navigate to Assets/Art/Tiles/ and click Save. The sprite now appears in the palette as a selectable tile.

3. 3
   Repeat for every tile sprite

   Drag in your Wall sprite, Decoration sprite, and Water sprite one by one. Each creates a .asset file in your Tiles folder. After all are added, the palette grid should show a preview thumbnail for each tile type.

Method B — Create Tile Asset manually:

Right-click in Project window → Create → 2D → Tiles → Tile. Select the new Tile asset → in the Inspector, drag your sprite into the Sprite field. Drag the Tile Asset into the Palette window.

Step 2C — Adding a Rule Tile (Optional but Recommended)

A Rule Tile automatically selects the correct sprite variant based on neighbouring tiles — for example, it draws a corner piece when a wall tile is surrounded by other walls on two specific sides. This is how professional games achieve seamless tilemap edges.

1. 1
   Create a Rule Tile asset

   Right-click in Project window → Create → 2D → Tiles → Rule Tile. Name it WallRuleTile. Save it to Assets/Art/Tiles/.

2. 2
   Configure the rules

   Select the WallRuleTile. In the Inspector click Add Rule. The 3×3 neighbour grid appears. Click the arrows around the centre square: green arrow = must have this tile as neighbour, red X = must NOT have this tile as neighbour. Assign the correct sprite variant for each rule combination. The Rule Tile documentation (Unity Manual → 2D → Tilemaps → Rule Tile) shows detailed examples.

3. 3
   Add the Rule Tile to the palette

   Drag the WallRuleTile asset into the Tile Palette window like any other tile.

Painting the World

With your palette ready, you can now paint tiles onto your Tilemaps using the brush tools in the Tile Palette toolbar. This is the core creative part of the tutorial.

The Tile Palette Toolbar

Step 3A — Set the Active Tilemap Layer

• In the Tile Palette window, find the Active Tilemap dropdown (top-right area). Set it to Floor.
• Select the Floor tile in the palette. Press U (Box Fill). In the Scene view, click and drag a large rectangle — approximately 20×15 tiles. This is your playable floor area.
• Switch the Active Tilemap to Walls. Select the Wall tile. Paint a border of wall tiles around the edge of your floor. Also paint some interior walls to create rooms and corridors.
• Switch the Active Tilemap to Decoration. Select the Decoration tile. Paint some decorative elements inside the rooms — barrels, crates, flowers, or whatever your sprite sheet contains.

Step 3B — Using the Pick Tool to Match Existing Tiles

When editing, you often want to match a tile already in the scene. Press I (Pick tool), click on an existing tile in the Scene view — it becomes the active selection in the palette. Switch back to the Brush tool (B) and continue painting with that tile.

Step 3C — Rotating and Flipping Tiles

Some tiles need to be rotated (e.g., a one-sided wall facing different directions). While the Paint Brush is active:

• Press [ or ] to rotate the active tile 90° counter-clockwise or clockwise before painting.
• Hold Shift + [ to flip the tile horizontally.

Sorting Layers

Without sorting, Unity renders the Tilemaps in an undefined order — walls might appear behind floors. Sorting Layers give you explicit control over render order in 2D.

Creating Sorting Layers

• Go to Edit → Project Settings → Tags and Layers. Scroll down to the Sorting Layers section.
• Click the + button to add new layers. Add: Ground, Walls, Decoration, Player, UI — in that order from top to bottom.
• Sorting layers render bottom to top: Ground renders first (behind everything), UI renders last (in front of everything). Confirm your list is in that order.

Assigning Sorting Layers to Tilemaps

• Select the Floor Tilemap in the Hierarchy. In the Inspector, find the Tilemap Renderer component. Set Sorting Layer to Ground. Set Order in Layer to 0.
• Select the Walls Tilemap. Set Sorting Layer to Walls, Order in Layer to 0.
• Select the Decoration Tilemap. Set Sorting Layer to Decoration, Order in Layer to 0.

Tilemap Collision

Right now, a player character would walk through the walls as if they weren't there. We need to add physics collision. The key is that only the Walls layer needs a collider — not the floor or decorations.

Step 5A — Add Tilemap Collider 2D to Walls

• Select the Walls Tilemap in the Hierarchy.
• In the Inspector → click Add Component → search for Tilemap Collider 2D → select it. Unity instantly generates a collider shape for every painted wall tile. You will see the green collider outlines in the Scene view.
• In the Tilemap Collider 2D component, tick "Used By Composite". This prepares the collider to be merged in the next step.

Step 5B — Add Composite Collider 2D

• With the Walls Tilemap still selected, click Add Component → search Composite Collider 2D → add it.
• Unity will automatically add a Rigidbody 2D component to the Walls Tilemap when you add Composite Collider 2D. Find it in the Inspector and set its Body Type to Static. This prevents the walls from falling due to gravity.
• Look at the Scene view — the green outlines should now merge into clean, straight edge lines around the outside of your wall blocks. This is the composite shape.

Step 5C — Configure the Collider Physics Layer

• Go to Edit → Project Settings → Physics 2D → Layer Collision Matrix. Confirm that the Default layer interacts with the Default layer (they should be checked by default). Your player and walls will both be on the Default layer unless you specifically change them.

PlayerController2D.cs

A clean 2D movement script using Rigidbody2D for physics-based collision. We read input each frame and move the character using MovePosition — this works correctly with the Tilemap Collider while keeping movement smooth.

Why Rigidbody2D.MovePosition instead of transform.position?

// PlayerController2D.cs
// ─────────────────────────────────────────────────────────────────────────────
// Moves the player character using Rigidbody2D.MovePosition so that the
// physics engine correctly detects collisions with the Tilemap Collider.
//
// Movement is handled in FixedUpdate (runs at a fixed physics rate)
// rather than Update (runs at the display frame rate) for smoother,
// more reliable physics interactions.
// ─────────────────────────────────────────────────────────────────────────────

using UnityEngine;

public class PlayerController2D : MonoBehaviour
{
    // ── Inspector Settings ───────────────────────────────────────────────
    [SerializeField] private float moveSpeed = 5f;

    // ── Cached Components ────────────────────────────────────────────────
    private Rigidbody2D rb;
    private Animator    animator;

    // ── State ────────────────────────────────────────────────────────────
    private Vector2 moveInput;  // raw input direction each frame
    private bool    isMoving;

    // ────────────────────────────────────────────────────────────────────
    // Awake: cache components
    // ────────────────────────────────────────────────────────────────────
    void Awake()
    {
        rb       = GetComponent<Rigidbody2D>();
        animator = GetComponent<Animator>();

        if (rb == null)
            Debug.LogError("PlayerController2D: Rigidbody2D component is missing!");
    }

    // ────────────────────────────────────────────────────────────────────
    // Update: read input every display frame (input polling should be in Update)
    // ────────────────────────────────────────────────────────────────────
    void Update()
    {
        // GetAxisRaw returns -1, 0, or 1 — no smoothing or acceleration.
        // This gives tight, responsive movement suited for tile-based games.
        float h = Input.GetAxisRaw("Horizontal"); // A/D or Left/Right Arrow
        float v = Input.GetAxisRaw("Vertical");   // W/S or Up/Down Arrow

        // Normalise to prevent faster diagonal movement
        moveInput = new Vector2(h, v).normalized;
        isMoving  = moveInput != Vector2.zero;

        UpdateAnimator();
    }

    // ────────────────────────────────────────────────────────────────────
    // FixedUpdate: apply movement through Rigidbody so the physics engine
    // correctly detects collisions with the Tilemap Composite Collider.
    //
    // Time.fixedDeltaTime is used automatically by MovePosition — we do
    // not need to multiply manually here.
    // ────────────────────────────────────────────────────────────────────
    void FixedUpdate()
    {
        Vector2 newPosition = rb.position + moveInput * moveSpeed * Time.fixedDeltaTime;
        rb.MovePosition(newPosition);
    }

    // ────────────────────────────────────────────────────────────────────
    // UpdateAnimator: set animation parameters so the sprite faces the
    // direction of movement. Uses two float parameters and a bool.
    // ────────────────────────────────────────────────────────────────────
    private void UpdateAnimator()
    {
        if (animator == null) return;

        // IsMoving drives the Idle ↔ Walk transition
        animator.SetBool("IsMoving", isMoving);

        // MoveX / MoveY store the last direction for directional walk sprites
        if (isMoving)
        {
            animator.SetFloat("MoveX", moveInput.x);
            animator.SetFloat("MoveY", moveInput.y);
        }
    }
}

CameraFollow.cs

A simple script that keeps the main camera centred on the player. Uses LateUpdate() — which runs after all other Updates — so the camera sees the player's final position each frame, not a mid-frame snapshot.

// CameraFollow.cs
// ─────────────────────────────────────────────────────────────────────────────
// Smoothly follows the player target using Lerp.
// LateUpdate() is used because the player moves in FixedUpdate/Update —
// using LateUpdate ensures we always read the player's FINAL position
// for that frame, eliminating one-frame-behind jitter.
// ─────────────────────────────────────────────────────────────────────────────

using UnityEngine;

public class CameraFollow : MonoBehaviour
{
    // ── Inspector Settings ───────────────────────────────────────────────
    [SerializeField] private Transform target;        // the player Transform
    [SerializeField] private float    smoothSpeed = 5f; // higher = snappier follow

    // Camera offset — keep the Z at a negative value (camera is in front of the 2D world).
    [SerializeField] private Vector3 offset = new Vector3(0, 0, -10f);

    // Optional: clamp the camera to map bounds
    // Set these in the Inspector to match your tilemap size.
    [SerializeField] private bool  useBounds  = false;
    [SerializeField] private Vector2 minBounds;
    [SerializeField] private Vector2 maxBounds;

    // ────────────────────────────────────────────────────────────────────
    // LateUpdate: runs after Update and FixedUpdate have both completed.
    // This guarantees we read the player's finalised position.
    // ────────────────────────────────────────────────────────────────────
    void LateUpdate()
    {
        if (target == null) return;

        // Desired camera position: directly above (in Z) the player
        Vector3 desired = target.position + offset;

        // Lerp: gradually move toward the desired position each frame.
        // Time.deltaTime makes the smoothing frame-rate independent.
        Vector3 smoothed = Vector3.Lerp(transform.position, desired, smoothSpeed * Time.deltaTime);

        // Optional: clamp to map boundaries so the camera never shows empty space
        if (useBounds)
        {
            smoothed.x = Mathf.Clamp(smoothed.x, minBounds.x, maxBounds.x);
            smoothed.y = Mathf.Clamp(smoothed.y, minBounds.y, maxBounds.y);
        }

        transform.position = smoothed;
    }
}

AudioManager.cs

A singleton that manages background music and sound effects. The SettingsManager (next script) will call this to adjust the volume when the player moves the volume slider.

// AudioManager.cs
// ─────────────────────────────────────────────────────────────────────────────
// A persistent singleton that controls background music and SFX volume.
// DontDestroyOnLoad keeps it alive when new scenes are loaded.
// SettingsManager calls SetMusicVolume() and SetSFXVolume() when the
// player adjusts the volume sliders in the Settings panel.
// ─────────────────────────────────────────────────────────────────────────────

using UnityEngine;

public class AudioManager : MonoBehaviour
{
    // ── Singleton ────────────────────────────────────────────────────────
    public static AudioManager Instance { get; private set; }

    // ── Inspector References ─────────────────────────────────────────────
    [SerializeField] private AudioSource musicSource;  // loops background music
    [SerializeField] private AudioSource sfxSource;    // plays one-shot effects

    // ── Default volumes ──────────────────────────────────────────────────
    [SerializeField] [Range(0f,1f)] private float defaultMusicVolume = 0.5f;
    [SerializeField] [Range(0f,1f)] private float defaultSFXVolume   = 0.8f;

    // ────────────────────────────────────────────────────────────────────
    // Awake: set up singleton, persist across scene loads
    // ────────────────────────────────────────────────────────────────────
    void Awake()
    {
        if (Instance != null && Instance != this)
        {
            Destroy(gameObject);
            return;
        }
        Instance = this;
        DontDestroyOnLoad(gameObject); // survives scene transitions
    }

    // ────────────────────────────────────────────────────────────────────
    // Start: apply saved volume settings from PlayerPrefs.
    // This runs after SettingsManager.Awake, so saved values are already loaded.
    // ────────────────────────────────────────────────────────────────────
    void Start()
    {
        float savedMusic = PlayerPrefs.GetFloat("MusicVolume", defaultMusicVolume);
        float savedSFX   = PlayerPrefs.GetFloat("SFXVolume",   defaultSFXVolume);

        SetMusicVolume(savedMusic);
        SetSFXVolume(savedSFX);

        if (musicSource != null)
            musicSource.Play();
    }

    // ── Public API ───────────────────────────────────────────────────────

    public void SetMusicVolume(float volume)
    {
        if (musicSource != null)
            musicSource.volume = volume;
    }

    public void SetSFXVolume(float volume)
    {
        if (sfxSource != null)
            sfxSource.volume = volume;
    }

    // Play a one-shot sound effect — footstep, pickup, attack, etc.
    public void PlaySFX(AudioClip clip)
    {
        if (sfxSource != null && clip != null)
            sfxSource.PlayOneShot(clip);
    }
}

SettingsManager.cs

The SettingsManager is the bridge between the Settings UI panel and the game. It reads and writes PlayerPrefs — Unity's built-in key-value store that persists data on disk between game sessions. When the player moves a slider or toggles a setting, this script saves the value immediately.

// SettingsManager.cs
// ─────────────────────────────────────────────────────────────────────────────
// Manages player settings: music volume, SFX volume, colour theme,
// and difficulty. All settings are saved to PlayerPrefs so they
// persist between game sessions.
//
// Each setting follows the same pattern:
//   1. A public method called by a UI element (slider OnValueChanged etc.)
//   2. The method updates the game immediately (live preview)
//   3. The method saves the value to PlayerPrefs
//   4. On Awake, all saved values are loaded back and applied
// ─────────────────────────────────────────────────────────────────────────────

using UnityEngine;
using UnityEngine.UI;
using TMPro;

public class SettingsManager : MonoBehaviour
{
    // ── Singleton ────────────────────────────────────────────────────────
    public static SettingsManager Instance { get; private set; }

    // ── PlayerPrefs Keys ─────────────────────────────────────────────────
    // Store key strings as constants so a typo doesn't silently break saving.
    private const string KEY_MUSIC      = "MusicVolume";
    private const string KEY_SFX        = "SFXVolume";
    private const string KEY_THEME      = "ColourTheme";
    private const string KEY_DIFFICULTY = "Difficulty";
    private const string KEY_FULLSCREEN = "Fullscreen";

    // ── Inspector References — UI Elements ───────────────────────────────
    // Drag these from your Canvas in the Inspector.
    [Header("Volume Sliders")]
    [SerializeField] private Slider  musicSlider;
    [SerializeField] private Slider  sfxSlider;

    [Header("Theme & Difficulty")]
    [SerializeField] private TMP_Dropdown themeDropdown;
    [SerializeField] private TMP_Dropdown difficultyDropdown;
    [SerializeField] private Toggle      fullscreenToggle;

    [Header("Settings Panel")]
    [SerializeField] private GameObject  settingsPanel;  // the whole settings panel

    // ── Colour Themes ────────────────────────────────────────────────────
    // Index matches the Dropdown option order: 0=Day, 1=Night, 2=Sunset
    [SerializeField] private Color[] themeBackgroundColours = new Color[]
    {
        new Color(0.53f, 0.81f, 0.98f), // Day (sky blue)
        new Color(0.05f, 0.05f, 0.15f), // Night (dark navy)
        new Color(0.9f,  0.4f,  0.1f)   // Sunset (orange)
    };

    // ────────────────────────────────────────────────────────────────────
    // Awake: set up singleton, load and apply all saved settings
    // ────────────────────────────────────────────────────────────────────
    void Awake()
    {
        if (Instance != null && Instance != this) { Destroy(gameObject); return; }
        Instance = this;
    }

    // ────────────────────────────────────────────────────────────────────
    // Start: apply all saved settings to the UI and the game.
    // This runs after all Awake() calls, so AudioManager.Instance exists.
    // ────────────────────────────────────────────────────────────────────
    void Start()
    {
        LoadAllSettings();

        // Hide the settings panel at game start
        if (settingsPanel != null)
            settingsPanel.SetActive(false);
    }

    // ────────────────────────────────────────────────────────────────────
    // LoadAllSettings: read saved values and apply them to both UI and game
    // ────────────────────────────────────────────────────────────────────
    private void LoadAllSettings()
    {
        // Load music volume — default 0.5 if no saved value exists
        float music = PlayerPrefs.GetFloat(KEY_MUSIC, 0.5f);
        if (musicSlider != null) musicSlider.value = music;
        ApplyMusicVolume(music);

        // Load SFX volume — default 0.8
        float sfx = PlayerPrefs.GetFloat(KEY_SFX, 0.8f);
        if (sfxSlider != null) sfxSlider.value = sfx;
        ApplySFXVolume(sfx);

        // Load colour theme — default 0 (Day)
        int theme = PlayerPrefs.GetInt(KEY_THEME, 0);
        if (themeDropdown != null) themeDropdown.value = theme;
        ApplyColourTheme(theme);

        // Load difficulty — default 1 (Medium)
        int diff = PlayerPrefs.GetInt(KEY_DIFFICULTY, 1);
        if (difficultyDropdown != null) difficultyDropdown.value = diff;

        // Load fullscreen toggle — default true (1)
        bool fs = PlayerPrefs.GetInt(KEY_FULLSCREEN, 1) == 1;
        if (fullscreenToggle != null) fullscreenToggle.isOn = fs;
        ApplyFullscreen(fs);
    }

    // ════════════════════════════════════════════════════════════════════
    // PUBLIC METHODS — called by UI elements via their event system
    // ════════════════════════════════════════════════════════════════════

    // ── Music Volume ─────────────────────────────────────────────────────
    // Wire this to the Music Slider's OnValueChanged event.
    public void OnMusicVolumeChanged(float value)
    {
        ApplyMusicVolume(value);
        PlayerPrefs.SetFloat(KEY_MUSIC, value);
        PlayerPrefs.Save(); // flush to disk immediately
    }

    // ── SFX Volume ───────────────────────────────────────────────────────
    // Wire this to the SFX Slider's OnValueChanged event.
    public void OnSFXVolumeChanged(float value)
    {
        ApplySFXVolume(value);
        PlayerPrefs.SetFloat(KEY_SFX, value);
        PlayerPrefs.Save();
    }

    // ── Colour Theme ─────────────────────────────────────────────────────
    // Wire this to the Theme Dropdown's OnValueChanged event.
    // value: 0 = Day, 1 = Night, 2 = Sunset
    public void OnColourThemeChanged(int value)
    {
        ApplyColourTheme(value);
        PlayerPrefs.SetInt(KEY_THEME, value);
        PlayerPrefs.Save();
    }

    // ── Difficulty ───────────────────────────────────────────────────────
    // Wire this to the Difficulty Dropdown's OnValueChanged event.
    // value: 0 = Easy, 1 = Medium, 2 = Hard
    public void OnDifficultyChanged(int value)
    {
        // Store the difficulty — gameplay scripts can read it via PlayerPrefs
        PlayerPrefs.SetInt(KEY_DIFFICULTY, value);
        PlayerPrefs.Save();
        Debug.Log($"Difficulty set to: {value} (0=Easy, 1=Medium, 2=Hard)");
    }

    // ── Fullscreen Toggle ────────────────────────────────────────────────
    // Wire this to the Fullscreen Toggle's OnValueChanged event.
    public void OnFullscreenToggled(bool value)
    {
        ApplyFullscreen(value);
        PlayerPrefs.SetInt(KEY_FULLSCREEN, value ? 1 : 0);
        PlayerPrefs.Save();
    }

    // ── Settings Panel Open/Close ────────────────────────────────────────
    // Wire the settings gear button's OnClick to this method.
    public void ToggleSettingsPanel()
    {
        if (settingsPanel == null) return;
        bool isOpen = settingsPanel.activeSelf;
        settingsPanel.SetActive(!isOpen);

        // Pause game time while settings are open (optional)
        Time.timeScale = isOpen ? 1f : 0f;
    }

    // ── Reset to Defaults ────────────────────────────────────────────────
    public void ResetToDefaults()
    {
        PlayerPrefs.DeleteAll(); // clear ALL saved preferences
        LoadAllSettings();          // reload defaults into UI and game
        Debug.Log("Settings reset to defaults.");
    }

    // ════════════════════════════════════════════════════════════════════
    // PRIVATE APPLY METHODS — separate from the Save so they can be
    // called on load without re-saving (which would overwrite defaults
    // with 0 on first run).
    // ════════════════════════════════════════════════════════════════════

    private void ApplyMusicVolume(float v)
    {
        if (AudioManager.Instance != null)
            AudioManager.Instance.SetMusicVolume(v);
    }

    private void ApplySFXVolume(float v)
    {
        if (AudioManager.Instance != null)
            AudioManager.Instance.SetSFXVolume(v);
    }

    private void ApplyColourTheme(int index)
    {
        if (index < 0 || index >= themeBackgroundColours.Length) return;
        // Change the camera's background colour — visible in the undrawn areas
        if (Camera.main != null)
            Camera.main.backgroundColor = themeBackgroundColours[index];
    }

    private void ApplyFullscreen(bool value)
    {
        Screen.fullScreen = value;
    }
}

Building the Settings UI Panel

The Settings panel is a Canvas panel that appears when the player clicks the gear icon. It contains sliders, a dropdown, a toggle, and buttons — all wired to the SettingsManager.

6A — Canvas Setup

• GameObject → UI → Canvas. Set Render Mode to Screen Space — Overlay. Add a Canvas Scaler component (auto-added) → set UI Scale Mode to Scale With Screen Size → Reference Resolution 1920 × 1080.
• Inside the Canvas, create an empty GameObject named HUDRoot. This will hold your always-visible HUD (score, timer, etc.).
• Create another empty GameObject inside the Canvas named SettingsPanel. Add a Panel child (UI → Panel) to give it a semi-transparent background. This is the sliding panel.

6B — Settings Panel Layout

Build the following UI elements inside SettingsPanel:

• Title text: UI → TextMeshPro. Text: "⚙ Settings". Font Size 28, anchored top-centre.
• Music Volume label + Slider: Add a TMP label "Music Volume". Below it, add UI → Slider. Name it MusicSlider. Set Min Value: 0, Max Value: 1, Whole Numbers: OFF.
• SFX Volume label + Slider: Same as above. Name it SFXSlider.
• Colour Theme label + Dropdown: Add a TMP label "Colour Theme". Below it, add UI → Dropdown - TextMeshPro. Name it ThemeDropdown. In the Dropdown Inspector, clear the default options and add: Day, Night, Sunset.
• Difficulty label + Dropdown: Same as above. Name it DifficultyDropdown. Options: Easy, Medium, Hard.
• Fullscreen Toggle: UI → Toggle. Name it FullscreenToggle. Set label text to "Fullscreen".
• Reset to Defaults button: UI → Button - TextMeshPro. Text: "Reset Defaults". Name it ResetButton.
• Close button: UI → Button - TextMeshPro. Text: "✕ Close". Name it CloseButton.

6C — Gear/Open Button (in HUD)

• Inside HUDRoot, add UI → Button - TextMeshPro. Text: "⚙". Name it SettingsButton. Position it top-right. Size: 60×60.

PlayerPrefs — How It Works

Before wiring the UI, understand exactly how PlayerPrefs works — this prevents the most common settings bugs.

The Three PlayerPrefs Data Types

When Does PlayerPrefs Save?

PlayerPrefs.Set*() stores data in memory but may not immediately write to disk. Call PlayerPrefs.Save() explicitly to flush to disk. Best practice: call Save() immediately after any Set*() call in your settings methods, as shown in SettingsManager.cs.

Debugging PlayerPrefs

In the Unity Editor, PlayerPrefs is stored in the Registry on Windows. To inspect or clear it during development:

// Run this from a temporary script or the ResetToDefaults button to
// clear all saved settings and test first-launch behaviour.

// Delete a single key:
PlayerPrefs.DeleteKey("MusicVolume");

// Delete ALL saved keys (useful for testing first-run defaults):
PlayerPrefs.DeleteAll();

// Check if a key exists before reading it:
if (PlayerPrefs.HasKey("MusicVolume"))
{
    float v = PlayerPrefs.GetFloat("MusicVolume");
    Debug.Log($"Saved music volume: {v}");
}
else
{
    Debug.Log("No saved music volume found — using default.");
}

Inspector Wiring Checklist

All scripts are written and the UI is built. Now connect them.

Player GameObject

• Add component: PlayerController2D. Set Move Speed to 5.
• Confirm Rigidbody 2D is present. Body Type: Dynamic. Gravity Scale: 0. Constraints → Freeze Rotation Z: ticked.
• Confirm Capsule Collider 2D is present and sized correctly. Set Sorting Layer: Player.

Main Camera

• Add component: CameraFollow. Drag the Player GameObject into the Target field. Smooth Speed: 5. Offset Z: –10 (keep the camera behind the 2D scene).
• Confirm the Camera's Projection is set to Orthographic (not Perspective — a Perspective camera in a 2D game will show tiles at wrong angles). Set Size to 5–8 depending on how much of the map you want visible.

AudioManager

• Create an empty GameObject → name it AudioManager. Add two AudioSource components. One for music (loop = ticked), one for SFX (loop = unticked). Drag your background music AudioClip into the music AudioSource's AudioClip field.
• Add component: AudioManager. Drag the music AudioSource into Music Source and the SFX AudioSource into SFX Source.

SettingsManager

• Create an empty GameObject → name it SettingsManager. Add component: SettingsManager.
• Drag the SettingsPanel into the Settings Panel field.
• Drag MusicSlider → Music Slider field. Drag SFXSlider → SFX Slider field.
• Drag ThemeDropdown → Theme Dropdown field. Drag DifficultyDropdown → Difficulty Dropdown field.
• Drag FullscreenToggle → Fullscreen Toggle field.

Wiring UI Events

• Select MusicSlider → On Value Changed → + → SettingsManager → OnMusicVolumeChanged
• Select SFXSlider → On Value Changed → + → SettingsManager → OnSFXVolumeChanged
• Select ThemeDropdown → On Value Changed → + → SettingsManager → OnColourThemeChanged
• Select DifficultyDropdown → On Value Changed → + → SettingsManager → OnDifficultyChanged
• Select FullscreenToggle → On Value Changed → + → SettingsManager → OnFullscreenToggled
• Select SettingsButton → On Click → + → SettingsManager → ToggleSettingsPanel
• Select CloseButton → On Click → + → SettingsManager → ToggleSettingsPanel
• Select ResetButton → On Click → + → SettingsManager → ResetToDefaults

Testing Your Game

Test 1 — Tilemap and Collision

• Press Play. The floor tiles should render below the wall tiles (Ground sorting layer → Wall sorting layer).
• Move the player (WASD / Arrow Keys) toward a wall tile. The player should be blocked and slide along the wall surface, not pass through it.
• Move through open doorways (gaps in walls) — the player should pass through freely.
• Check that decoration tiles do not block movement (they have no collider).

Test 2 — Camera Follow

• Walk across the map. The camera should follow smoothly, lagging slightly behind based on the smooth speed value.
• If Camera Bounds is enabled, the camera should stop moving at the edge of the map and not show empty space beyond the tiles.

Test 3 — Settings Panel

• Click the ⚙ gear button. The Settings Panel should appear and the game should pause (Time.timeScale = 0).
• Move the Music Volume slider. If you have background music, its volume should change in real time.
• Change the Colour Theme dropdown. The camera background colour should change immediately.
• Click Close. The panel disappears and the game resumes (Time.timeScale = 1).
• Persistence test: Change the music volume to 0.3 and the theme to Night. Press Play to stop. Press Play again. The volume slider should start at 0.3 and the theme should be Night — values persisted to PlayerPrefs.
• Click Reset Defaults. The sliders and dropdowns should reset to their default values.

Common Issues

Extension Challenges

Finished the core tutorial? These extensions progressively deepen your understanding of both the Tilemap system and UI best practices.