目次
はじめに
注意
UE5.0.3の現在の情報です。
今後のアップデートによりUIや機能が変更される可能性があることをあらかじめご理解ください。
今回はメタルギア風にAIの反応に応じて表示するアイコンを作ってみたいと思います。
解説
①ウィジェットの作成
アイコンを表示するためのウィジェットを作成します。
コンテンツ右クリックからウィジェットブループリントを選択します。
ウィジェットブループリントの頭文字WBP_を付けて、WBP_NPCIconとしました。
適当にペイントソフトでアイコン用の画像を作成します。
素材は下に置いています。（商用不可）
▼？マーク
▼！マーク
そのままコンテンツにドラッグアンドドロップしてインポートします。
②ウィジェットブループリントの編集
パレットからImageと検索してドラッグアンドドロップします。
Canvas Panelでラップします。
ついでに名前をIconImageに変更しておきます。
Imageの詳細からアンカーを真ん中にします。
位置を0,0
サイズを512×512
Alignmentを0.5,0.5
に変更します。
アンビアランスに画像を適応してカラーなどを変更します。
③アニメーションを作成する
ただアイコンを出すだけだと味気ないのでアニメーションを付けます。
下のタブからアニメーションを押してアニメーションウィンドウを出します。
+を押してMoveIconという名前にしました。
トラックを押してIconImageを選択します。
IconImageのトラックからTransformを選択します。
スケーリングのYにキーを打ちます。
タイムライン上の赤いラインを移動して長さを0.1秒にしましょう。
0の時に0を0.1の時に1を打ちます。
同様にVisibilityのキーも追加します。
0の時にHidden、0.01と0.1にNotHit-Tastableにします。
プレイを押してアイコンがあるので再生して調整します。
イメージとカラーの変更をするためにバインドを押します。
グラフに移動します。
関数名をSetIconImageにします。
ReturnValueを変数に昇格します。
名前はIconDataとします。
④NPCキャラクターの編集
BP_NPC_Characterを開きます。
Widgetコンポジットを追加します。
Headのソケットを選択してサイズと位置を修正しましょう。
調整が終わったら、WBP_NPCIconを開いてIconImageのVisibilityをHiddenにして非表示にしましょう。
⑤ウィジェット制御関数の作成
ビヘイビアツリーとの制御はコントローラーで行っているのでそちらに作成します。
BP_CustomAIControllerを開きます。
関数の+を押してNPCWidgetControlとします。
インプットにSlateBrush型のIconDataとBool型のReverse、Bool型のNotDataSet（UseNowData）を作成します。
ウィジェットが存在するかチェックしてキャストします。
WBP_NPCIconは見やすいようにローカル変数に昇格しています。
アイコン用のデータを上書きするかどうかの判定を行います。
また、設定されたイメージ画像がない場合はアニメーションを再生しないように分岐します。
メモ
関数の中ではインプットに記述した内容をつながなくてもノードとして取得できます。
※ただしリネームした際には反映されないので注意！
ウィジェットからアニメーションの再生または逆再生を行います。
▼全体像
⑥アイコンを回転させる
このままだとアイコンは常にNPCの正面を向いてしまうので、改良します。
BP_NPC_Characterを開いてプレイヤーカメラを常にルックアットするように回転させます。
⑦タスクの作成と編集
ビヘイビアツリーからNPCWidgetControl関数を制御するタスクを作成します。
名前をBTT_ChangeIconとしました。
変数を４つ作成してそれぞれインスタンス編集可能にチェックを入れます。
次に画像のようにControllerからNPCWidgetControlを呼び出して変数をセットします。
⑧ビヘイビアツリーに組み込み
作成したタスクをビヘイビアツリーに組み込みます。
まずはランダム移動からです。
ここではアイコン非表示にする処理を行います。
左側はアニメーションを反転させるReverseフラグと、ここで登録したものをセットしない+既存のアイコンを使うためのNotDataSetにチェックを入れます。
もう一つはIconに何も設定させないものです。
これをすることで左のBTT_ChangeIconが再生されないようにします。
※BP_CustomAIControllerのNPCWidgetControlで分岐させている。
音のした場所へ移動するところです。
用意したQuestionアイコンを色は黄色っぽいものを指定しました。
最後にプレイヤーを追いかけるところです。
画像にExclamationと色は赤で登録しました。
▼全体像
実行してみましょう。
AIの動作に応じてアイコンが表示されるのを変更しましょう。
最後に
UE4やUE5向けの記事を書いています。
皆様の応援が投稿のモチベーションになりますので
コメントやTwitterのフォローなどしていただけるとありがたいです。
それではよきゲーム開発を。
