みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

HPゲージをいろいろいじってみよう ー 成長するゲージ

 先日公開した動くHPゲージをもっと触っていこうという内容です。

 

limesode.hatenablog.com

この記事で作ったゲージを元にいろんなアレンジや機能を試していきます。

 

UE4の最新バージョン 4.27 がリリースされましたが、この記事シリーズが終わるまでは 4.26 で進めます。

 

 

ゲージ全体の長さを変更できるようにする

キャラのLVアップや、アイテムゲットなどでゲージの上限が増えるとプレイに対しての報酬になりモチベーションのアップにつながります。

まず準備として、キャンバスに配置したゲージの長さを変数に入れて基本の長さとします。

キャンバスに配置した状態を取得してそのまま変数に保存します。

f:id:hiyokosabrey:20210820233859p:plain

サイズを入れておく変数は、Get Size ノードにある Return Value ピンから 右クリックして作るとラクです。型は Vector2D になります。

この仕組みのおかげで、キャンバスに置いたゲージの形はいつでも自由に感覚的にいじっても大丈夫になります。画面デザインの調整のたびにブループリントを調整する必要はありません。

 

Slot as Canvas Slot ノードは Image が持ついくつかのパラメータの中でも Canvas Slot というカテゴリにアクセスするときに使うキャスト系(型変換)ノードです。

 

Scale で長さを変更するというのは、画面に描画する際に掛け算してから描くということになります。その掛け算の元のサイズが、 Canvas Slot のSize になるのです。

f:id:hiyokosabrey:20210821102851p:plain



ということで、サイズを変更するためのカスタムイベントを用意します。

growGaugeと命名

f:id:hiyokosabrey:20210821011813p:plain
引数として、最新のHPと、最新の増分を受け取るようにしています。

増分、増えた分は、パーセント(%)で管理する想定。

 

ゲージは Image を2枚重ねているので、それぞれを処理しますが、Set Sizeノードには同時にいくつもつなぐことができます。。

 

真ん中左付近の見慣れないノードは ↓ こうやって作ります。

f:id:hiyokosabrey:20210821004126p:plain

いろいろ計算して、最後にゲージの長さをセットする関数をつないでいます。ゲージの上限が増えるだけなので、ゲージの長さが変化しない想定です。

f:id:hiyokosabrey:20210821004943g:plain

Sizeを変更すると、ゲージの基本の長さを伸ばすことになるので、Scaleで縮めているだけのゲージは一緒に伸びてしまいます。そこで下敷きのみが変化しているように見せています。

例えば ゲージが60%の状態で、長さが 20%増えた場合。

f:id:hiyokosabrey:20210821010602p:plain

 

この補正処理はあくまでも表示バグ対策です。

ゲームの仕様次第で変わってきますが、ゲージ全体の長さが変わったとき、その時点でのHPの量が変わらないのであれば、見た目に長さが変わるのはおかしいという理屈です。

 

ということで、テスト用のレベルブループリントも、もう少しちゃんとしようと思います。

前回の記事で MyHP という名前の Float型の変数で、ゲージの長さを比率で管理していましたが、ゲーム的に扱いにくいので、Integer型の変数を使った管理方法に変更します。

最大値も必要なので、2つの変数を用意します。HP と MaxHP と命名

f:id:hiyokosabrey:20210821130802p:plain

右下の方にあるGet Gauge HP ノードは関数です。

内容は ↓ このようになってます。この後 数か所で利用するので関数化しました。

f:id:hiyokosabrey:20210821131021p:plain

引数を受け取らず、計算結果を返すだけの内容なので、ピュア型というカタチにしています。

f:id:hiyokosabrey:20210821131302p:plain

f:id:hiyokosabrey:20210821131504p:plain

ピュア型にすると、ちょっとだけノードの流れ(白いライン)が短くできます。

 

カーソルキーの増減処理のところも変更します。

f:id:hiyokosabrey:20210821132108p:plain

ここまで改造で、前回の動作はキープできました。

 

次にようやく今回のネタの部分、ゲージの長さを変えるためのトリガーになる処理。

f:id:hiyokosabrey:20210821132819p:plain

キーボードの Bキーを押すと 50ずつHPが増えていき、その都度ゲージWidgetに補正後の割合と、ゲージの増分を割合にして渡しています。

f:id:hiyokosabrey:20210821133609g:plain

 

このゲージの上限が増える表現については、ゲームの仕様によってさまざまなスタイルがあります。

いつどのタイミングで増えたことを見せるか、というのが設計のときに大事になります。

ちなみに ゲージの最大値が増えると、安心感が増える一方で難易度が下がったり、緊張感が減ったりするので、用法容量にはご注意ください。

 

 

 今回はここまで

次回は見た目を工夫してみようと思います

 ゲームの数だけゲージデザインがあるので助けになるかわかりませんが、ヒントになれれば幸いです。

 

ではでは

すてきなゲージライフを!

 

  

 

 

 

 

おまけ

UMGのチュートリアルでゲージといえば、プログレスバーを使ったゲージが紹介されていることが多いかと思います。

f:id:hiyokosabrey:20210821092126p:plain

f:id:hiyokosabrey:20210820224840p:plain

すでにこのProgressBarコンポーネントでUIを作られている場合でも、前回の記事を利用できます。

前回の記事ではImage のスケーリングで長さを変更していました。

その際の関数内の編集のみでサクッとプログレスバーに差し替えることができます。

 

f:id:hiyokosabrey:20210820225422p:plain

↑これを
↓こうします

f:id:hiyokosabrey:20210820225246p:plain

編集完了。

 

f:id:hiyokosabrey:20210820230005g:plain