lime雑記

ゲーム開発、その他雑記。

トップ > Unity > 【Unity】Dear ImGuiの導入方法

【Unity】Dear ImGuiの導入方法

Unity Unity-ImGui
この記事でのバージョン

Unity 2021.3.8f1
UImGui 4.1.1

概要

UnityにDear ImGuiを導入する方法を紹介。

Dear ImGuiとは

ゲーム内で動作する、（主に）デバッグ機能作成ライブラリ。
GitHub - ocornut/imgui: Dear ImGui: Bloat-free Graphical User interface for C++ with minimal dependencies
以下のようなデバッグウィンドウが手軽に実装できる。
Gallery: Post your screenshots / code here (PART 1) · Issue #123 · ocornut/imgui · GitHub

UnityだとEditor拡張もあるが、ゲーム内で動作すること、実装のしやすさなどからこのDear ImGuiの導入はかなりおすすめできる。
ちなみにUnity標準機能にもImGuiという名前の機能があるが、それとは別物なので注意。

導入方法

Unity用ImGuiライブラリをインストール

先程のリポジトリはC++上で動くライブラリなので以下のUnity用に作成されたライブラリをインストールする。
github.com

PackageManagerから「Add package from git URL... 」を選択して以下を入力
https://github.com/psydack/uimgui.git


以下はURP用の設定になります。それ以外のレンダーパイプラインを使用している場合は上記のGitHubページを参照してください。

Rendererの設定（URP）

ImGui用のRendererDataを作成
Projectビューで右クリック->Create->Rendering->URP Universal Rendererをクリック

作成したRendererDataの「Add Renderer Feature」から「Render ImGui」を選択

UniversalRenderPipelineAssetのRendererListに先程作成したRendererDataを追加

カメラの設定（URP）

ImGui用のカメラを新しくシーンに作成
RenderTypeをOverlayにし、Rendererを先ほど作成したImGuiRendererに設定

MainCameraのStackに先ほど作成したImGui用カメラを設定
※MainCameraのRendererが2DRendererの場合CameraStackが使えないので、一度RenderTextureに描画してそれを通常のRendererで描画する、などの工夫が必要

UImGuiの設定

シーンに新しくオブジェクトを作成し、AddComponentでUImGuiコンポーネントを追加
・RenderFeatureに先ほど追加したRenderFeatureを指定
・Cameraに先ほど作成したImGui用カメラを指定
・PlatformTypeにInputManagerかInputSystemで使用している方を指定
・ShadersにDefaultShaderを指定
・StyleにDefaultStyleを指定

※DefaultShaderとDefaultStyleは最初からパッケージに入っていて右上の目のボタンを押すと出てきます

自作の処理を差し込む場所の実装

以下のコードを書いて適当なオブジェクトにAddComponentする。

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) {
    // ひとまずデモウィンドウを表示
    ImGuiNET.ImGui.ShowDemoWindow();
  }
}

再生するとデモウィンドウが表示される

上記のOnLayout関数に処理を書いていくことで自作のデバッグ機能などを実装することができる。
ウィンドウの出し方、その他パーツの書き方などはこちら。
limegame.hatenablog.com
limegame.hatenablog.com

日本語フォントへの変更方法はこちら
limegame.hatenablog.com