UE5のブループリントで画像を呼び出したかった備忘録

目的

UnrealEngine5のウィジェットに、別ブループリントで指定した画像を貼り付けたかった。

より具体的に言うと、

ウィジェットブループリントで設定した画面のこの白い位置に、
ウィジェットブループリントとは別のブループリントクラスで指定した画像を表示したかった。

結論

ウィジェットの画像をis Valiable設定した状態で、Set Brush form Textureで画像をセットする。

画像を格納する変数の型をTexture 2Dにする。

ここが最重要だった。

POINT

変数の型に「image」というものがあって、Imageを格納するんだから変数型もImageだろうという先入観があった。これが間違いだったので注意。じゃあImage変数は何に使うのかは謎。

細かい前提

下リンクで作成した会話システムに顔グラフィック(立ち絵？)を入れたかった。

UE5で会話システムを作った備忘録HD2D風-その１

このシステムはブループリントが連鎖的になっていて、ざっくり言うと次のような流れである。

  1. ブループリントＡで会話文に必要な要素を含んだ関数Aを作成
  2. ブループリントAの子であるブループリントBで関数Aを呼び出し、必要な要素を書き込む
  3. ブループリントＡではブループリントBで書き込まれた会話文を処理し、ウィジェットブループリントCに設定された関数Cをターゲットとして書き込む
  4. 関数Cに対してブループリントBで書き込まれた内容を、ブループリントCで表示

１の「会話文に必要な要素」は最初の状態だと、

  • 話者
  • 台詞
  • 選択肢
  • 条件分岐用インデックス
    の４つがある。ここに顔グラフィック用画像を設定したかった。

実装

まずブループリントCに画像を貼り付けたい場所を設定した。

新たにサイズボックス、Imageを階層に追加し、大きさ・位置等を編集する。名前をW_FaceImageとした。
このとき、is Valiableには必ずチェックを入れる。

次に、上記でいう「関数C」にインプットピンを追加した。
関数Cはインプットピンに書き込まれた内容をウィジェットに反映させる関数である。
したがって、ここに画像用インプットピンを追加すれば別ブループリントから設定された画像をここで読み込むことができる。

名前をFaceImage、ピンタイプをTexture 2Dとした。

関数Cに画像をセットする旨のノードを追加する。

Set Brush from Textureを呼び出し、ターゲットにW_FaceImage、TextureにFace Imageを指定する。


MatchSizeはモノにより変えればいいと思う。

次に上記でいう「関数A」にインプットピンを追加した。
後々、関数AをブループリントBで呼び出し、そこで書き込まれた内容が関数Aに反映されて処理が行われる。

名前をSelected Face Image、ピンタイプをTexture 2Dとした。


これが関数Aに設定された「関数Cに書き込むノード」。
ターゲットはウィジェット(ブループリントC)であり、関数Aのインプット内容を関数Cに渡している様子が分かる。
ここに先ほど作成したFace Imageピンが追加されているので、Selected Face ImageをGetで呼び出す設定とする(画像最下部ノード)。

最後にブループリントAの子ブループリントであるブループリントBで画像を指定して終わりとなる。


Speaker、Dialigue等に加えて先ほど関数Aで新規作成したSelected Face Imageが増えている。
ここに好きな画像を指定する。

無事顔グラ(今回はテスト画像だけど)が表示された。めでたい！

まとめ

以上。お疲れさまでした。