いよいよ90の大台に到達。前回は燃やしてしまったので今回はキラリとハイライトを走らせようと思って4つのタイプを用意しました。
ゲームのUI表示って普通の3Dのようにライティング＆シェーディングすることは稀です。
主に視認性の確保（エッジをくっきりと、カラーをはっきりと見せる）に加えて、半透明の多用、描画順、これらを考慮すると、光源に影響されない2Dライクな表示でが好まれ、さらに軽量で負荷の小さい表示で安く見えないのが最善とされます。
というわけで物理ベースのリアルな表現は、従来のUI表現と比較してコストが高く、2Dでの代替表現に落ち着いているというのが現状です。ハードウェアのスペックも上がってきているので、いずれはUIも物理ベースのレンダリングで作る時代が来るかもしれません。そもそもUIは抽象度が高めで、システム寄りの存在なのと、意匠としてユニークさが求められるので、それほどニーズが高まることはないのかなとは思います。
とはいえ、最近話題のガラスUI で思い出しましたが、再び「スキューモーフィズム」が脚光を浴びる日がくるかもしれません。その時のためにリアルな表現は模索し続けることになるのでしょうね。
前置きが長くなりましたが、今回の 4タイプは表現的に古臭さは否めませんが、視線誘導のためのエフェクトとして割り切って使っているケースは、まだまだ見かけます。
ということで、ゲージの回復またはチャージが完了したときに、視界の端で知らせる演出という想定で作りました。
ハイライトの作り方としては、ゲージに加算で重ねて明るくする方法になります。
単純なRGBの輝度を加算するので、ゲージのカラーが明るいとか、面積的に細いといった場合はあまり効果が目立たないことがあります。
加算ではなくアルファチャンネルをつかったブレンド方法にすると、色が飽和しないようにできますが、ちょっとノードが複雑になるので避けました。ハイライトに着色したいという場合は、加算だと欲しい色を出すのが少し難しかったりしますが、Photoshopのレイヤーブレンドの 覆い焼き（リニア） をつかうとシミュレーションできます。
88. グラデーション
テクスチャを使用していないタイプです。
グラデーションを少し斜めに傾けて、Smoothstepノードでハイライトを動かします。
斜めのグラデーションは、TexCoordノードの UVを分離して、どちらか一方に傾きの数値を掛けて、足し算して一つにすると、斜めに傾いたグラデーションができます。
この場合ComponentMaskノードで Gチャンネルを有効にしているので、UV の V方向に -0.1を掛けていることになります。
ゲージの形状は横に長いので実際に表示するときの縦横比に合うように調整します。
試しにマテリアルエディタの Preview Size を変えてみると下のようになりました。
この斜めになったグラデーションを、Smoothstepノードを使って縮めたり伸ばしたりします。
できたのはこんな感じ。
透明度も調整できるようにしたかったので、Smoothstep用も合わせて ScalarParameterノードを3つ使用しています。
これをWidgetブループリントのタイムラインで動かします。
マテリアルのパラメータをタイムラインで扱う方法について軽く操作方法を載せておきます。ご存知の方は飛ばしてください。
アニメーションを追加したら ①
マテリアルをセットした Image を選択した状態で +Trackボタンを押すと ②
選択中の Image がリストに出てくるので選びます ③
トラックが追加されたら、さらに右端の +Track ボタンをクリック ④
Brush.Brush Material をクリック ⑤
トラックがついかされるので、さらに右の +Parameter をクリック ⑥
これでマテリアルで作成したパラメータがリストになって出てくるので必要なものを選択します ⑦
⑥ と ⑦ を繰り返して必要なパラメータを取り出したら、タイムラインを編集します。
間違えて追加してしまったら、Deleteキーで消せます。
グラデーションの幅を Smoothstepノードにつないだパラメータで調整します。
このケースでは、Smoothstepノードを１つしか使わなかったので、途中でグラデーションの向きを反転させています。
そのために、切り替わりのときに全体が白くなるようにしています。
Smoothstepノードを２つ使うと、幅の狭いグラデーションで推移できます。
後述の 90. のタイプで紹介します。
89. テクスチャの移動
次はテクスチャをつかったタイプ。
昭和のロボットアニメに登場するようなスタイルですが、テクスチャでやるからには、これくらいベタなほうが伝わりやすいと思って下のような画像を用意しました。
64x32
テクスチャの外を利用するのでタイリング設定は Clamp です
基本的なしくみは、37. で紹介しているのとほとんど同じです。
37. のゲージでは Pannerノードで動かしているのを、ScalarParameter経由でWidgetブループリントで動かせるようにします。
テクスチャはそのまま使うと小さい（節約）ので、引き伸ばして使っています。
テクスチャの容量と相談で。
タイムラインはシンプルに端から端まで移動するように、テクスチャの U方向にオフセットを加算します。
単調さを避けるために、強さを増減するようにしています。
90. テクスチャ＆Smoothstep
テクスチャを使わないグラデーションだと直線すぎて味気ないというときに、テクスチャでちょっとした変化をプラスしたタイプ。
使用したテクスチャは
64ｘ32
湾曲させつつ、少し勾配を調整してあります。
これはUVを操作しませんが、ゲージのサイズに合わせてサイズを変形するので、拡大した部分のバイリニアフィルタ対策が必要です。ゴミピクセルを回避するためにタイリング設定は Clamp を選択しておきます。
88. では １つでしたが、Smoothstepノードを ２つ使っています。
それぞれの Min と Max を制御するためにパラメータノードをつなぐのですが、ちょうど 4つあるので VectorParameterノードにしました。
グラデーションの先頭から後尾を引き算すると、幅の調整ができます。
この Min と Max の値をタイムラインで動かします。
一番下のトラックは加算の強さを加減しています。
グラデーションテクスチャがいい感じにできるまで、試行錯誤にそれなりに時間がかかりました。
ユニークな形状ができると世界でただ一つしかないオリジナリティを主張できるので頑張る価値は十分にあります。
91. テクスチャ＆テクスチャ
Smoothstepノードを使わずに別のテクスチャで表現する方法。
前回の燃える表現と仕組みは同じです。
32ｘ4
↑
この小さなテクスチャを ハイライトにします。
できたのはこんな感じです。
２つあるTextureSampleノードのうち、
右のほうに をセットします。
左のほうに
がセットしてあって、
これにオフセットを加算するとハイライトが動きます。
動く幅がテクスチャの内容次第なので、Lerpノードでいい感じに補正します。
アニメーションするときは、ScalarParameterノード経由で0～1.0になるので 利用しやすくなります。
このパターンの面白いのは、下のようなテクスチャだと、
（4倍に拡大）
複数本のハイライトを表現できるところです。
今回は以上です。
たかがハイライト。されどハイライト。ゲームの雰囲気に合ったものを、最適なパターンを選ぶために選択肢を持っているのは強いと思います。
今回の紹介した４パターンは、Widgetブループリントのタイムラインで制御する前提なので、ぜひご自身で満足のいく動きを試してみてください。グラデーションテクスチャの内容を変えるとまた印象も変わるのでアレンジを楽しみながら感覚をつかんでいただければと思います。
完璧なシェーダーや無欠の表現方法なんてものは無いので、臨機応変にベストな手法を選んで目指すクオリティを出せるのがデキルヤツだと思います。
ではでは
素敵なゲージライフを！
