Unity Dear ImGui - 基本介紹與導入教學
2025-02-17 21:39:24

啟發我的原文如下:

【Unity】Dear ImGuiの導入方法 — lime雑記

打算寫一系列中文且符合我們 Unity 專案環境的版本,因為似乎比較少看到中文相關的資訊

甚麼是 Dear ImGui?

IMG

Dear ImGui 是一款即時模式 GUI 函式庫,因為靈活高效而受到廣泛使用,從知名大廠到各種獨立製作,開發過程中都曾採用它來製作內部工具和測試介面
(使用 Dear Imgui 的遊戲清單)

這篇文章會使用 psydack/uimgui : 一個為 Unity 開發的 Dear ImGui 封裝 (wrapper),簡化了在 Unity 中使用 Dear ImGui 的流程,並支援
HDRP / URP。

以下是我們團隊的遊戲 《Iron Vulture 鐵兀鷹》 中的實際運用影片:
Watch the video


使用版本

* UImgui 版本:4.1.1 (#feature/multiplatform分支)
* Unity 版本:2022.3.4f1

安裝方式

  1. 開啟 Package Manager 中的「+」按鈕,然後選擇「Add package from git url…」

  2. 使用以下 URL:

    1
    https://github.com/psydack/uimgui.git#feature/multiplatform

IMG


產生並設定 RendererData

  1. 在 Project 視窗中選擇:Create → Rendering → URP Universal Renderer
    IMG
  2. 在剛剛產生的 Renderer Data 中,點擊 Add Renderer Feature 並選擇 Render Imgui
    IMG
  3. 將產生的 Renderer Data 加入到 UniversalRenderPipelineAsset(預設檔案名稱為 UniversalRP)的 RendererList 中
    IMG

Camera 設定 (URP)

  1. 在場景中新增一個 Camera(此案例中命名為 Imgui Camera)
  2. 設定如下:
    • Render Type 設為 Overlay
    • Renderer 設為剛剛建立的 ImguiRenderer
    • Culling Mask 設為 Nothing
      IMG
  3. 在 MainCamera 設定:
    • Renderer 選擇 ImguiRenderer
    • Stack 選擇剛剛建立的 Imgui Camera
      IMG

場景中設定 UImGui

  1. 在場景中建立一個新的 GameObject
  2. 為此物件新增組件:UImGui
  3. 在組件中進行設定:
    • Render Feature 指定剛剛建立的 Render Feature
    • Camera 指定剛剛建立的 Imgui Camera(非 MainCamera)
    • Shader 指定 DefaultShader
    • Style 指定 DefaultStyle
      IMG

注意:若找不到 DefaultShader 和 DefaultStyle,請點擊右上角的小眼睛圖示,顯示 Package 中的資源。
IMG


撰寫一個 MonoBehaviour 來測試

  1. 新增一個 MonoBehaviour,並將以下程式碼掛載在場景中的物件上:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    using UImGui;
    using UnityEngine;

    public class ImGuiManager : MonoBehaviour
    {
    private void OnEnable()
    {
    UImGuiUtility.Layout += OnLayout;
    }

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

    private void OnLayout(UImGui.UImGui uImGui)
    {
    // 顯示 Demo 視窗
    ImGuiNET.ImGui.ShowDemoWindow();
    }
    }
  2. 進入 Play Mode 時,即可顯示 Demo 視窗
    IMG

建議接著看這兩篇文章:

2025-02-17 21:39:24
下一頁