SPARKCREATIVE Tech Blog

https://www.spark-creative.jp/

Slate を使用時に知っておきたいこと(テスト実装まで)

初めに

こんにちは、エンジニアの佐藤陽介です。

業務で Slate を初めて見みたときに理解に時間が掛かった記憶があるので、新しく Slate を理解する人の一助になるような記事にしたいと考えています。
処理を確認する時に注視する箇所の共有、エディタにて機能実装を行うの2点について記載致します。
今回の記事で使用するバージョンは UE5.4.3 になります。

Slate とは

スレートは完全にカスタマイズ可能でプラットフォームに依存しない UI フレームワークで、例えば Unreal Editor やインゲーム UI の独自の楽しみや効率性など、ツールやアプリケーションのユーザーインターフェイスの構築にあわせた設計となっています。スレート宣言記法を簡単にデザイン、レイアウト、及びスタイルコンポーネントを作成する期のと組み合わせることによって、UI の作成や UI 上でのイテレーションが簡単にできます。

スレート UI ソリューションが、ツールやアプリケーションのグラフィックスユーザーインターフェースをとても簡単に統合し、これらをすばやく相互作用させます。
(公式ドキュメント参照)

Slate 確認方法

Slate を確認するにあたり、公式の機能説明を読んで直ぐに理解できなかった自分が確認の際に注視している箇所についての記事になります。
Slate 機能(引数設定)、Slate 構成(配置設定) の2点を確認できれば、Slate を使用することができます。

Slate 機能

SLATE_BEGIN_ARGS ~ SLATE_END_ARGS マクロ範囲内の値が SNew を行う場合に、設定可能な引数一覧になります。
新しく使用する Slate に対して変更可能な設定を確認することができます。
SNew は C++ 側から Slate を生成する際に使用します。

Slate 構成

SNew 時に設定された引数の使用方法、Slate の配置が Construct(const FArguments& InArgs) 関数にて設定されております。
UEEditor を起動して見た目の配置、呼ばれるコールバックが想定と異なる場合に確認します。
InArgs に Slate 機能にて追加された引数が入っているためメンバ変数として値を取得可能です。
Construct 内では InArgs から値取得した値を SNew した各 Slate に機能を渡して各機能を充実させています。

便利機能

Slate Widget の確認を行うにあたって便利な機能を簡単に紹介いたします。
詳細が気になる方は参考URLからご確認ください。

Widget Reflector

Slate Widget の構成、リソース確認、パフォーマンス確認等が可能です。
紹介になるので起動から確認までは記載しますが詳細は省かせていただきます。

確認方法
ツールバー > ツール > デバッグ > ウィジェットリフレクター

ヒットできるウィジェットを選択後に、UEEditor に配置されている Slate Widget に対してマウスホバーすると構成された Slate Widget がツリー形式で表示

SlateViewer

Slate の使用感、見た目の確認に使用した経験があります。
それ以外にもタブが複数あり、アイコンの一覧確認も行うことが可能です。

確認方法
下部ツールバー > トレース > Unreal Insights(セッションブラウザ)

Unreal Insights Session Browser 下部ツールバー > ⋁ >Starship Test Suite

SlateViewer表示

補足
VisualStudio 等から SlateViewer をビルドして \Engine\Binaries\Win64\SlateViewer.exe 実行でも確認可能

実際に書いてみる

ここからはエディタ拡張の内容を含みます。
SDockTab を作成し適当な Slate を配置します。
今後この記事を見た方が機能実装する際に下地となる部分だけ対応して今回は終わりとします。

事前準備

エディタ側に処理を実装するため、エディタモジュールを追加します。
モジュール追加は話のメインではないので省きますが、参考URLに載せておくので必要な方は確認してください。

追加したエディタモジュールの SampleProjectEditor.Build.cs に今回使用するモジュールを追加します。
以下プロジェクトは SampleProject となります。
更に下記処理は SampleProjectEditor 側の実装になるため、ランタイムに影響はありません。

ツールバーから DockTab 生成

下記処理を追加すれば画像のように何も表示されていない DockTab を追加することができます。
ツールバー > ツール > SampleDockTab

SampleDockTab表示

コマンドクラス

ツールバー > ツール > SampleDockTab のボタン用に TCommands を継承したコマンドクラスを追加

ドックタブクラス

表示する DockTab の設定を決めるクラスを追加

エディタモジュール

FSampleProjectEditorModule にて ツールバー > ツール にボタン表示、ボタンが実行されたら DockTab 表示を登録します。

表示した DockTab に引数、構成追加

下地として DockTab が用意できたので実際に引数、構成追加してカスタマイズします。
ボタンの表示名変更、ボタンを押した際のイベント追加を行います。
下記処理を追加したあとに画像のようにボタンが追加されます。

変更点

終わりに

ここまで、対応できれば今後のエディタ拡張を求められた場合に対応できると思います。
自分の備忘録含め、これから触れようという方に向けて Slate について書かせていただきました。
Slate について多くの記事がありますが、初めて触れた時に理解しずらさを感じた経験があります。
今でこそ Slate に対して知識がついたので読めますが、自分と同じ経験をした方の一助となれたなら幸いです。
ここまでお付き合いくださりありがとうございました。
また次の記事でお会いしましょう。


参考URL
Unreal Engine のスレートの概要 | Unreal Engine 5.4 ドキュメンテーション | Epic Developer Community
UE4 モジュール追加手順のメモ書き #C# - Qiita
[UE4] Widget Reflectorを使ってリソースや設定を調べよう #UnrealEngine - Qiita
【UE5】エンジン内にコッソリあるSlateサンプル集(SlateViewer)を見る方法 - ぼっちプログラマのメモ