まだ暑い日が続いているけれど、重そうに曲がった稲穂や果物売り場を見て秋の訪れを感じる今日この頃。円形のゲージを作ろうと思って、以前からちょくちょく遊んでたグラデーションマップ（Photoshopでいうところの）を試してみたら結構カンタンに作れたのでさっそく長押しボタンUIに適応してみました。
ちょっと作ってみたくなったので長押しボタンゲージを試行してて、ようやくできた。ゲージ増加は単体のアニメーションなのでスピードの調整が可能。
— みつまめ杏仁 (@MMAn_nin) 2022年9月11日
あとは見ただけで長押しが必要であるのがわかるようになっていればバッチリかな。#UE5 #UE5Study #ue5UMG pic.twitter.com/VkBvuYgQj7
2部構成でまずはゲージ部分から書いてみたいと思います。
『グラデーションマップ』ってやつですが、考え方はシンプル。
まずグラデーションテクスチャを用意します。
0 ~ 1 のグレースケールさえあれば、UV座標に置き換えるだけで、グラデーションテクスチャから部分的にカラー情報を拾うことができます。
たとえば以下のようなテクスチャ
これが
こうなって
こうなります
マテリアルは以下
と原理をざっくり説明したところで、
円形のゲージを。
アンリアルエンジンのマテリアルにはとても便利なノードが用意されています。
VectorToRadialValueノードひとつで、３つの情報が取り出せます。
ノードで表示されているカラーは、値の並びをRGBAに置き換えてプレビューしているものになります。
３つのうち上は 赤、黄色、緑がグラデーションになっている状態から、赤（R） と 緑（G）が加算ブレンドされているようなので、Float2 で X と Y か U と V として扱うことができます。
３つのうち 真ん中と下のやつは、赤（R） しかないので、 Float1 として扱います。
ちなみに、一番上のピン Radial Coodinates を分解してみると
今回は 真ん中の Vector Converted to Angle と下の Linear Distance のピンを使います。
Float1ということはグレースケールとみなすことが可能で、さっそくグラデーションマップに利用してみます。
このようなグラデーションテクスチャをつなぐとリングになります。
あとはゲージとして機能させるために真ん中の Vector Converted to Angle を掛け合わせます。
ただ、初期値のままだと右向き、時計でいうと 3時方向から始まるゲージになるので、12時から始まるように、90度回します。
UMGで表示する際に 90度回せばいい話ではありますが、
せっかくなので マテリアル内で回す方法を書いておきます。
VectorToRadialValueノードは、Inputに何も挿さないといい感じですが、挿した途端オフセットの調整が必要になるので、UVから 0.5 引いて 2倍 します。
そして V方向だけにマイナスをかけてから、UとVを入れ替えると、時計回りに 90度回ります。結果的に 12時方向を開始位置にできます。
StepノードとScalarパラメータをつないで、ブループリントから増減できるようにしたら完成。
この例ではマテリアルで色を付けていますが、UMGで色を付ける場合は、マテリアルは白色にしておきます。
ゲージカラーにグラデーションをつけるのもカンタンです。
下のは Lerp（線形補間）ノードを使った 2色グラデ。
ここにもグラデーションマップを使うことで もっとカラフルにできます。
さらにグラデーションテクスチャのUVを操作すると、いろいろ楽しめます。
例えば、縦方向（V方向）に動かした場合。
右側の多重リングは、以下のテクスチャを使用しています
上下がシームレスにつながっています。
UVの移動は Time ノードを使っています。
Now Loading画面とか、カーソル位置を表すソナーっぽいやつとかに向いてる感じで、マテリアルだけで低コストなアニメーション表示が可能です。
リング状のテクスチャの表示サイズを変えると、線幅が変わってしまいますが、この方式だと、その悩みから解放されます。
以下のようなテクスチャだと
波紋のような表現も簡単です。
テクスチャのタイリング設定次第では少し改造が必要な場合があります。
上記のテクスチャは TilingMethod を Clamp 設定にしたので、Timeのところに Fracノードを追加しています。0～1を繰り返す場合は便利なノードです。
※Frac は 整数部分を捨てます。1.0 にはならないので、場面によっては向き不向きがあります
テクスチャ容量的にはちょっと もったいない作りですが、UMGのアニメーション制御と干渉しにくいのと、扱いやすいのがウリです。
緩急と太さはテクスチャをいじるだけでコントロールできます。
グラデーションテクスチャをエンジン内で作ってアセットにすると、テクスチャをインポートしなくてもいいので、調整の手間が省けます。
グラデーションの作り方次第では汎用的なつくりにもできます。
詳しい作り方は書きませんが、コンテンツブラウザで右クリックして、
Miscellaneous > Curve
リニアなグラデーションが作れます。
リニアなグラデは、モニタに表示する際にガンマ補正されるので上のように白に寄ってしまいますがそこは無視。
Curve Atlas にしてマテリアルに組み込ます。
いろいろ調整できるパラメータをつないでみた。
テクスチャの中央がグラデーションの一番値の大きいところなので、リングの大きさを変える場合は U値を増減します。あとはSmoothStepで線幅とボケ具合を調整。
実際の表示サイズにしてジャギーが出たらボケ味を足すといいです。
この一式があれば、いろんな場面でリングゲージが量産できそうです。
汎用性を検討するにあたって、チーム内のマテリアル編集の練度、ゴールライン、メモリ配分、などなど状況に合わせて柔軟に選択できればいいなと思います。
値の使い途を工夫するとまだまだいろんな表現ができそうな気がします。
というわけで《ゲージ編》はここまでにします。
次回引き続き《ボタン編》ということで、長押しボタンのイベント処理を紹介していきます。
ではでは
素敵なリングゲージライフを！
