main() blog

プログラムやゲーム、旅、愛する家族について綴っていきます。

【UE5】ImGuiを使ってみよう!

概要

ImGuiはC++でシンプルなGUIを構築できるGUIフレームワークです。
ゲームのデバッグ用のUIを作成するのに大変有用なフレームワークです。

github.com

UEでデバッグUIを実装するのにUMGなどで実装すると追加、拡張、メンテナンスが大変なことになるケースがあります。
UnrealImGuiを導入することでUEでもImGuiを使用することができるようになります。
UE用のImGuiとしてUnrealImGuiがgithubで公開されています。

環境

UnrealEngine 5.4.2

導入手順

githubにある大元のUnrealImGuiはUE5対応が行われていないようです。
フォークされているこちらでUE5対応が行われているので、こちらを使用して導入を進めてみます。
※正式には5.4には対応していないようです
※前提としてプロジェクトはC++で作成してください

github.com

こちらのページからzipファイルをダウンロード、解凍します。

UnrealImGui-master.zip  

プロジェクト以下のPluginsフォルダ(なければ作成)にImGuiというフォルダを作成します。
以下の様なフォルダ構成になります。

プロジェクト名\Plugins\ImGui  

その中に解凍したものをコピーします。
その状態でエディタを起動します。
以下のダイアログが表示されるのでリビルドを実行します。

ビルドが実行され、完了後にエディタが起動します。

モジュールの確認を行います。

プラグインの確認を行います。

有効になっていることを確認します。

これでプラグインの追加、登録は完了です。

確認

UnrealImGuiにはデモが用意されているので導入後に動作を確認することができます。
PIEなどで実行中にコンソールコマンドからImGui.ToggleDemoを実行します。

以下の画面が表示されればImGuiの導入が正しく行われていることが確認できます。
操作するためにはコンソールコマンドからImGui.ToggleInputを実行することでフォーカスの切り替えを行うことができます。

その中のDemo WindowでImGuiで実装できる様々デモを確認することができます。
こちらも参考にしてみると良いと思います。

実装

プロジェクト側にImGuiの実装を行っていきます。

プロジェクト側で使用するためにモジュールの依存関係を設定します。 これはプロジェクトにあるBuild.csに以下を追加します。

PrivateDependencyModuleNames.AddRange(new string[] { "ImGui" });

これでプロジェクト側でImGuiのモジュールが使用できるようになります。

参考

zenn.dev

pafuhana1213.hatenablog.com