前回の記事でいろいろ見た目をアップさせる小技を紹介しましたが、今回はいろいろ動きのあるものを入れたものを紹介していきます。
あくまでも一例にしかならないのですが、いくらかヒントになれば幸いです。
先の記事からの続きとなっていて、値を変える関数や表示のテストについては解説は省いていますので、いきなりこの記事からだとわかりにくい箇所があると思いますので、過去記事のリンクを貼っておきます。
HPゲージをいろいろいじってみよう ー 成長するゲージ - みつまめ杏仁
HPゲージをいろいろいじってみよう ー 見た目を工夫する - みつまめ杏仁
INDEX
ダメージを受けると揺れるやつ
揺らすためのカスタムイベントを用意します。
UMGのタイムラインでアニメーションを作成した場合、以下ようになります。
他のアニメーションと被る場面があると、気軽にタイムラインアニメーションを使えないということもあるかもしれません。ということでノードでランダムな動きを作ってみます。
ひとくちにランダムな揺れというと、ランダム揺らし警察に職質されそうなのでビビリながら書くのですが、実際いろんなアルゴリズムや手法があって、結局のところこだわりポイントの差がすべてのような気はしています。
ということで今回は円を使ったランダム座標です。
矩形の範囲内の座標をランダムにチョイスする方法だと、シンプルですが、原点からあまり動かない可能性があります。ある程度原点から離れた位置にぶっ飛んでほしいという気持ちがあったので強制的に中心から離そうと考えて円の動きに決めました。
サインとコサインに渡しているのは ラジアンです。ラジアンは円1周で 2π なので -3.14～3.14 でランダム値をゲットしています。0～6.28 とかでも同じになります。
角度(Degree)に変えることもできます。
サイン、コサインノードに掛け算しているのは半径に相当します。サイン、コサインは基本的に -1 ～ 1 の値を返すので、そのままだと小さすぎるのを大きくして使っています。ここを加減することで、揺れ幅が調整できます。
UMGで位置を変えるのは2種類の方法があります、元の位置に戻すことを想定すると Canvas Slot の Position を変えるのではなく、 Render Transform の Translation を使うのがベスト。
これについては画像付きで解説している過去記事を貼っておきます limesode.hatenablog.com
上に伸びてる赤いラインは、いつものアイツ、 Set Timer by Eventノードです。
一定回数揺らすと終了するようにしたいので、回数をカウントする Int型の変数を用意して利用します。
このカスタムイベントをゲージの長さを変更する際に呼び出される関数に追加します。
減らすときだけ揺らしたいので、このイベント呼ぶ側にその選択をさせるため、カスタムイベントにBoolean（ブーリアン型）のピンを追加。
テストの際にレベルBPからこのイベントを呼び出しているので、カーソルキーの左を押したときだけ True にします。
揺れるゲージは以上です
こんな揺れで満足できないという方はぜひいろんな手法を試す冒険に出かけてみてください。
一応オマケとして、配列を使った揺れの一例を紹介します。
XY座標の2軸を扱うので、Vector2D型の変数を配列で用意します。
この配列から順次取り出してやります。
配列の数と、カウント数の判定に注意。
これでランダムならではの不安定さはなくしつつタイムラインを使わなくてもいい感じにできます。
この配列に、若干のランダム値を加えると連続した際にワンパターン感が減らせます。
配列から取り出した値に -3.0 ～ +3.0 の揺らぎを与えるカタチになります。
バフ・デバフ等でエフェクトが乗るやつ
ゲージに影響がある ステータス異常であることをプレイヤーにわかりやすく伝えるための表現として古くから親しまれているやつです。
その昔、シェーダーがまだ使えなかったころは、数種類のパーツを適宜差し替えたりしていました。
ナウい今はモダンに１パーツでやってみます。
今回作った状態変化対応は 毒状態と自動回復の2種。
色だけだと伝わりにくいので、テクスチャを用意しました。
サイズはちょっと小さめに 64x64px シームレスになっています。
Photoshopだとパターンプレビュー機能を使うと作りやすくなります。
エンジンにインポートして GrayScale として扱います。
ゲージのカラーについては、前回の記事でも紹介したカーブアトラスを使ってゲージのカラーを３本用意して使っています。
キモになるのはマテリアル。
（※ゲージのMAX値が伸びない想定です）
Panner ノード使って常時スクロールアニメーションをさせています。
Multiplyノード は ピクセルの値を 掛け算します。白＝1.0 黒＝0.0
白は変化しません。
Add ノードはピクセルの値を加算します。黒は変化しません。
この 2つのカラーを振り合分けているのが Lerp (Linear Interpolate)ノード。
ScalarParameterノードをつないで、 0 か 1 を受け取るようにします。
通常時のカラーとの切り替え。
これも Lerp ノードのお世話になってます。
ScalarParameterで 0～1.0 で切り替えます。
ゲージの長さは、Step ノードを利用して可変できるようにします。
このパターンはマテリアルを使うゲージの場合よくお世話になってます。
3つのパラメータ(ScalarParameterノード)を仕込みました。
TypeSwitch ・・・ 0=デバフ / 1=バフ
Fade ・・・ 通常ゲージとのフェード
Value ・・・ ゲージの長さ
フェードアニメーションを用意します
UMGのタイムラインからマテリアルのアクセスはちょっと分かりにくい操作になります。
アニメーションを追加→① して適当にリネーム →②
ゲージ本体の Image をヒエラルキーから選んだ状態で ＋Track ボタンを押す →③
選んだゲージ本体の Image の名前が出てくるので選択 →④
選ばずに +Track ボタンを押すとこうなります。
All Named Widget にマウスオーバーすると一覧が出るので、そこから選択してもOK。
選んだ Image が追加されるので、右にある＋Trackボタンをクリック →⑤
Materialsの Beush.Brush Material を選択 →⑥
トラックが追加されるので同様に右にある ＋Parameterボタンをクリック→⑦
マテリアルのパラメータ一覧が出てくるので、Fade を選択 →⑧
これでようやくタイムラインにキーが打てるようになりました。
Details（詳細）タブから数値を触れないので、このタイムラインエディタからキーを編集します。
キャンバスの編集はここまでになります。
さっそくWidgetブループリントに組み込んでいきます。
マテリアルをゲージ本体の Image にセットしたら、ブループリントからマテリアルにアクセスするために、ダイナミックマテリアルインスタンスを作るようにノードをつなぎます。
Return Value ピンから変数に昇格(Promote to Variable)しておきます。
バフ・デバフがかかった際に呼び出されるカスタムイベントを用意します。
マテリアルのパラメータをセットするだけのイベントです。継続する系の演出については、発動時のタイムラグは不要なので即時見た目をチェンジします。派手にアピールする場合は、トッピング的に煙やスパークなどのエフェクトを乗せるといい感じになります。
2種類しかないので、ひとまずブーリアン型の入力を受け取るようにしています。
Select Floatノードで、True なら 1.0、 False なら 0.0 になるようにしています。
あとは バフ・デバフが解除された際のフェードアニメーションを再生するカスタムイベントを用意したら編集完了です。
ゲージWidgetができたので、テストしてみます。
レベルブループリントでキー入力をトリガーにします。
バフ・デバフを切り替えるためのイベントを２つ用意するのが面倒だったので、ブーリアン型の変数を一つ追加して、フラグとして利用することにします。
Ｘキーを押すたびに、バフとデバフが切り替わります。
Ｚキーを押すとデフォルトの見た目に戻ります。
表現したい種類が増えるとそれなりに対応が変わりますが、マテリアルを改造してパラメータを増やすと、より汎用的に扱えるようになって拡張性がアップできます。少々作りがややこしくなるので今回はここまでにします。
変わり種ゲージ
レベルメーターぽいやつ
動きは特にないのですが、ゲージの方向が縦になったのと、段階的に変化するのが特徴のゲージです。横のものが縦になったという劇的な概念的変化をもって動きをつけたというか、まぁ平たく言えばついでです。ちなみに漢字を使うと 「序で」と書きます。
さてさて
これもマテリアルで作りますが、まずはテクスチャ。
64x256px のテクスチャに、パスでラインを置いていきます。
10px間隔で全部で 25Lines
ゲージ本体用と少し大きくした下敷き用の2枚用意しました。
エンジンにインポートして GrayScale として扱います。
次にグラデーション。
カラーはカーブアトラスを利用します。
マテリアルを用意します。
レベル 0～25 までのFloat値を受け取る仕様。
1レベル分の高さが10ピクセルで、テクスチャの縦方向の解像度256ピクセル。
10/256 を 受け取った値に対して掛けることで、ゲージの閾値が決まります。
このゲージは下から上に向かって伸びるゲージなので、1-x (OneMinus)ノードを使っています。
背景の作り方によりますが、このゲージは色を変えることで増減の変化を見せるようにしています。アルファ値はテクスチャを使用しています。
このテクスチャアルファにStepノードの値を乗算するようにすると、色を変えずにOpacityで削れます。
キャンバスに下敷きのテクスチャと、マテリアルを配置します。
下敷きテクスチャは、カラーを暗くして、本体のマテリアルの下に敷します。
Widgetブループリントでは ↓このように ０～１で管理している値を x25 してマテリアルに渡しています。
この辺はゲームの設計に合わせて構成を変えることになると思います。
これで完成です。
上限が増えない想定ですが、ゲームシステム上の最大値分をテクスチャで用意しておき、表示する際にレベルの未達部分をマスクするように作るとゲージの成長が表現できます。
最後に
今回は以上の３本です。いかがでしたでしょうか。
まだまだいろんなタイプというか仕様のゲージがあると思いますが、もとは UE4イベント ぷちコン 制作への応援として書こうという動機だったので、あまりニッチなゲージを作ってもややこしくなりそうだし、そもそも読む気も失せるだろうということで、HPゲージを作ろうシリーズはここまでにしておきます。
今まで作ってきたゲージの長さを全て足すと月まで行けるんじゃないかと思ってみたりもしていますが、そもそも実寸がないので計測不能でした。ゲームともに進化するゲージ。人類が海の底で暮らすようになり視力を失わない限り恐らく永遠にゲージは無くならないだろうと思います。なんか無理やり壮大な話に持っていこうとしていますが、しんどくなってきたので、少しでもゲージづくりの魅力を感じてもらえれば幸いと願いながら筆をおくことにします。
ではでは
すてきなゲージライフを！
