K.Y.さん、しんちょくどーですか?

仕事や趣味で知ったこと、つまずいたことを書いています

【UE5】Widget の編集画面を複数開いて、デザイナー画面とグラフ画面を並べて作業する方法

UE でアセットを編集する際、通常は同じアセットに対して 1 つの編集画面しか開けません。
しかし、自前の処理を用意することで同じアセットでも複数の編集画面を開くことができます。

ここでは、エンジン改造なしで同じアセットに対して複数の編集画面を開く実装例を解説します。
この実装を利用することで、例えば、 Widget の編集時にデザイナー画面とグラフ画面を同時に表示して作業ができるようになります。

注意点

UE は基本的に同じアセットの編集画面は 1 つしか開けない設計になっています。

これから紹介する実装はこの設計を無視しているため、うまく動作しなかったり、予期せずクラッシュする可能性があります。利用する際は自己責任でお願いします。

また、「同じような機能がすでにある」や「ここの処理は危険かもしれない」などのアドバイスがあればぜひ教えていただけると嬉しいです。

作業環境

  • UE5.4
  • C++ 必須

実装に必要なスキル

  • C++ のプロジェクトを作成できること
  • C++ の細かいことは分からなくても、ソースコードを編集できること

実装目標と手順

実装目標

目標は、 Widget のアセットアクション(アセットを右クリックすると表示されるメニュー)から、新規の編集画面を開くことができるようにすることです。

下の動画のような挙動を目指します。

youtu.be

実装手順

Build.cs の編集

最初に、エンジン側の「アセットの編集画面を開く処理」を使用できるようにします。
そのため、 [プロジェクト名].Build.cs の PublicDependencyModuleNames に必要なモジュールを追加します。

追加するコードは下記のとおりです。

PublicDependencyModuleNames.AddRange(new string[] {
    ...
    "AssetDefinition" // ★ ここを追加
});

このまま進めても動作するので問題はないですが、この機能はエディタ専用のためエディタ用のモジュールに追加するのが理想です。
ですが、エディタ用モジュールの作成は今回の実装とは別の話になるので解説を省きます。

アセットの編集画面を開く処理を BP に公開

C++ 側に UBlueprintFunctionLibrary を継承したクラスを追加し、「アセットの編集画面を開く処理」を BP からでも使用できるようにします。

追加するコードは下記のとおりです。

#pragma once

#include "AssetDefinition.h"
#include "AssetDefinitionRegistry.h"
#include "AssetRegistry/AssetData.h"
#include "Kismet/BlueprintFunctionLibrary.h"

#include "MyBlueprintFunctionLibrary.generated.h"

UCLASS()
class UMyBlueprintFunctionLibrary : public UBlueprintFunctionLibrary
{
    GENERATED_BODY()

public:
// アセットの編集画面を開く処理
UFUNCTION(BlueprintCallable)
static void OpenNewEditorForAsset(const FAssetData& AssetData)
{
        if (const UAssetDefinitionRegistry* AssetDefinitionRegistry = UAssetDefinitionRegistry::Get())
        {
            if (const UAssetDefinition* AssetDefinition = AssetDefinitionRegistry->GetAssetDefinitionForAsset(AssetData))
            {
                FAssetOpenArgs OpenArgs;
                OpenArgs.OpenMethod = EAssetOpenMethod::Edit;
                OpenArgs.Assets = { AssetData };
                AssetDefinition->OpenAssets(OpenArgs);
            }
        }
    }
};
アセットアクションから編集画面を開けるようにする

ここからはエディタを起動して実装を進めます。

BP を作成

BP を作成し、親クラスに AssetActionUtility を指定します。
親クラスを AssetActionUtility にすることで、 BP 内に作成した関数が自動でアセットアクションへ追加されます。

作成した BP の名前は BP_OpenNewEditorForAsset としておきます。

関数を追加

BP_OpenNewEditorForAsset に関数を追加します。

関数名は OpenNewEditor としておきます。
ここで設定した関数名がアセットアクションに表示されます。

そして、関数の詳細で「エディタで呼び出す」がオンになっていることを確認します。

関数内にノードを組む

OpenNewEditor 関数の中身を以下の動作になるようにします。

  • 選択中のアセットを対象に OpenNewEditorForAsset ( C++ 側に用意した関数)を呼び出して編集画面を開く

下の画像を参考にしてノードを組み立ててください。

動作確認

きちんと動くか確認を行います。

まず、適当に Widget を作成しておきます。
その後、下記の操作を行い同じ Widget の編集画面が 2 つ開けば OK です。

  1. コンテンツブラウザで Widget を右クリック
  2. スクリプト化されたアセットアクション > Open New Editor を押す

  3. 編集画面が開く
  4. 1 ~ 3 の手順をもう一度繰り返す

補足

今回作成したアセットアクションは、 Widget 以外にも使用できます。
BP やデータテーブルでも複数の編集画面を開けることは確認しました。

ただし、レベルやテクスチャなど他のアセットでは編集画面が 1 つしか開かない、もしくはエラーが出る場合がありますのでご利用の際はご注意ください。

参考資料


記事の内容ついて、誤字脱字、内容の誤り、感想などありましたら気軽にコメントしていただけると嬉しいです。(このブログでも SNS でも歓迎です。)