Unity Dear ImGui - 基本使用教學

在上一篇文章中，我們介紹了如何導入 Dear ImGui 以及在 Unity 中進行基本設定與使用。
這篇文章將進一步說明如何透過兩種方式打開一個自訂視窗，並在視窗內加入可以互動的按鈕。
本文將展示以下兩種方法：

1. 透過快捷鍵
2. 透過 Navbar 按鈕

由於這邊文章有運用到中文字體，請搭配這篇:

• Unity Dear ImGui - 追加中文字體教學

---

1. 透過快捷鍵打開自訂視窗

我們可以利用 Unity 的 Input 監聽快捷鍵事件，來切換自訂視窗的顯示狀態。
以下範例示範如何使用 F1 鍵來切換自訂視窗，並在視窗中加入一個互動按鈕，點擊後更新按鈕計數器：

using UImGui;
using UnityEngine;

public class CustomWindowWithButton : MonoBehaviour
{
    // 用來控制自訂視窗是否顯示
    private bool showCustomWindow = false;
    // 互動按鈕的點擊次數
    private int buttonClickCount = 0;

    private void Update()
    {
        // 使用 F1 鍵切換自訂視窗的顯示狀態
        if (Input.GetKeyDown(KeyCode.F1))
        {
            showCustomWindow = !showCustomWindow;
        }
    }

    private void OnEnable()
    {
        UImGuiUtility.Layout += DrawCustomWindow;
    }

    private void OnDisable()
    {
        UImGuiUtility.Layout -= DrawCustomWindow;
    }

    private void DrawCustomWindow(UImGui.UImGui uImGui)
    {
        if (!showCustomWindow)
        {
            return;
        }

        // 繪製一個自訂視窗
        ImGuiNET.ImGui.Begin("自訂視窗 (快捷鍵開啟)");
        ImGuiNET.ImGui.Text("這是一個包含互動按鈕的自訂視窗！");
        ImGuiNET.ImGui.Text($"按鈕已點擊次數：{buttonClickCount}");

        // 當按鈕被點擊時，buttonClickCount 遞增
        if (ImGuiNET.ImGui.Button("點我一下"))
        {
            buttonClickCount++;
        }

        // 可以在此處加入更多 UI 元件
        ImGuiNET.ImGui.End();
    }
}

使用方式

1. 將上述程式碼掛在場景中的一個 GameObject 上。
2. 進入 Play Mode，按下 F1 鍵，即可開啟或關閉自訂視窗。
3. 在視窗中點擊 「點我一下」 按鈕，查看計數器數值的更新。

---

2. 透過 Navbar 按鈕打開自訂視窗

除了使用快捷鍵，也可以透過介面上的 Navbar 按鈕讓使用者切換自訂視窗。
以下範例示範如何在 Navbar 中新增一個選單項目，點擊後打開/關閉自訂視窗，且視窗中同樣包含互動按鈕：

using UImGui;
using UnityEngine;

using UImGui;
using UnityEngine;

public class NavbarWindowWithButton : MonoBehaviour
{
    // 用來控制自訂視窗是否顯示
    private bool showCustomWindow = false;
    // 互動按鈕的點擊次數
    private int buttonClickCount = 0;

    private void OnEnable()
    {
        UImGuiUtility.Layout += DrawNavbar;
        UImGuiUtility.Layout += DrawCustomWindow;
    }

    private void OnDisable()
    {
        UImGuiUtility.Layout -= DrawNavbar;
        UImGuiUtility.Layout -= DrawCustomWindow;
    }

    // 繪製 Navbar：在主選單列中新增 "工具" 選單，並在其中加入 "自訂視窗" 選項
    private void DrawNavbar(UImGui.UImGui uImGui)
    {
        // 開始繪製主選單列
        if (ImGuiNET.ImGui.BeginMainMenuBar())
        {
            // 在主選單中建立一個名為 "工具" 的子選單
            if (ImGuiNET.ImGui.BeginMenu("工具"))
            {
                // 在 "工具" 子選單中建立 "自訂視窗" 選項
                // 當選項被點擊時，切換自訂視窗的顯示狀態
                if (ImGuiNET.ImGui.MenuItem("自訂視窗"))
                {
                    showCustomWindow = !showCustomWindow;
                }
                // 結束 "工具" 子選單
                ImGuiNET.ImGui.EndMenu();
            }
            // 結束主選單列
            ImGuiNET.ImGui.EndMainMenuBar();
        }
    }

    // 繪製自訂視窗
    private void DrawCustomWindow(UImGui.UImGui uImGui)
    {
        // 如果自訂視窗沒有啟用，就直接返回，不進行繪製
        if (!showCustomWindow)
        {
            return;
        }

        // 開始繪製視窗，視窗標題為 "自訂視窗 (Navbar 開啟)"
        ImGuiNET.ImGui.Begin("自訂視窗 (Navbar 開啟)");

        // 在視窗中顯示說明文字
        ImGuiNET.ImGui.Text("這是一個包含互動按鈕的自訂視窗！");
        // 顯示目前按鈕的點擊次數
        ImGuiNET.ImGui.Text($"按鈕已點擊次數：{buttonClickCount}");

        // 建立一個按鈕，點擊後計數器增加
        if (ImGuiNET.ImGui.Button("點我一下"))
        {
            buttonClickCount++;
        }

        // 結束視窗繪製
        ImGuiNET.ImGui.End();
    }
}

使用方式

1. 將上述程式碼掛在場景中的一個 GameObject 上。
2. 進入 Play Mode，在畫面上方的主選單列中，點擊 「自訂視窗」 按鈕，即可切換視窗的顯示狀態。
3. 在視窗中點擊 「點我一下」 按鈕，計數器將會更新。

---