E3のトレーラーを見てて、ゲージの長さが可変していたのをみてしまったので、我流ですが対応してみました。
ここでいう可変とは、ゲージの物理的な見た目の長さのことです。成長段階やステータス変化を表現する方法の一つで、長さが比較しやすいゲージを使うタイプをよく見かけます。レイアウト的に余裕が無いとこの方法は使いにくいのですが、ゲージタイプのレイアウトを検討する際は、まず仕様として成長要素を反映するかどうかのコンセンサスを行ってからデザインを進めます。
まず可変するにあたって、検討したパターンは３つ。
①長さの違うゲージのメッシュを何個も用意する
作るの大変そう。デザインの変更とか成長段階が変則でなければなんとかなるかも。
②メッシュそのものを計算でつくる
動的生成（ロード中とか）とかだとプログラマさんに頼りたい。
スタティックメッシュなら、MELとかPython等スクリプトで作ってもいいかも。
③同じ一つのメッシュで可変させる
すでに作ったのがあるし、頂点シェーダーでなんとかできそう。
記事にしやすいという理由で③に決定。①と②は「よろしくお願いします！」か「オレガンバル！」かのどちらかになりそうなので。
③同じ一つのメッシュで可変させるということにしたので、すでに作ってあるやつを改造していきます。
全体の長さは前の記事で決めていますが、円周部分の5/4で作ったまま今回はいじらないようにします。
それなりに頂点数が多いのと、変な形をしているのですが、触りたい箇所は以下。
ですが、
UVスクロールの増減速度を一定になるように一部のメッシュの形状を変えるのは、相当しんどいかと思われます。60fpsでアクションゲームとなると、UI表示で処理負荷が高くなるのは皆が幸せになれません。
なので、このゲージ本体は触らないことにします。
で、
出した結論が、「ゲージではなく後ろの枠を可変にする」です。
この部分はUVを束ねてしまったとこなので、分離してやる必要があります。
というわけでBlender ゴー！ （語感がいいので言いたいだけ）
まず端っこの２頂点だけUVの頂点を移動させます。Gキーは押しながらではなく１回だけぽちっと押すだけです。そしてドラッグで移動したら左クリックで確定させます。
つづけて、
これでメッシュは編集完了。
FBXでエクスポートしてUE4で Reimportします。
次に、テクスチャを改造します。
これもUE4でReimportします。
見た目何も変わらなければ、BlenderでのUV編集は成功ということです。
頂点を動かすためのマスクテクスチャを用意します。
最小サイズ、4ｘ4 pixelです。
これを圧縮ありで普通のカラーテクスチャとしてインポートします。
この場合はグレースケールにするより軽くなります。
この（頂点を）マスクするテクスチャをメッシュのUVポジションに重ねてみたイメージは下図のようになって、白い部分の頂点のみが可動対象になります。
マテリアルを組んでみたのがこれ。
長さは、Lengthという名前のScalarパラメータを仕込んでます。
マテリアルの改造は以上。
ConsructionScriptで、ゲージ同様にダイナミックマテリアルインスタンスを作って変数化しておきます。
今回可変ゲージを扱うにあたり、仕様を変更することにします。
レベルBPから、ゲージの長さを 0.0～1.0 の値で受け取っていたのを、2000とか直接の数値で受け取るように変更。
そこで
受け取った値を割合に変換するマクロを用意します。getVitalRatioと命名。
Inverse Lerpノードを使うと、渡した値がどの辺にいるか、割合で返してくれます。
《追記》
この Inverse Lerp は Ver 4.19 から バグフィックスされて Normalize to Range に生まれ変わりました。
次に
前回 Event BegnPlay につないでいた関数 initGauge をグラフから消します。
そしてこの initGauge関数を編集します。
外から呼び出してもらう形にします。
初期化のタイミングはゲージの表示開始時か、ゲージの長さが変化したときになると思われるので、この関数内で枠の長さを変更するパラメータ Length に値を入れて枠の長さを確定させます。ここは仕様によりますが、いったんゲージ本体も満タンになるようにもらった値に合わせて長さを変えています。
枠の長さを変えるために、Length に入れる値として、 constFrameLengthというFloat型の変数を用意しています。
定数（変化しない値）として扱うので、初期値（Default Value）をあらかじめセットしてあります。どんな値かというと・・・
枠のメッシュは、0 で一番長い状態です。右方向（X軸でプラス）に移動するようにマテリアルを組んでいるので、Length には正の数値が入ります。
実際のメッシュのサイズも関係してますが、直線部分をBlenderで引き延ばすときに計算した値がここで役立ちます。
UE4で100倍スケールでインポートしていたのを思い出したので、
100倍して -1199.94。
右に動かすので マイナスの符号を消す感じで、パラメータにすると 1199.94。
Float型なので入力すると勝手に若干のブレが出ますが、このまま進めてみます。（画面で確認して気になるようだったら改善を考えよう。）
ここまででプレビューしてみたいので、レベルブループリントも編集します。
いい感じです。
表示部分はなんとかできました。
レベルブループリントの 変数 PlayerVital の値を変えてみると、ゲージと枠がちゃんと連動しているのが分かります。
あとは、受け取る値が変わったので、ゲージの減る動きを調整します。
NewVital からは 0.5 とかではなく 1250 のような値になったので、マクロを介してマテリアルに値を渡します。
ゲージのブループリントはこれでOKです。
テスト用にレベルブループリントも少し改造します。
乱数が0.01 ～ 0.1 だったのを 変えているだけです。
テスト用なのでここは好みで。
Vitalの 初期設定を 2000 にして試してみます。
なんとかできた感じです。
Twitterで「ゲージの長さ対応は、またそのうち・・・」とつぶやいて宿題にしていたのですが、思っていたより記事の反響があったので、勢いつけてやってみました。
「ゲームの数だけゲージがある。ゲージの数だけ仕様がある。」
ではでは
まだ見ぬゲージを求めて
ステキなゲージライフを！
← 8ｘ32pxのグレースケールテクスチャを用意。
← 32ｘ32px
← 16ｘ32 （実寸）
← 8ｘ32 （実寸）
