HUDメッセージの仕掛けで画像を表示 | UEFN

2025年6月3日

前書き

UIとしてプレイヤーに画像を表示する場合、UEFNでは様々な方法が用意されています。ある数値を基準にアニメーションさせたり、ゲージを動かしたり、そんな複雑なことをせずに「画像だけ表示したい」ひと向けの記事となります。

画像のインポート

UEFNで画像ファイルを扱うためには、エディター上で「インポート」という作業を行う必要があります。

インポートする方法は大きく分けて二つあり、一つ目は「インポート」のボタンを押してファイル選択のウィンドウを出し、そこから対象のファイルを選択。

もう一つは、Windows Explorerを開きコンテンツブラウザに対してドラッグする方法です。どちらでも最終的な結果には影響がないので、やりやすい方法でインポートしましょう。

正常にインポートされると、コンテンツブラウザ上でアセットとして表示されるはずです。この形式になれば、UI上やマテリアルなどで素材として使える準備が完了となります。この状態の画像ファイルは「テクスチャ」としても呼ばれているため、この機会に覚えておきましょう！

標準搭載のテクスチャ

ちなみにUEFNでは、よく使われるアイコンなどはインポートしなくても使える素材として用意されています。FortniteフォルダのTexturesフォルダなどを覗いてみると、意外と種類が用意されてたりするのでネット上で探す前にFortniteフォルダから探すってのもおすすめです。

警告

ちなみに、画像のファイルが2の累乗でない場合、このような警告が表示されるはずです。

この場合、おとなしく画像ファイルを2の累乗に変更するか、テクスチャを開き「テクスチャグループ」を「UI」に変更すると警告が出なくなるはずです。

3Dモデルなどに表示するテクスチャは読み込みの負荷などに考慮してこのような仕様となっているのですが、UIに関しては無視できるようになっています。

ウィジェット作成

ということで、ここからはHUDメッセージで画像を表示するために「ウィジェットブループリント」という形式で画像の表示を設定していきます。

ウィジェットブループリントは、コンテンツブラウザで右クリックをし「ユーザーインターフェース > ウィジェットブループリント」で作成できます。

ウィジェットの種類を選択するウィンドウが出てきますが、今回は「User Widget」を選択します。すると、ファイルが作成されアセット名を決めるよう言われるので、わかりやすい名前を入力してアセットの作成は完了です。

アセットをダブルクリックすると、このような画面が表示されるはずです。まずは表示位置とサイズを決めたいので「キャンパスパネル」をパレットから選択し、中央にドラッグして配置します。階層のパネルにキャンパスパネルが表示されていれば正常に配置されている証拠です。

では、次にコンテンツブラウザに行き、対象の画像をドラッグしてキャンパスパネル上に配置します。うまくいけば、ウィジェットブループリントのウィンドウの中央で画像が自由に動かしたりサイズ変更ができるようになっているはずです。

位置や画像サイズを調整する場合、画像の中央をドラッグして動かすか、四辺の点を動かしてサイズ調整する方法と、詳細パネルから直接いじって変更する二種類があります。詳細パネルの方が細かい数値を入れられるので、画像の比率なども正しく調整できるので、今回は重要そうなパラメータを簡単に紹介します。

アンカー

キャンパスパネルのどの位置を基準に位置を決めるかの項目です。左上を選べば、そこからの右にどれだけずらすか、下にどれだけずらすかなどの調整ができるようになります。よくわかんないのであれば左上のままでも大丈夫ですが、例えばプレイヤーがHUDのスケールを設定で変更していた場合、アンカーの位置を基準にサイズが変更されます。なので、中央上とすればサイズ変更が起こっても常に中央上を基準に小さくなったり大きくなったりするので、気になる方はこの辺も試してみるのがオススメです。

ただ、何度も言いますがよくわからなければ左上で大丈夫だと思います。

位置X/Y

文字通り表示する位置を調整する項目です。

サイズX/Y

画像の表示サイズを調整します。「コンテンツに合わせてサイズを変更する」にチェックを入れるとこの項目は無効となり、「アビアランス > ブラシ > 画像サイズ」の値が優先されるようになります。

アライメント

画像サイズを調整した場合に、どの点を基準にするかの項目です。デフォルトでは0.0/0.0ですが、この状態でサイズ変更をすると右下に向かって大きくなったりするはずです。もし「1.0/1.0」とすれば右下が基準となるため、サイズ変更をすると左上に向かって大きくなったり、「0.5/0.5」とすれば中央が基準となるため全方向に向かって大きくなったりします。

コンテンツに合わせてサイズを変更する

「アビアランス > ブラシ > 画像サイズ」の値を基準に画像のサイズを決めるようになります。

HUDメッセージに設定

ということで、ウィジェットブループリント側の設定が完了したら、HUDメッセージに反映する設定を行います。

HUDメッセージ内に用意されている「HUDウィジェット」の下矢印をクリックすると、このような一覧が表示されるはずです。ここから先ほど作ったウィジェットの名前を選択すると、HUDメッセージに先ほどのウィジェットが登録されます。もし、ウィジェット数が多くて見つからない場合は、HUDウィジェットに対してコンテンツブラウザからドラッグして持ってくるか、左矢印のアイコンをクリックすると現在コンテンツブラウザで選択中のウィジェットブループリントが反映されます。