[UE5]ImGuiを導入する
概要
ImGuiとは、コードを少し書くだけで、
いい感じにレイアウトしたメニューを表示できる、フレームワークです。
本記事は、ImGuiの導入方法の紹介です。
今回使用するプラグイン
プラグイン自体はいくつかあるようですが、
今回はUE5で使用するというところで下記のプラグインを採用しています。
導入手順
- まずは前述のGithubからZipでダウンロードし、解凍します。
- 今回導入したいC++プロジェクトに、Pluginsフォルダを作成します。
※すでにある場合は、新規に作る必要がありません。 - 1で解凍したフォルダにImGuiというフォルダーが入っているので、それを2で作成したPluginsフォルダの下にもっていく。※プロジェクト名\Plugins\ImGuiとなるようにする
- ここでプロジェクトをビルドしなおします。
- プロジェクトを起動し、モジュールウィンドウを開きます。
- モジュールが認識されていることを確認します。
- 同様にプラグインウィンドウも開き、有効になっているかを確認します。
※上記画像のようにチェックが入っていれば、問題なし。
ImGuiのモジュール導入手順は以上です。
テキストを描画してみる
コンポーネントを適当なアクターにつけると、テキストを描画する形を作ります。
- まずはImGuiCommon.hを追加します。
#pragma once
//IMGUIモジュールが有効かどうか
#ifdef IMGUI_API
#define WITH_IMGUI 1
#else
#define WITH_IMGUI 0
#endif //IMGUI_API
//IMGUIモジュールが有効の時に、必要なincludeを行う
#if WITH_IMGUI
#include "ImGuiModule.h"
//他に追加したいImGui関連のincludeはここに追加していく
#include <imgui.h>
#endif //WITH_IMGUI
-
次にコンポーネントを新規作成します。
名前はDebugMenuDrawComponentにしました。 -
2で作ったコンポーネントにコードを追加していきます。
#include "DebugMenuDrawComponent.h"
//追加インクルード
#include "ImGuiCommon.h"
UDebugMenuDrawComponent::UDebugMenuDrawComponent()
{
PrimaryComponentTick.bCanEverTick = true;
}
void UDebugMenuDrawComponent::BeginPlay()
{
Super::BeginPlay();
}
void UDebugMenuDrawComponent::TickComponent(float DeltaTime, ELevelTick TickType, FActorComponentTickFunction* ThisTickFunction)
{
Super::TickComponent(DeltaTime, TickType, ThisTickFunction);
//テキスト表示
#ifdef WITH_IMGUI
ImGui::Text("Hello");
#endif //WITH_IMGUI
}
※コメントで「追加インクルード」・「テキスト表示」と記載されている場所のみが追加部分です。ヘッダーファイルは特に変更なし。
-
ここで一旦ビルドを行います。
-
UE5のエディタに戻り、新しくBlueprintを作成します。
クラスはActorです。※BP_DebugMenuActorとしました。
-
BP_DebugMenuActorを開き、コンポーネントを追加します。
-
BP_DebugMenuActorをワールドに配置します。
アウトライナーで配置されていることを確認 -
実行すると、Helloが表示されている。
以上で、簡単なテキスト表示だけですが実装することができました。
入力周り
ここまでの実装状況だと、ImGuiのデバッグメニューの開閉ができないと思います。
※入力が効かない。
ゲーム内の入力とデバッグメニューの入力を両立するには、
DebugMenuDrawComponent.cppのBeginPlayに以下のコードを追加します。
//デバッグメニューの入力を有効化
FImGuiModule::Get().GetProperties().SetInputEnabled(true);
//マウス入力と両立
FImGuiModule::Get().GetProperties().SetMouseInputShared(true);
日本語対応
日本語対応の仕方についてです。
ImGuiContextProxy.cpp(プラグイン側)にある、
FImGuiContextProxyコンストラクタに処理を追加します。
//~略~
//以下追加部分。IOは定義されているはず。
//クリア
IO.Fonts->Clear();
//フォントを追加
IO.Fonts->AddFontFromFileTTF("c:\\Windows\\Fonts\\meiryo.ttc", 18.0f, NULL, IO.Fonts->GetGlyphRangesJapanese());
//フォントビルド
IO.Fonts->Build();
//~略~
最後に
何度かお世話になっているImGuiですが、
ImGuiはレイアウトを整えたり、グラフを切り替えてイベントを実装したり、
という手間が省かれるので、Widgetでデバッグメニュー実装するよりストレス感じないです。
デザインにあまり凝らないのであれば、おすすめです。
※そもそもImGuiのデザインが結構好きです！
Discussion