Zenn
🐡

[UE5]ImGuiを導入する

2023/07/23に公開
#
ゲーム開発
ue5
tech

概要

ImGuiとは、コードを少し書くだけで、
いい感じにレイアウトしたメニューを表示できる、フレームワークです。

本記事は、ImGuiの導入方法の紹介です。

今回使用するプラグイン

プラグイン自体はいくつかあるようですが、
今回はUE5で使用するというところで下記のプラグインを採用しています。
https://github.com/IDI-Systems/UnrealImGui

導入手順

  1. まずは前述のGithubからZipでダウンロードし、解凍します。
  2. 今回導入したいC++プロジェクトに、Pluginsフォルダを作成します。
    ※すでにある場合は、新規に作る必要がありません。
  3. 1で解凍したフォルダにImGuiというフォルダーが入っているので、それを2で作成したPluginsフォルダの下にもっていく。※プロジェクト名\Plugins\ImGuiとなるようにする
  4. ここでプロジェクトをビルドしなおします。
  5. プロジェクトを起動し、モジュールウィンドウを開きます。
  6. モジュールが認識されていることを確認します。
  7. 同様にプラグインウィンドウも開き、有効になっているかを確認します。


    ※上記画像のようにチェックが入っていれば、問題なし。

ImGuiのモジュール導入手順は以上です。

テキストを描画してみる

コンポーネントを適当なアクターにつけると、テキストを描画する形を作ります。

  1. まずはImGuiCommon.hを追加します。
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

  1. 次にコンポーネントを新規作成します。

    名前はDebugMenuDrawComponentにしました。

  2. 2で作ったコンポーネントにコードを追加していきます。

DebugMenuDrawComponent.cpp
#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

}

※コメントで「追加インクルード」・「テキスト表示」と記載されている場所のみが追加部分です。ヘッダーファイルは特に変更なし。

  1. ここで一旦ビルドを行います。

  2. UE5のエディタに戻り、新しくBlueprintを作成します。
    クラスはActorです。※BP_DebugMenuActorとしました。

  3. BP_DebugMenuActorを開き、コンポーネントを追加します。

  4. BP_DebugMenuActorをワールドに配置します。
    アウトライナーで配置されていることを確認

  5. 実行すると、Helloが表示されている。

以上で、簡単なテキスト表示だけですが実装することができました。

入力周り

ここまでの実装状況だと、ImGuiのデバッグメニューの開閉ができないと思います。
※入力が効かない。
ゲーム内の入力とデバッグメニューの入力を両立するには、
DebugMenuDrawComponent.cppのBeginPlayに以下のコードを追加します。

        //デバッグメニューの入力を有効化
	FImGuiModule::Get().GetProperties().SetInputEnabled(true);
	
	//マウス入力と両立
	FImGuiModule::Get().GetProperties().SetMouseInputShared(true);

日本語対応

日本語対応の仕方についてです。
ImGuiContextProxy.cpp(プラグイン側)にある、
FImGuiContextProxyコンストラクタに処理を追加します。

ImGuiContextProxy
	//~略~
		
	//以下追加部分。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