こんにちは、株式会社Leon Gameworksの遠藤です。

今回は、指定したテクスチャをピクセル化するツールを作成します。

完成ツール

0：動作環境

本記事はUE5.7.2を基に執筆しており、画面のスクリーンショットはエディタの言語設定を「英語」として撮影しています。

なお、本記事で作成するプロジェクト一式は、以下よりダウンロード可能です。

今回のプロジェクトデータ

1：ツールの見た目を作成

まずはツールの見た目を整えていくため、Editor Utility Widgetアセットを作成します。

Widgetの階層は画像のように組み立てていきます。

上から順に設定用のDetails View、変換用のボタン、プレビュー用のイメージを配置しました。

「Texture」と「Pixel」という変数を追加し、さらに「Pixel Converter」というカテゴリを追加します。

［Pre Construct］イベントでDetails Viewの［Set Object］ノードを呼んで自身（Self）を指定し、Details Viewでプロパティを表示します。

2：ピクセル化マテリアルを作成

次に、テクスチャをピクセル化するマテリアルを作成していきます。

新規マテリアルアセットを作成し、［Material Domain］を「User Interface」に、［Blend Mode］を「TranslucentGreyTransmittance」に変更します。

ノードは画像のように繋げます。

UVを指定のピクセル値で分割してテクスチャに渡しています。ここでは、ピクセル値とテクスチャだけパラメータ化しておきます。

3：ツール上でのプレビュー

ツール上でピクセル化した結果をプレビューできるように組んでいきます。

ツールの下部で変換前（Before）と変換後（After）を表示できるようにします。

プレビューを更新する「UpdatePreview」という関数を作成し、画像のように変換前、変換後のImageを更新する処理を組みます。

Details Viewの詳細から「On Property Changed」イベントを作成します。

「Pre Construct」と「On Property Changed」の末尾に「Update Preview」を追加します。

値を変更するとプレビューされるようになりました。

4：テクスチャの出力

最後に、ピクセル化したテクスチャをアセットとして出力する処理を作成します。

まずは、ピクセル化した結果を貼り付けるレンダーターゲットを作成します。コンテンツブラウザでレンダーターゲットのアセットを作成します。

レンダーターゲットについては公式ドキュメントを参照ください。
https://dev.epicgames.com/documentation/ja-jp/unreal-engine/creating-textures-using-blueprints-and-render-targets?application_version=4.27

Texture Render Target型の変数を作成し、デフォルト値として作成したアセットを割り当てます。

「SetupRenderTarget」という関数を作成して、まずは画像のようにPixelConverter用マテリアルのDynamic Material Instanceを生成し、パラメータを渡します。

その後の処理で変数のレンダーターゲットを初期化し、関数の戻り値として生成したDynamic Material Instanceを返します。

Convertボタンの「On Clicked」イベントを追加し、作成した「SetupRenderTarget」関数に繋ぎます。

レンダーターゲットの更新を待つため、1フレーム挟んだ後、生成したDynamic Material Instanceを使ってレンダーターゲットに描画します。

最後に、レンダーターゲットを基にテクスチャアセットを生成します。

「On Clicked」イベントの全体図はこのようになりました。

これでツールの完成です。実行してみましょう。

5：まとめ

今回はピクセル化する処理にしましたが、マテリアル部分を変更すればテクスチャを様々なかたちで加工するツールとして応用できるので、ぜひ活用していただけたらと思います。

本記事で作成したプロジェクト一式は、以下よりダウンロード可能です。

今回のプロジェクトデータ