一、前言
昨天我們處理好了背景音樂與音效控制器的底層邏輯，今天我們要將重點轉移到玩家最常接觸的 UI 介面——設置選單（Settings Panel）。 為了讓 UI 更符合我們的像素遊戲風格，我們重構了設置面板底圖，並自訂了一個以像素錢幣作為拖拉桿（Handle）的音量控制 Slider。本篇將完整記錄面板建置、腳本綁定以及解決 UI 顯示異常的踩坑過程。

二、今日開發目標

1. Settings UI 面板底圖替換：檢查時發現先前設定的底圖用錯，音量線條應為可滑動，故應移除舊底圖上的固定音量線條，替換為乾淨的像素風新面板。
   
   圖一、設定介面替換前後對比圖

2. 自訂像素錢幣 Handle：利用 Unity UI Slider 元件，將預設的拉桿替換為圖二金幣 Sprite (money_0) 並調整合適尺寸。
   
   圖二、金幣樣式 Handle

3. 腳本事件綁定：將 SettingsPanelManager.cs 掛載至父物件，並將 Slider 傳入控制腳本中。

4. 即時音量控制驗證：透過滑動 Slider 達成背景音樂與音效音量的動態調節。

三、核心程式碼：SettingsPanelManager.cs
在寫 UI 之前，我們先定義好選單管理腳本。這個腳本會在 Start() 時向 AudioManager 取得當前音量並同步到 UI，同時監聽 Slider 的 onValueChanged 事件(為避免篇幅過長，以下擷取核心初始化與事件監聽邏輯進行講解)：

using UnityEngine;
using UnityEngine.UI;
public class SettingsPanelManager : MonoBehaviour {
    [Header("音量滑桿設定")]
    [SerializeField] private Slider masterSlider;
    [SerializeField] private Slider bgmSlider;
    [SerializeField] private Slider sfxSlider;

    private void Start() {
        // 1. 初始化：從 AudioManager 讀取當前音量同步到 UI
        if (AudioManager.Instance != null) {
            if (masterSlider != null) masterSlider.value = AudioManager.Instance.GetMasterVolume();
            if (bgmSlider != null) bgmSlider.value = AudioManager.Instance.GetBGMVolume();
            if (sfxSlider != null) sfxSlider.value = AudioManager.Instance.GetSFXVolume();
        }

        // 2. 監聽：綁定 Slider 的 onValueChanged 事件
        if (masterSlider != null)
            masterSlider.onValueChanged.AddListener(val => AudioManager.Instance.SetMasterVolume(val));
        if (bgmSlider != null)
            bgmSlider.onValueChanged.AddListener(val => AudioManager.Instance.SetBGMVolume(val));
        if (sfxSlider != null)
            sfxSlider.onValueChanged.AddListener(val => AudioManager.Instance.SetSFXVolume(val));
    }

    public void OpenPanel() { /* 顯示面板邏輯 */ }
    public void ClosePanel() { /* 關閉面板邏輯 */ }
}

四、實作步驟與 Component 配置
(註:所需圖片皆以匯入專案中)
Step 1: 掛載選單控制腳本
在 Hierarchy 面板點選 UI 面板父物件 SettingPanel，點擊右側 Inspector 最下方的 Add Component 按鈕，搜尋並新增 SettingsPanelManager 腳本。

圖三：搜尋並掛載 SettingsPanelManager

Step 2: 腳本欄位綁定 (Inspector Assignment)
將 SettingPanel 本身拖入 Floating Panel 欄位，並將在 SettingPanel 底下建立好的 UI Slider 拖入 Master Slider 欄位中。

圖四：SettingsPanelManager 欄位綁定結果圖

Step 3: 自訂像素錢幣 Handle 造型
預設的 Slider Handle 是一個白色小圓點，與像素風格極度不合。

1. 展開 Slider -> Handle Slide Area -> Handle。
2. 將 Handle 物件上的 Image (Script) -> Source Image 替換為我們的金幣圖片 money_0。
3. 勾選 Preserve Aspect 確保金幣不會因為邊框拉伸而變形。
   
   圖五：替換 Handle 圖片為 money_0 並勾選 Preserve Aspect

Step 4: 調整錢幣尺寸與視覺層級
在替換為金幣 Sprite 後，預設的 20x20 尺寸顯得非常微小且不明顯。 我們在 Handle 的 Rect Transform 中將 Width 與 Height 調整為適合的像素大小（如 Width: 150, Bottom/Height 微調），讓錢幣在畫面上更加醒目！

圖六：調整 Handle 的 Rect Transform 尺寸參數

五、踩坑紀錄與 Debug 經驗
在開發過程中遇到了幾個 UI 顯示問題，特別記錄下來給遇到類似狀況的朋友參考：

1. Scene 視窗看不到 Slider 物件？

• 原因：Scene 視窗攝影機視角拉得過近（放大過度），導致看到的紅格線其實是物件內部的極小區域。
• 解決方式：在 Hierarchy 選取 Slider 後，把滑鼠移到 Scene 視窗並按下鍵盤 F 鍵（Focus） 聚焦，或滾動滑鼠滾輪拉遠視角即可看到完整的 UI 配置。

2. 按下 Play 測試時 Slider 沒顯示或點擊扳手無反應？

• 原因：SettingPanel 面板在進入 Play 模式前的初始狀態沒有取消勾選（隱藏），導致開關邏輯判斷異常；另外 Slider 在 Hierarchy 的排序被選單底圖覆蓋。
• 解決方式：
  (1) 模式下將 SettingPanel 預設改為取消勾選（隱藏狀態）。
  (2) 將 Slider 物件拖動到 SettingPanel 子物件列表的最下方，確保 UI 渲染層級在最上層。

六、小結與 Git 紀錄
經過上述設定後，順利完成了像素風選單的拉桿音量調整功能！滑動金幣拉桿時能即時傳送 onValueChanged 訊號給 AudioManager 完成音量變更。
範例影片:

另外，程式碼與資源均已同步推送至 Git 分支：
#檢查修改狀態
1.git status

#加入暫存區並提交 Commit
2. git add .
3. git commit -m "feat: 重構 SettingsUI 面板底圖並完成像素錢幣 Slider 佈局"

#推送至遠端開發分支
4. git push origin refactor/audio-system