4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

UnrealEngineのデバッグUIをImGuiではなくSlateIMで作る

4
Last updated at Posted at 2025-12-20

はじめに

UnrealEngine AdventCalender19日目の記事です。
みなさんUnrealEngineで開発しているとき、デバッグ機能は何で作っていますか?
エディタ上ならEUW?インゲームならUMG?Slate?
どれもデバッグ機能の開発に使うには作るのが面倒だったり、作った後のメンテナンスが大変ですね。

デバッグ機能はコードでスラスラお手軽に書きたい。色んなソフトウェアに組み込めてノウハウも使いまわしたい。
そんな要求を叶えてきた、OSS ImGui があります。
なんと、これをUnrealEngine上で使えるようにしてくれた UnrealImGui がOSSとして公開されています。
みんなお世話になったのではないでしょうか。

ただ更新は既に止まってしまいサポートしているのは4.26系とImGui自身のバージョンも1.74となっています。
最近はフォーク先のリポジトリでUE5対応されたものを使用することになっています。
ただフォーク先も無数にあり、果たしてどれを使ってみたらよいのやらと悩むこともありました。

会社によっては、OSSが使用禁止やGithub自体が禁止されていることもあるでしょう。
UnrealEngine自体がImGuiを組み込んでくれるか、コードを書いて手軽にデバッグ機能を作れるプラグインがあればいいのになぁ。

そんなことを思っていたら、ついに SlateIM という新しいプラグインが UE5.6 から追加されていました。

Creating Debug Tools with SlateIM | Unreal Fest Stockholm 2025 の動画が公開されるまで全く気付いていなかったのですが、今回このSlateIMについて調べてみます。

検証環境 UE5.7.1

導入方法

プラグインで提供されているので、プラグインのウィンドウを開きSlateIMで検索してチェックをするだけ!
お手軽です!
Experimentalな点には注意しましょう。
image.png

サンプル

3つのサンプルが用意されています
image.png
Cmdから入力するとそれぞれウィンドウが表示されます。

SlateIM.ToggleSlateStyleBrowser

SlateIMで使用できる見た目の一覧です。
デバッグUI作成する上で機能に合う物を探しましょう
image.png
image.png

SlateIM.ToggleTestSuiteViewport

GameViewport上に表示されるウィンドウです。
image.png

SlateIM.ToggleTestSuiteWindow

エディタの外でもどこにでも表示できるウィンドウです。
レコーディング 2025-12-20 132947.gif

サンプルコード

サンプルのソースコードは
Experimental/SlateIM/Source/SlateIM/Private/Misc/SlateIMExamples.h
Experimental/SlateIM/Source/SlateIM/Private/Misc/SlateIMExamples.cpp
にまとまっています。

FSlateIMTestWidgetクラスがデバッグUI内の表示を全て行っているのでボタンやリストやレイアウトの書き方を参考にするとよいでしょう。

// ボタンとか数値入力とかテキストとか
SlateIM::Button(TEXT("Close"));
SlateIM::CheckBox(TEXT("CheckBox"), bChecked);
SlateIM::SpinBox(InputInt, 0, 100);
SlateIM::Text(TEXT("こんにちは世界"));
SlateIM::EditableText(EditText);

image.png

// タブとかこんな感じ
SlateIM::BeginTabGroup("TabGroup");
SlateIM::BeginTabStack();
SlateIM::BeginTab("Tab1");
SampleWidget();
SlateIM::EndTab();
SlateIM::BeginTab("Tab2");
SampleWidget();
SlateIM::EndTab();
SlateIM::BeginTab("Tab3");
SampleWidget();
SlateIM::EndTab();
SlateIM::EndTabStack();
SlateIM::EndTabGroup();

image.png

使って見てよかったところ

サンプルを読みながら書き試していて、SlateIMが良いと思った点はUnrealEngine特有の型と相性が良いところです。
特にテキストは、FStringやFNameがそのまま使えるので、
ImGuiではテキスト入力にchar配列の文字バッファを作成して固定長の扱いでしたが、SlateIMではFStringプロパティをそのまま渡せます。

SlateIM::EditableText(EditText); //これだけで文字入力

日本語もそのまま表示できます。
ImGuiではフォントファイルをバイナリにしたり、実行時に読み込んだりと一手間ありましたが不要です。

おわり

ImGuiではエンジンとの組み合わせで思うように書けなかったところが手軽に書けるようになった点がよいです。
ImGuiでは文字列周りはTEXTマクロやTCHAR_TO_ANSIマクロを使っていましたが、SlateIMではFStringやFNameそのままになりました。
ImGuiでは日本語を表示するのにも一手間必要でしたが、SlateIMではそのまま日本語が出せます。

現状ゲームパッド対応を対応はされていないとのことですが、今後対応されれば実機での使い勝手もよくなると思います。
これからのデバッグUI作成はImGuiではなくSlateIMをまずは使ってみるとよいのではないでしょうか?

まだ Experimental なのでバグや破壊的変更もあるので注意は必要です。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?