[UE4] Blueprintのグラフを画像として出力するプラグイン GraphShutter の配布・導入・使用法について

はじめに

UE4でBlueprintを他の人と共有するとき、皆さんはどうしていますか。言葉で説明する、プロジェクトで配布する、BlueprintUE.comを使うなど方法は色々ありますが、やはりスクリーンショットを使うことが多いかと思います。
スクリーンショットを使う利点としては、UE4上でのノードの表示内容を視覚的に届けられる点が挙げられます。一方でノードの量が多いと、それを収めようとグラフ全体をズームアウトしてしまい、結果的にノードの名前も読み取れないぐらいまで縮小されてしまうことがあります。私は、これを避けるためにグラフのスケーリングを変えず、部分的にスクリーンショットを撮って、画像編集ソフトで結合するという方法をとっていました。これは手軽さからは程遠い作業で、いつも簡易化できないか考えていました。
今回は、それらの問題を解決するために、「任意のグラフを画像として出力する」プラグインを開発しました。このプラグインを使えば、どれほどノードが多くても、ショートカット1つで、グラフを見やすい大きさの画像として出力することができ、画像編集の手間を省くことができます。

注意事項

本プラグインは現在開発が始まったばかりで、多くのバグと問題を抱えています。また、この記事を書いている段階では、「グラフを画像として出力する」ということが実現可能であることを実証するための最低限の機能しか実装されていません。そのため、動作が非常に不安定であり、本番環境での使用を推奨しません。また、このプラグインを用いて発生した損害等に対する責任を製作者は一切負いません。

配布

次のリンクから、プラグインのバイナリをダウンロードできるようにしました。
https://1drv.ms/u/s!AqklsC13CiMggaMKGgdDT4C8p0wUHA

導入

1. ダウンロードしたzipファイルを解凍します。
2. プラグインを使用したいプロジェクト内に「Plugins」フォルダを作成します。

図1 Pluginsフォルダを作成する

3. Pluginsフォルダの中に解凍したGraphShutterフォルダをコピーします。

図2 Pluginsフォルダ内にGraphShutterフォルダをコピーする

4. UE4を起動してメニューの[Edit][Plugins]からPlugin Managerを起動し、Otherカテゴリ内にあるGraphShutterプラグインがEnabledになっていれば導入は完了です。

図3 Pluginsに表示されるGraphShutter

使用法

はじめに、機能まとめておきます。次の手順でノードを画像化します。

1. GraphShutterを起動する
2. 画像として出力したいノードをコピーする（Ctrl＋C）
3. GraphShutter内にコピーしたノードを貼り付ける（Ctrl+V）
4. グラフを画像として出力する（Ctrl+S）
5. ScreenShotsディレクトリに画像が出力されている

一つずつ手順を確認していきます。
まず、メニューの[Window][GraphShutter]からGraphShutterを起動します。

図4 GraphShutterを起動する

次に、コピーしたいノードをCtrl+Cショートカットによってコピーします。ここではレベルブループリントで作成した、図5ようなノードをコピーします。

図5 コピーするノード（レベルブループリント）

次に、起動しておいたGraphShutterウィンドウ内で、Ctrl+Vショートカットによってノードを貼り付けます。

図6 GraphShutterにノードを貼り付ける

画像として出力したいノード全てをGraphShutter内に貼り付けたら、Ctrl+Sショートカットによって、ノードを画像として出力します。出力に成功すると、次のようなダイアログが表示されます。

図7 画像化に成功した後に表示されるダイアログ

出力した画像は、プロジェクトフォルダの[Saved][ScreenShots]内に保存されています。

図8 出力した画像ファイルの場所

おわりに

実装の背景

おかずさんの記事で、FWidgetRendererがSWidget（スレートの基底クラス）をRenderTargetに描画できることを知り、「SWidgetを継承したクラスなら何でも描画できるのなら、SGraphEditorを描画すればグラフ全体を描画できるかも？」と考えたのが基本的なアイデアでした。この場を借りて御礼申し上げます。

実装には、エンジン改造ではなくプラグインを用いました。これは多くの人が手軽に使えることを考えたためですが、エンジン改造ならばGraphShutterウィンドウを用意せずとも、ダイレクトに選択したノードを画像化する、みたいなことが出来るのかもしれません（あるいはプラグインでも実現可能なのかもしれませんが、どちらも私にはまだ分かりませんでした）。操作が二度手間で少々面倒ではありますが、開発を続けて便利なものに出来れば良いなと考えています。

今後の予定について

まずはUIを使いやすさや、動作の安定性を上げる必要があると考えています。
将来的には、ビヘイビアツリー、アニメーションブループリント用ノードの貼り付けにも対応したり、任意で画像内にT3D形式のデータを書き込み、GraphShutter間で画像を読み込めるようにして、画像のグラフを再構築できたら面白いかも？ と考えています。

ソースコード公開について

ソースコードの公開をしたいのですが、現状、エンジンコードのあっちこっちの実装を真似て作っている部分（エンジンコードを変更しないで実現するために、非公開クラスをほぼそのまま持ってきたり等）が一部あり、これがUE4のEULAにある「クックされていないソース形式で配布される「エンジンのツール」」に抵触している可能性があるので、今回は公開しませんでした。


この記事は次のバージョンで作成されました。
Unreal Editor(4.16.2-3514769+++UE4+Release-4.16)
Microsoft Visual Studio Community 2017 Version 15.1 (26403.7)