【UE5】ユーザ定義アセットのサムネイルをカスタムしよう！

サムネイルをカスタムしよう！ お手軽に！

C++で独自のアセットを作成すると、サムネイルが同一になってしまい 視認性が悪いです。
かといって個別にサムネイル画像を用意する… というのも手間がかかります。

この見栄えの問題をお手軽に解決しよう！ というのが記事の内容です。全体的にC++の話です。
こんな感じになります ↓

対処前 サムネイルでは見分けがつかない		対処後 サムネイルに文字や明度差があり見分けがつく
	→

実装

先にネタばらしをしてしまうと、Engineのソース UNeuralProfileRenderer::Draw() に似た実装があります。
本家の実装を見たい方は そちらからどうぞ。

参考：Engine内の IESProfile のサムネイル 左上にBrightnessの値が表示されている

では改めて、UTextureThumbnailRenderer をベースにして サムネイルに任意の文字列を書いてみましょう。
最低限のソースだけ抜粋します。

.h

UCLASS()
class UVrmAssetListThumbnailRenderer : public UTextureThumbnailRenderer
{
	GENERATED_UCLASS_BODY()

	// Begin UThumbnailRenderer Object
	virtual void GetThumbnailSize(UObject* Object, float Zoom, uint32& OutWidth, uint32& OutHeight) const override;
	virtual void Draw(UObject* Object, int32 X, int32 Y, uint32 Width, uint32 Height, FRenderTarget*, FCanvas* Canvas, bool bAdditionalViewFamily) override;
	// End UThumbnailRenderer Object
};

.cpp

void UVrmAssetListThumbnailRenderer::GetThumbnailSize(UObject* Object, float Zoom, uint32& OutWidth, uint32& OutHeight) const
{
	OutWidth = 128;
	OutHeight = 128;
}

void UVrmAssetListThumbnailRenderer::Draw(UObject* Object, int32 X, int32 Y, uint32 Width, uint32 Height, FRenderTarget* RenderTarget, FCanvas* Canvas, bool bAdditionalViewFamily)
{
    // 下地にサムネイル画像を使いたい場合は テクスチャアセットを指定する
	//UTexture2D *tex = nullptr;
	//Super::Draw(tex, X, Y, Width, Height, RenderTarget, Canvas, bAdditionalViewFamily);

    FVector2D Position(Width / 24, Height / 24);
    FCanvasTextItem TextItem(Position, FText::FromString("Hogehoge"), FSlateFontInfo(UEngine::GetMediumFont(), 28), FLinearColor::Black);
    TextItem.DisableShadow();
	TextItem.Draw(Canvas); // サイズ取得のため一度描画する

	{
        // 下敷き
        FVector2D TextSize = TextItem.DrawnSize;
    	FVector2D Padding(4.0f, 2.0f);
    	FVector2D BackgroundSize = TextSize + Padding * 2.0f;
    	FVector2D BackgroundPosition = Position - Padding;

    	FCanvasTileItem BackgroundItem(BackgroundPosition, BackgroundSize, FLinearColor(0.258, 0.539, 0.068, 0.9));
    	BackgroundItem.BlendMode = SE_BLEND_AlphaBlend;
        Canvas->DrawItem(BackgroundItem); // 下敷きを描画
    }

	TextItem.Draw(Canvas); // テキストを描画
}

StartupModule() 内でアセットとサムネイル描画を登録します。

.cpp

	virtual void StartupModule() override
    {
        UThumbnailManager::Get().RegisterCustomRenderer(UVrmAssetListObject::StaticClass(), UVrmAssetListThumbnailRenderer::StaticClass());
    }

結果 ↓

カスタムしたサムネイル

文字を書くことができました！
後は好みに応じて、文字を変えたり下地の絵や色を変更ください。

余談

UE5.5までは、サムネイルオーバーレイ (FAssetTypeActions_Base::GetThumbnailOverlay() )を利用することで、もっと手軽に実装できました。
UE5.6からはコンテンツブラウザのスタイルが変わり、サムネイル全体にオーバーレイできなくなりました。悲しい。

なお、エディタ引数 -ExecCmds="ContentBrowser.EnableNewStyle 0" を付けると、コンテンツブラウザが旧スタイルになり、従来のオーバーレイが使えるようになります。

スタイルを切り替えて利用する場面はほぼ無いと思いますが… 機能が用意されているのは 開発者としては有難いですね。

新スタイル（UE5.6以降の標準）	旧スタイル(UE5.5以前)

改めて見比べると 結構変わっていますね。

余談2

UE4の頃のカスタムアセットは、サムネイルにクラス名が表示されていました。デフォルト表示として便利でしたね。

UE4での カスタムアセットのサムネイル。懐かしい

まとめ

手軽にサムネイルがわかりやすくなりました。めでたしめでたし。
色々手を加えれば 細かく情報を追加することも可能です。
サムネイルに表示する文字列を、アセット自体に持たせて書き換え可能にする といった使い方も面白そうですね。

これらが参考になれば幸いです。

おしまい