UEを学ぶ「UIの表示_2_UMGを画面に表示する」

実際にUIを画面上に出していきます。

 

youtu.be

 

今回はキャラクターに紐づける形で作る。

まずは、必要な情報を表示したwidgetを用意。

f:id:happyherpy:20220412230913p:plain

続いて、

自身のキャラクターをクリックして

アウトライナのThirdPersonCharacterを選択。

項目右部の下線が引かれているリンクからBPを開く。

 

f:id:happyherpy:20220412231120p:plain

 

開いたキャラクターのBPで

イベントBeginPlayからノードを伸ばし

create widgetで新規ウィジェットを作成する。

新規ウィジェットのクラスには、先ほど用意しておいた

表示したいwidgetを設定します。

f:id:happyherpy:20220412231426p:plain

それだけだと「画面に表示する」という処理がなされていないため、

「Add to Viewport」で画面上に表示を行う。

 

※ちなみに動画中では、別の手法としてAdd to Player Screenを紹介していた。

 Add to Viewportでうまくいかない場合は使うといいんじゃない?、

 という程度の説明だったが…

f:id:happyherpy:20220412231822p:plain

docs.unrealengine.com

プレーヤー専用のセクションで、ウィジェットをゲームのビューポートに追加します。

これは、ビューポートのプレーヤーの部分にのみウィジェットを表示する必要がある

分割画面ゲームで役立ちます。

 

とのこと。

マリオパーティIt Takes Two

など、複数人が1画面で遊ぶゲームで使うんだろう。

 

◆UIのアンカー設定

f:id:happyherpy:20220412233249p:plain

画面の比率が変わった時に、アンカーを設定していないと

UIの位置が崩れてしまう。

アンカーはスロットから設定することができるので

基本的にやっておいた方がお得。

 

という感じで、UIの画面表示が行えた。

次回は実際に値が変動するようにする。

 

---

おまけ

youtu.be

 

WidgetComponentを使うことで

3D空間上にUIを置くことができる。

 

方法はシンプルで

・Actorをフィールドに配置

・該当のActorの詳細から「コンポーネントを追加」しWidgetを追加する

・詳細からWidgetClassから表示したいWidgetを選択する

で画面上に表示される。

後は回転角度を調整してやれば

フィールド上に配置できる。

 

この時、Widget > ユーザーインターフェース > Space

がWorld になっているが Screen にすることで常に画面に向いた

HPバーを出したりできるのだ。