長さや目方を測るために等間隔に刻まれたしるしを「目盛り」というのですが、「目盛る」という動詞があるそうです。辞書を引いて知りました。
たまにゲージに乗っているのを見かけることもあります。シリンジ（注射器）やアルコール温度計、メスシリンダーあたりから連想していると思います。
レイアウト都合でゲージ全体の長さが固定されている場合がほとんどという印象。
ゲージに目盛りを乗せる場合の目的として想像できるのは、
- ゲージを消費するタイプのスキルやアクションで一回の消費量がまちまち
- スイングパワーの調整とか、ジャンプの角度や、料理の火加減などなど、ゲージの長さや針の角度・位置を細かくコントロールする必要がある
- 世界観的な装飾で雰囲気を演出
あたりでしょうか。
分割数に合わせてゲージの長さが変わるタイプは目盛りとしての役割は弱くなります。
今回は目盛りの刻みが変動するタイプをピックアップします。
分割数の変更が少なく、ゲーム全体を通して用意する段階の数が判明している場合、タイリングを使わない方法がベストです。
それぞれの分割用目盛りを縦に並べておいて、必要に応じて切り出せばいいだけ。
解像度はゲージのサイズに合わせます。
テクスチャ容量がちょっと気になる場合は、見た目をただの直線にすると、縦方向は1行あたり２pxまで切り詰めることもできます。
2pxあれば、ピクセル間をサンプリングできるので表示する際に拡大しても安定します。
横方向は切り詰めるとピクセルが変化するので、なるべくゲージと同じ長さをキープしたいです。
これで目盛りを乗せることができました。完成！
としたいところですが、さすがに 96本目だし、それなりの難易度で挑もうと思います。
というわけで分割数の変更はテクスチャのタイリングで行います。
タイリングの場合に解決すべきポイントがいくつあります。
全体のサイズが変わらないのに、タイリングの回数が増えるということは、テクスチャを回数分詰め込むので、どんどんピクセルが痩せて細くなっていきます。
つまり、分割数の多い>少ない ＝ 線が太い＞細い
用意したテクスチャの解像度が低いと分割数が少ない時にボケるし、高いと分割数が多い時に細すぎるという事態が起こりやすくなります。
試しに
テクスチャインポート時のフィルタ設定を2種類でキャプチャしました。
↑ Nearest
↓ Default
さすがに雑なつくりという印象を与えてしまいます。
テクスチャのどこに線を置くかで、タイリングしたときの線の位置を補正する方法が変わります。
線が端にあると、繰り返したときに等間隔に並びますが、片方だけだと左右のバランスが偏るので位置の補正が必要そうです。両端に分かれているとそのままでもよさそうです。
では中央だとどうでしょうか。
左右の偏りはないのですが、均等ではなくなりました。
半目盛りもずれているだけですが、繰り返す数よりも見た目に +1 したように見えます。端に線が来ないのはこれはこれでよさそうではあります。
位置は何とかなりそうですが、太さはどうやって調整すればいいのか。
テクスチャの内容次第で線の位置と幅を調整する方法が変化します
全部紹介するとボリュームが大変なことになるので、あまりややこしくないやつ（たぶん）を取り上げます。
さっそく目盛っていきましょう。
96. 分割数可変の目盛りを乗せる
線の幅は、タイリング設定が Wrapでもできなくはないですが、自由度を持たすために今回は Clamp（端のピクセルを繰り返す）設定にして Absノードを使って太さを調整します。
TexCoordの Uに繰り返す回数を掛けたあと、Fracノードで小数部分を取り出します。
たとえば４回繰り返す場合。
これで Uがノコギリのような形状になるのでタイリングすることになります。
Fracノードは整数部分（小数点の左側）を強制的に 0 にするので、正確には 1.0 にはなりませんが、TextureSampleノードでサンプリングする分には問題ありません。
そこから 0.5を引いてノコギリの山の半分をマイナス方向に沈め、-0.5 ～ +0.5 を2倍してから絶対値にすることで、0 ～ 1 のリニアな波が作れます。Absノードの後から 2倍しても同じになります。
テクスチャは 64ｘ16 で右端に 分割線を置いています。
← 400%に拡大
イメージしやすくするために色を付けてタイリングの状態を見てみるとこのようになっています。
まだ、普通のタイリングなので、分割数で線幅が変化します。
線幅の調整を考えます。
まずは繰り返す回数に影響を受けないためには、分割によって変化した表示サイズに適したUVでトリミングすればいいのでは？
例えば、半分のとき、1.25倍のとき。 そのままだと伸び縮みします。
右端に線が描かれているので 切り出す開始位置を変えることで一定になります。
これでピクセルの伸び縮みはなくせます。
Clampなので、もっと切り詰めることができますね。
この開始位置は計算で求めることができます。
テクスチャの解像度と画面への描画サイズ、これらを基にテクスチャの表示倍率を求めます。
今回 Absノードを使って鏡のように反転する形式を採用したので、分割数に対してテクスチャを2枚並べることになります。テクスチャの横幅を2倍してから、描画サイズの横幅を割ります。縦方向のサイズはタイリングしないので考慮しなくてもOK。
画面の描画サイズについてはレイアウトが確定していればそのサイズを利用します。
上の図では、幅 256pxの描画で、64pxのテクスチャを使う想定です。
ちなみに
UE はTextureCoordノード の Index = 3で取得することができます。
求めた テクスチャの表示倍率 を 分割数で割って、1から引くと表示倍率に見合ったU値が求まります。
これが今回の重要部分です。
表示サイズが変わっても、いい感じにU値を調整すれば、ピクセルの大きさを一定にできます。
この変動する範囲をいい感じに受けてくれるのが みんな大好き Lerpノードです。
Absノードで、0 ～ 1 のジグザグ ／＼／＼／＼ にしたのが効果を発揮します。
軽くしくみをまとめておくと、
表示したいゲージの長さ（幅）から 分割後のテクスチャサイズ（幅）を計算。
Lerpノードを使ってテクスチャをトリミングする。
テクスチャは、Fracノードと Absノードを使ってミラーのようにタイリング。
となります。
あとはこれを UV にまとめてTextureSampleノードにつないで、ゲージと組み合わせれば完成。
ゲージ部分はシンプルなやつを選びました。
目盛りのテクスチャをグレイスケールにしているので、これもまたLerpノードのAlphaにつないで塗分けに使用しています。
白い部分はラインのカラー、黒い部分はゲージの色。グレーの部分はその中間という具合です。
仕上げとして、分割線の太さを変えられるようにします。
テクスチャのタイリング設定を Clampにしているので、テクスチャの外側は下図のようなイメージ。
U値にいくらかプラスすると右に移動するので、結果的に線幅が太くなります。
マイナスすると、左に移動するので、線幅は細くなります。（引き過ぎ注意）
調整のための計算とパラメータノードは Lerpノードの後に挿入します。
Addノードにしておくと、マイナスの値を足すことで引き算と同じ結果になるので便利です。
Subtractノードは引き算が確定している場合には使えますが、Addノードで代用できます。
Lerpノードを使わない方法も作ったので紹介します。
原理はほとんど同じで、FracとAbsで作ったジグザグ ／＼／＼／＼ に倍率をかけて山の高さを変更。その山の頂上が 1.0 になるように底上げするというやり方。
今回はゲージをどうこうするより、計算方法を模索することに慣れよう、というの狙いです。慣れてくると数値の変化を頭でイメージできるようになります。
シェーダーは決められた画面の描画範囲を塗りつぶすために存在しているので、
1+1=2 のように 点で考えるのではなく 線で、さらには 面で考えながら目指したい表現を作っていきます。イメージできないものは考えようがないので、こうして実例を試しながら、応用のための基礎を地道に試行実践していくことが慣れへの近道です。
補正を計算ではなくパラメータで済ませてしまうのもアリです。
分割数ごとにいい感じの値を事前に調べておくスタイル。
ちなみに、テクスチャのタイリング方法にMirror というのがあります。
この設定を使うと、AbsとFracノードが不要にできます。
ただ 0 ～ 1 でコントロールしていないので、テクスチャの内容と分割数によっては結果の補正がちょっと面倒になります。
今回は以上です。
テクスチャの解像度を100％で描画しなければ、計算もいくらか省略できたりするので、いろいろな計算を試してみてはいかがでしょうか。あと、両端の線を消す方法も。
柔軟に対応できるようにするか、パラメータを固定して計算量を減らすか、試行錯誤するのにちょうどいい教材かなと思います。
ではでは
素敵なゲージライフを！
