続きです
前回までのゲージをなにも見ずにサクッと作れるようになったら、たいていのゲージは作れるという思い込みと自信がつくんじゃないかと思います。たぶん付きます。
過去記事
さて今回はゲージに動く装飾を載せてみます。
押さえておきたいノードは Panner と Time ノード
Panner ノードは、テクスチャのUV座標を常に動かし続けてくれる大変ありがたいノードです。
テクスチャサンプラーにつなぐだけでとりあえず動いてくれます。
Speedに入力する値は、1秒あたりの変化量です。
マイナスの値にすると方向が逆向きになります。
上の図の場合 Y が 負の値 ということは、UVのVがマイナス方向、つまり上方向に移動するので、サンプラーから出る絵は下方向に動くことになります。また Xには正の値が入っているので同時に動いた結果、斜めに動くことになります。
望遠鏡を動かすと見えていたものが反対方向に消えていくイメージ。
タテかヨコのどちらか一方だけでいいときは、固定したい方にゼロを入力します。
Panner ノードは Time という入力ピンを持っています。
速度の制御に利用できます。
Timeと書いてあるので Time ノードをつなぐことができそうです。ただつないだだけだとPannerノードは普通に動作して変化は起こりません。そこで
パラメータを掛け算するようにすると、速度を調整できるようになります。
ゼロにするとPannerを止めることができるので便利です。
Pannerノードに入力する speed は 向きでもあり速度でもあります。
こんな便利なノードをあえて使わない選択肢があってもいいと思います。
ゲージの増減とは別にループアニメーションを乗せると、それとなく目立たせたり、何かしらの状態変化を訴えたり、進みの遅い変化をごまかしたり、いろいろな効果を生み出せるので、どんどん活用していきたいですね。
ほうっておいても勝手にずーっとループしているので、GPUは働いていますが、CPUからの干渉は減らせます。
上のサンプルで使用しているドット柄はモノクロで Grayscaleです。
RGB のうち Rチャンネルしかないので、Lerp ノードを使って着色しています。
ではこのへんでゲージを
33. 装飾をのせたやつ
21. ～ 24. のアレンジになります。
Stepノードでゲージ本体と背景に分けるのは、もはや定番。ここで、ゲージ本体のところにPannerを利用したループアニメーションをつなぐだけで出来上がり。
ループアニメーションということはシームレスなテクスチャを使用しますが、表示する大きさに合わせて繰り返すのは難しいので、TexCoordノードで調整します。
何もしないと変形します。
UVに対して何も変更しない場合、表示するサイズにテクスチャ全てが使われます。
Panner ノードに Coordinate という入力ピンがあるので、そこにTexCoordノードをつなぎます。Multiply で掛け算すると縦横比を調整できます。
UVに 1.0 以上の数値を掛けると タイリング（TextureのインポートでWrap設定になっている必要がある）している見た目にできます。
表示するサイズに合わせて、適宜調整します。
Pannerを使わない場合は以下のようにAddの前にMultiplyをつなぎます。
このテクスチャをUVで切り出して表示サイズと合わせる方法は、メッシュ（ポリゴン）を扱わないシェーダーでは必須になるので、しっかり理解しておきたいものです。
当ブログでもUVの扱いについてちょくちょく書いていますので、理解の助けになれば幸いです。
UVを扱えるようになると表現できることが格段に増えます。
表現できることが増えると、UIデザインを考えるときに有利です。マイクロインタラクションにもちょっとした花を添えることができるし、メンテナンスの効率を上げることもできます。
34.～36. については復習になると思うので上記解説をもとに試してみてください。
テクスチャの流れる方向を切り替えています。
決して水増しではないです（小声）
このタイプのゲージは、タイマーや進捗を表すプログレスゲージと相性がいいです。
今回はここまで
まだ半分もいってないので不安しかないですが、これを機にUI担当の方の助けになれば幸いです。できること、覚えることはそんなに多くないのですが、応用の幅とても広いので、面白いアイデアあればどんどん試していきましょう。
ではでは
素敵なゲージライフを！
