プログラマーの尾関です。
今回はEditor Utility Widget でサムネイル画像を表示する方法について紹介します。
- 動作確認バージョン：Unreal Engine 5.3.2
Editor Utility Widget でサムネイル画像を表示する方法
サムネイル画像を表示するメリット
例えば、Unreal Engine には「モジュラーキャラクター」という、複数のパーツ（スケルタルメッシュ）を組み合わせて新しいキャラクターモデルを作成するという機能があります。
これらのパーツを選ぶエディットツールを Editor Utility Widget で作成するとします。
その場合に単にアセット名で選ばせるよりも、アセットの見た目がわかるサムネイルがあるとわかりやすいツールになると思います。
例えば以下のようなエディット画面です。
PowerPointで作っただけなのであまりエディット画面っぽくないですが、動作仕様としてはそれぞれのサムネイルを選択してパーツを選び、それによってキャラクターを作る…というイメージとなります。
他のアイデアとしては、テスト用のレベルを選ぶ機能を Editor Utility Widget で実装して、レベルのサムネイルを表示してわかりやすくする…といった使い方が考えられます。
サムネイル画像を表示する方法
では実際に Editor Utility Widget でアセットのサムネイル画像を表示してみます。
Editor Utility Widgetの作成
コンテンツブラウザの何もないところを右クリックして「エディタユーティリティ > エディタユーティリティウィジェット」を選びます。
今回のWidgetで使用するコンテナは “Stack Box” としておきます。
各コンテナについての簡単な説明は以下のとおりです。
- Stack Box: 横に並べる、または縦に並べるときに使うコンテナ
- Grid Panel: 縦横規則的に並べたいときに使うコンテナ
作成したEditor Utility Widget の名前は “EUW_Test” としました。
サムネイルWidgetの配置
EUW_Testをダブルクリックで開いて、Asset Thumbnail Widget を追加します。
この Widget を使うことで、サムネイルを表示できます。
Blueprintでサムネイルを設定する
右上の「グラフ」をクリックして、グラフを編集します。
変数のところから “AssetThumbnailWidget” をドラッグ＆ドロップします。
そして Set Asset By Objectノードでサムネイル表示したいアセットを選びます。
これで Widget にサムネイル画像を表示できます。
動作確認
EUW_Testを右クリックして「エディタユーティリティウィジェットを実行」を選びます。
Editor Utility Widget でサムネイルを表示できました！
補足：アセットのサムネイルを変更する方法
補足としてアセットのサムネイルを変更する方法について書きます。
3Dアセットのサムネイル変更方法
3Dアセットのサムネイルはコンテンツブラウザの右上にある「設定」をクリックして、「サムネイル編集モード」を選びます。
するとサムネイル上でマウス左ドラッグすることで、サムネイルのカメラが回転できます。
良い感じのアングルにできたら、コンテンツブラウザ右下の「編集完了」をクリック。
ローアングルのかっこいいサムネイルになりました。
レベルのサムネイル変更方法
レベルのサムネイルは「アセットアクション > サムネイルをキャプチャ」で変更できます。
「現在のレベルの表示状態」でキャプチャされたサムネイルに変更できました。
おしまい
3Dモデルを直接表示するなどすれば同じようなことができますが、開発用のWidgetとして扱うだけであれば、サムネイル表示のほうが簡単に実装できてオススメです。
以上、アセットのサムネイルを Editor Utility Widget で表示する方法でした。
この情報が Editor Utility Widgetでツールを作るのに役立てれば幸いです。