目次
はじめに
前回の続きです。
以前同じような内容の記事を書いているのでこちらと似たような実装になります。
ただしAp●x風になるよう多少変更を加えています。
▼この記事でできること
解説
①InventoryUIの作成
ウィジェットブループリントを作成しWBP_Inventoryという名前を付けました。
Ap●x感のある透過画像をペイントソフトで作成します。
imageを組み合わせてAp●x風のUIを作成します。
②インベントリ画面への切り替えアクションの登録
ファイル→プロジェクト設定→インプットから
アクションマッピングにInventoryを追加しました。
③インベントリ画面への切り替え表示の実装
BP_FirstPersonCharacterのイベントグラフを開きます。
Inventoryを管理する管理する関数InventoryControlを作成します。
インベントリを表示している最中は通常のHUDを表示しないようにします。
イベントグラフに戻り作成した関数を呼び出します。
タブキーでインベントリ画面が開くのを確認しましょう。
インベントリ画面でアイテムを拾ったり射撃できるので無効化します。
ただし移動はしてほしいので細かい仕様に適応できるようなフロー管理用のマクロFlowControlを作成しました。
NAND演算 （お互いがTrueの場合のみFalseになる）を使用することで実現します。
動作に関係するアクションノードすべての直後に配置します。
UpdateShowItemInfoでは以下の内容を追加してInventory中の表示を無効化します。
Inventory中に行えるアクションにのみチェックをいれます。
移動を行うノード↓
実行してみて移動のみできることを確認しましょう！
④＋α1 UIを動かしてリッチにみせる
某ゲームではPadに接続したときに動作する演出なのですが、カーソルの位置を参照してUIが全体的に動きます。これを実装してみましょう。
WBP_Inventoryを開きCanvasPanelを途中に追加して名前をMovePanelに変更した後、IsVariableにチェックをいれます。
この時ブラーと上の黒いバーを対象に含めないようにします。
これでMovePanelを動かしたらUIが全体的に動くようになります。
ここまで出来たらあとはカーソルの座標を取得するノードを組みます。
インベントリのイベントグラフの移動しましょう。
アイテム情報の表示と同じ感じでマウスの位置を渡します。
原点を参照しているのでMovePanelの位置を原点にします。
実行するとマウスカーソルに追従するようになりました。
ここまで出来たらあとは簡単です。
元の位置とマウスの位置の相対位置から、、
移動係数をかけて元の位置に足します。
移動係数を変更することでカーソルの移動量に対する反応のしやすさを変更できます。
あとは制限をかけましょう。
後はトランスフォームに流すだけです。
クランプの範囲はDEBUGノードにつなぐと元のデータがでてくるので、環境に合わせて範囲を調整しましょう。
実行してカーソルに対応した移動を行っているのを確認できたら成功です！
⑤＋α2 カーソルアイコンを変更してみる
カーソルをウィジェットを使って置き換えることができます。
せっかくなので動かせるようにしましょう。
透過素材を描きます。
ウィジェットWBP_CustomCursorを作りました。
サイズをCustomにして80×80にしました。
0.5秒で360度回転するアニメーションをつくり、カーブからリニアにします。
作られたときに呼ばれるイベントからPlayAnimationをします。
この時ループするようにNumLoopstoPlayを設定します。
最後にBP_FirstPersonCharacterのInventoryControl関数にカーソルを変更する処理を加えて完了です！
実行してみましょう！
オリジナルカーソルに変更されていたら完成です！
次回はこのインベントリ画面にアイテムを表示していきます。
最後に
UE4やUE5向けの記事を書いています。
皆様の応援が投稿のモチベーションになりますので
コメントやTwitterのフォローなどしていただけるとありがたいです。
それではよきゲーム開発を。
