目次
はじめに
前回の続きです。
▼この記事でできること
解説
①ウィジェットの作成
コンテンツ右クリックからユーザーインタフェース→ウィジェットブループリントを作ります。
名前はWBP_ItemInfoとしました。
ウィジェットを開きアイテム情報のウィジェットのデザインを編集します。
Ap●xLegendsを参考にパネルを組み合わせて作成しました。
※記事の最後に詳細なスクショをはっておきますので参考になれば幸いです。
情報を変更したいもの。（背景色・説明文・名前など）にはIsVariableにチェックを入れます。
はじめから表示されてほしくないので階層の一番上のパネルの表示をCollapsedにします。
②ST_ItemInfoに追加
ST_ItemInfoにアイテムアイコンの指定を忘れていたので追加します。
Texture2D型のItemImageを追加しました。
③ウィジェットに表示系のイベントを追加
グラフからカスタムイベントSetItemInfoとHiddenItemInfoを作成します。
アクタ型の変数CacheTargetActorを作成して、以下のような判定ノードを組みます。
キャッシュされている場合は同じかどうか判定して、されていない場合はセットする内容です。
関数UpdateItemInfoを作成します。
名前を変更します。
アイコンを変更します。
説明文を変更します。
カテゴリーを変更します。
背景色を変更します。
最後にヒット判定なしで表示します。
イベントグラフから呼び出します。
非表示につなぎます。
④BP_FirstPersonCharacterの編集
作成したウィジェットを表示します。また変数化しておきましょう。
インタフェース呼び出しの後に追加します。
実行してみましょう。
アイテムを見ると画面の中央に情報が表示されます。
反応範囲はItemHitCollisionの大きさで決まります。
判定がシビアなときは大きくしてみましょう。
⑤アイコンを変更する
フリーアイコンサイトから素材をゲットします。
適当に加工して、、
それぞれ適応します。
⑥調整+表示位置をアイテムに依存させる
WBP_ItemInfoを開きます。
下の空白が大きすぎるので修正しました。
さらにウィジェットを動かしてかっこよくしてみましょう。
階層の親を選択してTranslationを変更します。
原点(0,0)がアイテムの中心になるので少し右上になるように数値を変更しました。
グラフを開きウィジェットの位置がアイテムの位置になるようにワールド・スクリーン座標の変換を行います。
実行して追従することを確認しましょう。
⑦ついでにアニメーションしてみる
切り替わるときにちらつくことがあるのでアニメーションを適応して、ごまかすついでにいい感じにします。
ウィジェットを開いてアニメーションを作成します。
名前はActiveAnimationとしました。
親のCanvasを選択してトランスフォームにキーを打ちます。
0.15秒で原点から展開するようなアニメーションにしました。
イベントグラフからこのアニメーションを再生すれば完成です！
ウィジェットデザイン詳細
最後に
UE4やUE5向けの記事を書いています。
皆様の応援が投稿のモチベーションになりますので
コメントやTwitterのフォローなどしていただけるとありがたいです。
それではよきゲーム開発を。
