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

注意:若找不到 DefaultShaderDefaultStyle,請點擊右上角的小眼睛圖示,顯示 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
下一頁