暑いですねぇ、外は溶けるより先に焦げそうなくらいの日差し。日当たりのいい場所にある自転車置き場に数分停めただけで、立ちこぎ必至のシリコゲルサドル完成。
さてさて
今回は予告通りテクスチャのUVを移動させて作るゲージを紹介します。
主な特徴としては、ゲージの形状とカラーの連動です。カラーは次回に回すとしてまずはゲージの形状で端が丸いやつを例にしてみます。
38. テクスチャのUVを動かすやつ
テクスチャはこれ一枚
容量節約のためグレイスケールです。そのままアルファとして利用します。
必ず端のピクセルは最低 1ピクセルは真っ黒 (0, 0, 0) にします。
テクスチャをインポートしたら、タイリング設定を Clamp にします。
横方向だけなら、X-axis を変更するだけで大丈夫です。
いままで Stepノードでゲージを増減させていましたが、今回はテクスチャのU値を動かすようにつなぎます。
上下方向は動いてほしくないので、TexCoordノードから UとVを バラ にします。
U だけにパラメータを加算して元に戻すと出来上がり。
テクスチャサンプラーが 2つあって、どちらも同じテクスチャです。
TexCoordノードからの UV座標を TextureSamplerノードが利用します。
このとき、ちょいといじってやると、サンプラーが いじられた後のUV座標を使ってテクスチャのカラーを取り出し（サンプリング）次へ流します。
画面に描画する領域全てを描き切るまで、このUV座標をもとにテクスチャのカラーを拾ってゆきます。
何もしない場合はテクスチャのすべてが使われます。
例えば U に対して +0.25 したとすると、
0.25 右にずれた位置をサンプラーは拾うので、結果 左にずれた絵になります。
この辺りは慣れてしまえばどうってことはないです。適当に動かしてみたら「逆だったわ」ということもよくあります。Addノードでマイナスの値を足すか、Subtractノードに変えてしまうのもアリです。
今回のテクスチャの場合、タイリング設定を Wrap から Clamp に変えたので、
+1.0 もしくは -1.0 すると 絵がフレームアウトしたような状態になります。
テクスチャの端が (0, 0, 0) じゃなかった場合、引き伸ばされた世界がそこにあります。
UV移動の仕組みがだいたいわかったところで、今回はこの辺で
次回はグレースケールではなく普通のテクスチャで作ります。
ではでは
ステキなゲージライフを！
