シェーダー（アンリアルエンジンでいうところのマテリアル）を触れるようになると、Photoshop や Illustrator でデザインを作るときに、ちょっと動きを意識できたり、インタラクティブな表現を盛り込んだ グラフィカルな UI が発想できるようになったり、コスパのいいアセットが作れたりします。
さらに、作り方の選択肢が増えることになって、イテレーションを効率よく回すことに貢献できたり、AfterEffectsで作られたデザインを再現するときに絶望することが減ったりといろいろメリットが大きいです。
リスクがないわけではなく、UIに処理を持っていかれることに懸念を示される状況も多いので、それなりに処理負荷と向き合うことになります。また、シェーダーで表現することを前提にしすぎて、タイトルの雰囲気に合わなかったりすることもあるかもしれません。処理負荷対策としてダウングレードを迫られることもしばしば。
とりあえず単純にUIデザインの制作手法が増えるので、臨機応変な対応ができるようになります。デザインを落とし込むときのスキルと手法が増えるのは良いことだと思う。
いきなりシリアスな話で始めてしまいましたが、続きの記事になります。
今回はゲージを動かすというより、ゲージと連動して動くものを作ります。
普通ゲージは空っぽから満タンまでを「割合」で操作しますが、位置の動くものは「座標」を操作します。
ブループリントに線形補間のノードがあるのでBPで作ったり、タイムラインで再生フレームを制御するのもありです。
ちょっと強引ですがこのおまけキャラをシェーダーで制御してしまおうというものです。
シェーダーの学習としては、ゲージに限定すると手数が増えないのですよね…
おまけのキャラは、テクスチャのUVを移動させて動かします。
テクスチャのUVを動かす際に Wrap と Clamp による違いについてゲージ 38. で軽く触れていて、今回その Clampを使ってテクスチャサイズを抑えた作りになります。
55. ゲージと一緒に動く矢印
テクスチャは 32x32 で以下のようなものを用意しました。
テクスチャをインポートしてタイリング設定を Clampにします
まずは水平方向に動かすだけの最小限の動きができるようにつないでみます。
フレームアウトするので、次は表示範囲を拡げます。とりあえず12倍しました。
32x32 が 384x32になりました。
ただ絵が伸びるだけなので、今度は UVについてタイリングの値を変更します。
等倍になりました。あとは移動範囲をどうにかします。
ゲージの制御は 0～1.0 で動かしているので、これを利用するために Lerpノードを利用します。
Lerpノードは2点間を補間するので、最小と最大を調整するのに向いています。ゲージの長さと、絵の余白（ピクセルの透明部分）に合わせるのが簡単です。
サンプルでは12個分のサイズに拡大したので、最大の位置は右に動くので -11 した場所になります。
出来上がり
適当に12倍の長さで作りましたが、逆にゲージの長さが決まっている場合は、
まず用意した矢印テクスチャの横幅は 32px なので、ゲージの長さ を 32 で割ります。
例えばゲージの長さが 424px だと、424÷32 = 13.25 これが移動量になるので Lerpで扱う値になります 0 ～ 13.25 を往復します。
見た目に左端がスタートなので、0 ～ -13.25 になります。
とはいえゲージの端と絵的に合わせる必要があります。
結果的に テクスチャ左右半分ずつがゲージよりはみ出す形になるので、
タイリングの回数はこれに +1.0 すると、 14.25 でぴったり合わせることができます。
この計算方法でどんな長さのゲージとでも同期して動かせるようになります。
後からゲージの長さを調整するほうが簡単ですけどね。
56. ゲージと一緒に動きつつ跳ねる動き
ヨコ方向の動きは 上記の 55. を基本として、タテ方向に跳ねる動きを入れます。
ゲージが動かなくても、常時ぴょんぴょんしています。
用意したテクスチャは 32x48pxで、絵の上部に 16px 余白を入れました。
跳ねる動きはサインカーブを利用します。
通常のサインカーブからは -1.0～1.0 を往復するような値が取り出せます。
ここに絶対値に変換する Absノード を利用します。
プラスとマイナスという符号は関係なく、ゼロからの距離が結果として得られるので、結果的にマイナスをプラスに反転した形になります。
ノードで組むと以下のようになります。
Timeノードには Period という値を持っているので、これを変更しています。
サインカーブの1周期は 2π なので、円周率の２倍。
入力フォームに 円周率と *（アスタリスク）に続けて 2 を入力してENTERキーを押すと計算結果に置き換わるので便利。
この状態では、 0 ～ 1.0 をぴょんぴょんするので、移動量を掛けてやります。
あらかじめテクスチャに空けておいた余白を利用します。
縦 48px のテクスチャに対して 16px の余白を作ったので、 16÷48 = 0.333333...
おさらいですが テクスチャ内のピクセル位置や長さをUV座標に置き換えるには、解像度で割ります。
このサインカーブをUV座標の Vに加算するようにつないだら完成。
ぴょんぴょんします。
Scalarパラメータの Speed で跳ねる速度を調整できます。
ゼロにすると止まります。これを応用すると設定メニューとかのフォーカス切り替えで利用できます。サンプルを作ってみました。マウスオーバーでアクティブになります。
57. ゲージと一緒に動きつつパターンアニメーション
これもヨコ方向の動きは 55. を基本として、タテ方向にパターンアニメーションを入れます。
56. はただその場で跳ねてるだけなのに比べて、パターンアニメーションでは何かしらの時間を伴った動きが表現されるので、何かが進行しているイメージを想起させる効果が期待できます。なので、待ち時間とか進捗ゲージなんかに向いていると思います。ゲージが止まってても頑張ってる感じ、止まってないよという感じ がアピールできます。
まずはテクスチャから。
Photoshopのフレームアニメーション作成機能で描きました。
縦に並べます。
横方向には Clamp 、縦方向は Wrapにします。
パターンをパラパラマンガのように切り替えるのは、UVスクロールで行います。
一定間隔でV座標を一定量 動かしていきます。
1コマの大きさは、縦方向に8コマきっちりなので 1÷8 = 0.125
Timeノードの Periodには コマ数の 8 をセット。
ひたすら 0 から 7.99999999・・・ までを繰り返すのですが、小数部分をFloorノードで切り捨てるのでまっすぐではなく階段のような変化になります。
これを利用すると、一定間隔でコマ送りのように動かすことができるようになります。
Floor無しだと滑るように動きます。
↑ キャプチャが30FPSなので ゾートロープのように見えてますね
Floorで半端な小数を切り捨てた 0 ～ 7.0 に １コマの高さ 0.125 をかけると、V（縦）方向に 0.125ずつ移動していくことになります。
Floor を使う機会は結構多いと思う。
これも 56. と同じようにUV座標の Vに加算するようにつないだら完成。
今回のゲージはここまでです
スクリプトで制御するゲージと、デコレーションとしてのループアニメーション。シェーダーを使うことで一緒に扱いやすくなると思うのですがいかがでしょうか？
ちょっとしたループアニメーションなら、タイムラインを使わない方がいろいろ都合がよい場面も多いので、バリバリとシェーダーを活用していってもらえるといいなと思います。
ではでは
すてきなゲージライフを！
