ゲージのデザインは、ゲーム進行においてとても重要な役割なのに、UIの主役には絶対なれないし、主張するとウザがられ、空気読めよ邪魔だよとか言われて面積を大きくとれなかったり、え？いつの間に体力ゼロ？なんで？今の攻撃結構減ったな、ヤバい！回復しないと！などなど、細い見た目でもそれなりに情報量を込めないといけなかったりと、とても悩みどころが多いです。
そのくせ、 ただの棒じゃん、そんなの秒でつくれるんじゃね？とかもっとカッコよくして、安っぽくならないようにして、とか気軽にコメントされると切なくなります。
この安っぽくならないように というのが結構重要で、ゲージに手を加えてないゲーム画面はどうしても「仮感」（システム上必要になったのでとりあえず置いてみたけどまだゲーム画面に馴染めてなくて仮っぽく見える感覚）が漂ってしまいます。見た目に情報強度はめちゃくちゃ強いのですが、立ち位置がそこじゃない感（メタ視点から見て）が滲んできて開発途中な印象を与えかねないので、開発終盤ではそれなりに手を入れられるとクオリティアップにつながります。
最近は、ゲームグラフィックの描画スペックが上がって、画面情報量も格段に増えているので、そこに埋もれないようなUIを考えると、フラットデザインは結構フィットしている印象です。逆にUIに色を使わずシンプルにシルエットと位置、動きで勝負するので、デザインも実装もなかなかの難易度になってると思います。
とはいえ、ゲームの世界観にふさわしいUIデザインというのがゴールなので、トレンドも意識し通つつ、『色・カタチ・動き』に意味を与えながら試行していくしかないですけどね。
前置きが長くなってしまいましたが、一応続きの記事になります。
UE4でゲージを作る記事は探すとそれなりに出てくる今日この頃。いまさら感が否めないのを気にしつつ、今回はちょっと切り口をかえて書いてみようと思います。
ゲージは実にいろんな作り方があって、どの方法が正解とかないのですが、あるとしたら処理負荷の少ないエコなつくりで見た目がいい感じ、あたりでしょうか。
フワッとした言い方しかできないので、提案になってしまいますが、ざっと眺めてもらって試してみたいのが見つかればいいな。
INDEX
テクスチャ作るのめんどい
そろそろ仮UIを脱したい。でも今はまだデザインに時間を割きたくない。ちゃちゃっとエンジンコンテンツだけでどうにか。デザイナーに依頼かける前に検証。というような状況を想定。
カーブアトラスでちょっとリッチに見えるグラデーションゲージ
カーブアトラスと書きましたが、実際はカーブをカラーとして格納したテクスチャということになります。グラデーションは別途カーブアセットを使って作ります。
コンテンツブラウザで右クリックして Miscellaneous > Curve を選択。
Curve を選択すると、ポップアップが出るので、CurveLinearColor を選択。
カーブエディタが開くので、RGB各チャンネルにカーブをつけていい感じのグラデーションを作ります。
保存したら、次にカーブアトラスを作って編集します。
テクスチャサイズはデフォルトで 256 になっています。ちょっと贅沢なのでメモリ節約のため小さくします。べき乗サイズがオススメなので、 32、64、128 あたりで。
すぐ下、Gradient Curves のところに + ボタンがあるので、ここに作ったグラデーションカーブをセットします。
これを保存して準備完了。
続いてマテリアルを用意します。
コンテンツブラウザで右クリック ＞ Material
エディタを開いたら、さっそくカーブアトラスを扱うノードを取り出します。
CurveAtlasRowParameter ノードです。
ノードを選択して、Detailsタブで、カーブとカーブアトラスをセットします。
セット完了したら、その他必要なノードを以下のようにつなぎます。
Mask(R) は Component Mask ノードの Rチャンネルのみ有効にした状態。
あとはこのマテリアルを保存して、UMGのHPゲージにセットするだけ。
テクスチャをセットする場所に、マテリアルがセットできます。
カラーはまっ白にしておかないと、乗算されてカラーが思った通りに出ないので注意。
ここから少し改造
グラデーションの向きを縦にしてみます。ComponentMaskを Ｒ → Ｇ に変えるだけ。
手っ取り早く上下反対にしたい場合は OneMinus ノード
Mask(R) に使うと 左右反転します。
計算が増えるので、最終的にカーブエディットで解決するのをおススメします。
ここで、もうひとネタ
カーブを追加します。
両端がグレーで真ん中が真っ黒です。
カーブアトラスに追加登録します。
これをマテリアルで合成します。
こんな感じになります
さらに おまけでこんなカーブ
これ色として使ってなくて・・・
こうなります
赤をハイライト、緑をシャドウとして合成しています。
テクスチャを使わなくてもリッチな見た目をつくることができます。
グラデーションゲージを活かしたピンチな点滅
カーブアトラスでもうひとネタ絞り出しました。
以下のようなグラデーションを用意します。
ゲージ本体のマテリアルを複製して下敷き用のマテリアルを用意します。
タイマーとサインカーブで点滅させています。
点滅のための単色グレー（図の一番上にあるノード）は、グラデーションのグレー部分と同じ明るさです。
常に点滅はしているのですが、ある程度減らないと見えてこない仕様です。
特に残り体力の判定等はしていないので、どの辺でヤバみを主張するかは、カーブで調整できます。
テクスチャ用意できた
ただの棒はイヤだ！なんとかしてテクスチャを用意するぜぇ！せっかくテクスチャが用意できたんでなんかこういい感じの・・・、という状況を想定。
定番のフレームを載せるやつ
説明用にちょっと贅沢な作りですが、フレーム（上）とゲージ本体（下）の2枚。
重ねやすさを優先して余白が多めです。
これをインポートして、ゲージ本体用のみマテリアルに持っていきます。
コンテンツブラウザでインポートしたテクスチャアセットアイコンの上で右クリックするとラクに取り込めます。
stepノードを使って、ゲージの長さを塗り分けています。
こういったテクスチャを使った自由な形状のゲージは、余白があるため、テクスチャの端から端までを使ってデザインされていないことがほとんど。
そこで大事な部分。
ゲージとして扱うときに 0で空っぽ、1.0で満タン というのがよくあるケース。というかグラフィックで表現するときに効率的な扱い方。
同じように扱おうとすると、ゼロになってないのに、ゲージの見た目は空っぽ。満タンじゃないのにゲージの見た目は満タンということが起こります。
そこで、Lerp（Linear Interpolate）ノードを使って 0 ～ 1 に補正します。
例えばテクスチャの幅が 512px で左端から 8ピクセル余白があったとします。
すると、 8 ÷ 512 = 0.015625 付近の数値が Lerpノードの A になります。
同様に右から 12ピクセル余白があったとしたら、
(512-12) ÷ 512 = 0.9765625 付近の数値がLerpノードの B になります。
電卓で計算してもよいですが、UE4は直接計算式を入力できるので便利。
入力してEnterキー押したら、どこか別の場所をクリックすると計算結果に変わります。
テクスチャの解像度と余白の取り方によって数値が違ってくるので、実際の表示を確認しながら微調整します。
スカラーパラメーターノード Value の値に 0 と 1 を入れて加減します。
ゲージの増減をマテリアルで行うので、ブループリントからマテリアルにパラメータを渡すための準備が必要です。
Dynamic Material Instance を作成して変数に昇格(Promote to Variable)
これに対してSet Scalar Parameter Value ノードを使って数値を渡します。
この関数は、前の記事で作ったものの使いまわしです。
デザイン性が高くオリジナリティが出しやすいのですが、ちょっとだけ扱いが面倒になるのが難点。
キャラ絵を使ったゲージ
頑張って描きました。これをマテリアルでゲージにします。
四隅がもったいない作りですが、実装スピードを重視してます。描画負荷がキビシイ場合は45度回転しておくという手がありますが、ピクセルが若干荒れるので解像度と相談になります。
これもゲージの増減をマテリアルで行うので、ブループリントからマテリアルにパラメータを渡すための準備が必要です。
Dynamic Material Instance を作成して変数に昇格(Promote to Variable)
これに対してSet Scalar Parameter Value ノードを使って数値を渡します。
この関数は、前の記事で作ったものの使いまわしです。
できたのはこれ
満タン ←→ 空っぽ の変化の向きは、UとVの計算をちょっといじってやると変えられます。画像を回転する場合は効果ないですが、画面内の位置が決まってから、絵の感じ、視線の流れを見て選択するといいと思います。
OneMinusノードの使い方がポイント
キャラ絵の一部を切り出して使う
どこか別の場所でアイコンなどで使っているテクスチャを流用します。
これは直接ゲージにするのではなく、ゲージに重ねて使います。
この彩色されたテクスチャを加工します。
複数キャラの切り替えを想定していて、切り取る位置だけを変えられるようにスカラーパラメータにしてあります。
このマテリアルをマスターにして、あとはキャラごとのマテリアルインスタンスを量産すると、絵に合わせた素材が簡単に用意できます。
ネガポジ反転したみたいになっていますが、これに着色してゲージに後乗せするといい感じになります。
ひとまずこの辺にまでにしておきます。テクスチャ作成とマテリアル作成については、作る人のスキルに依るところが大きいのと、テクスチャ制作はエンジン以外のエディタ環境が必要だったりで、説明が難しいのがもどかしいですね。うまくフィットするのがあればぜひ試してみたりアレンジしてください。同じような表現でも違うアプローチで作ることができたりするので、ゲージ作りは奥が深いです。
UMGを使わないという選択肢もあります。ただ、これは見た目のコントロール難度が格段に上がるので、3D描画の仕様にある程度慣れてないと調整に大変時間がかかります。
逆にUMGのほうが慣れるの大変そうという方は、テキスト表現だけをUMGにして、あとはMeshで、というのも可能です。アンリアルエンジンでは使う人次第で、いろいろな作り方ができるのも魅力のひとつです。
操作についてはかなり端折っているので、わからない点やツッコミ等々あればTwitterかブログコメントでお気軽にお尋ねください。レスポンスは速いとはいえないですが対応します。
次回はちょっと特殊な演出で遊んでみようと思います。
ではでは
すてきなゲージライフを！
