先日公開した動くHPゲージをもっと触っていこうという内容です。
この記事で作ったゲージを元にいろんなアレンジや機能を試していきます。
UE4の最新バージョン 4.27 がリリースされましたが、この記事シリーズが終わるまでは 4.26 で進めます。
ゲージ全体の長さを変更できるようにする
キャラのLVアップや、アイテムゲットなどでゲージの上限が増えるとプレイに対しての報酬になりモチベーションのアップにつながります。
まず準備として、キャンバスに配置したゲージの長さを変数に入れて基本の長さとします。
キャンバスに配置した状態を取得してそのまま変数に保存します。
サイズを入れておく変数は、Get Size ノードにある Return Value ピンから 右クリックして作るとラクです。型は Vector2D になります。
この仕組みのおかげで、キャンバスに置いたゲージの形はいつでも自由に感覚的にいじっても大丈夫になります。画面デザインの調整のたびにブループリントを調整する必要はありません。
Slot as Canvas Slot ノードは Image が持ついくつかのパラメータの中でも Canvas Slot というカテゴリにアクセスするときに使うキャスト系(型変換)ノードです。
Scale で長さを変更するというのは、画面に描画する際に掛け算してから描くということになります。その掛け算の元のサイズが、 Canvas Slot のSize になるのです。
ということで、サイズを変更するためのカスタムイベントを用意します。
growGaugeと命名
引数として、最新のHPと、最新の増分を受け取るようにしています。
増分、増えた分は、パーセント(%)で管理する想定。
ゲージは Image を2枚重ねているので、それぞれを処理しますが、Set Sizeノードには同時にいくつもつなぐことができます。。
真ん中左付近の見慣れないノードは ↓ こうやって作ります。
いろいろ計算して、最後にゲージの長さをセットする関数をつないでいます。ゲージの上限が増えるだけなので、ゲージの長さが変化しない想定です。
Sizeを変更すると、ゲージの基本の長さを伸ばすことになるので、Scaleで縮めているだけのゲージは一緒に伸びてしまいます。そこで下敷きのみが変化しているように見せています。
例えば ゲージが60%の状態で、長さが 20%増えた場合。
この補正処理はあくまでも表示バグ対策です。
ゲームの仕様次第で変わってきますが、ゲージ全体の長さが変わったとき、その時点でのHPの量が変わらないのであれば、見た目に長さが変わるのはおかしいという理屈です。
ということで、テスト用のレベルブループリントも、もう少しちゃんとしようと思います。
前回の記事で MyHP という名前の Float型の変数で、ゲージの長さを比率で管理していましたが、ゲーム的に扱いにくいので、Integer型の変数を使った管理方法に変更します。
最大値も必要なので、2つの変数を用意します。HP と MaxHP と命名。
右下の方にあるGet Gauge HP ノードは関数です。
内容は ↓ このようになってます。この後 数か所で利用するので関数化しました。
引数を受け取らず、計算結果を返すだけの内容なので、ピュア型というカタチにしています。
ピュア型にすると、ちょっとだけノードの流れ(白いライン)が短くできます。
カーソルキーの増減処理のところも変更します。
ここまで改造で、前回の動作はキープできました。
次にようやく今回のネタの部分、ゲージの長さを変えるためのトリガーになる処理。
キーボードの Bキーを押すと 50ずつHPが増えていき、その都度ゲージWidgetに補正後の割合と、ゲージの増分を割合にして渡しています。
このゲージの上限が増える表現については、ゲームの仕様によってさまざまなスタイルがあります。
いつどのタイミングで増えたことを見せるか、というのが設計のときに大事になります。
ちなみに ゲージの最大値が増えると、安心感が増える一方で難易度が下がったり、緊張感が減ったりするので、用法容量にはご注意ください。
今回はここまで
次回は見た目を工夫してみようと思います
ゲームの数だけゲージデザインがあるので助けになるかわかりませんが、ヒントになれれば幸いです。
ではでは
すてきなゲージライフを!
おまけ
UMGのチュートリアルでゲージといえば、プログレスバーを使ったゲージが紹介されていることが多いかと思います。
すでにこのProgressBarコンポーネントでUIを作られている場合でも、前回の記事を利用できます。
前回の記事ではImage のスケーリングで長さを変更していました。
その際の関数内の編集のみでサクッとプログレスバーに差し替えることができます。
↑これを
↓こうします
編集完了。