引き続き、シェーダーに慣れるためのチュートリアル的なゲージを100本作ろうぜという企画です。UI用途を想定していて、扱うのは2Dを基本としています。UVの加工やピクセルの表現バリエーションを増やすのが主な方針です。
年度末やらでいろいろと気ぜわしく、砂やら粉やらで体調も停滞気味だったりで、なかなか記事に手を付けられていなかったけど、頑張って書いていきます。
UVを細工するといろいろ便利に使えるので、どんどん利用していきましょう。ということで今回はシンメトリーな波形を作ります。41～43 のゲージの応用といった感じです。
結構お世話になるサインカーブ。慣れておいて損はないです。正直、中学生のとき赤点とって以来、今でも数学は苦手です。UIの仕事をするようになってから使った方が便利なことに気づいて、いろいろ試しているうちに怖くはなくなりました。かなり限定的な使い方なんで、定理とか公式は からっきしダメですけどね。
緩急があって値が循環するところがUI表現と相性が良いと思っています。
仕組みとしては TexCoordノードから U と V を取り出して、それぞれを加工して合成します
調整して合成したものを Step か SmoothStep で塗分けると波形が出来上がります。
今回 V方向を反転させています。
では実際に作ったものをみていきましょう。
74. サインカーブ
まずは、TexCoord を Component Mask ノードで R と G にばらします。
そこからそれぞれでゴニョゴニョします。
最後に足し算して合成します。
アンリアルエンジンの Sineノードは、使いやすくなっていて、θ に相当する値が 0～1 で 一周したことになります。
1周を 度°（degree）で扱いたければ ｎ/360 で、 ラジアン（radian）で扱いたければ ｎ/2π にすればいいのでとても便利です。
このケースでは、ざっくりと波の数ということで Waves というScalarParameter を掛けています。
Sine につなぐ前に Time ノードで時間を足すことで波が動くようになります。
Sineノードから出てきた値 -1～ +1 の範囲の値を掛け算と足し算で調整します。
この調整次第で、波形の見た目を変えることができます。
波の形は、キャンバスにレイアウトした時のアスペクト比でも変わるので、実際に表示したい比率に合わせて調整します。
UEのマテリアルエディタでも調整は可能です。
エディタウィンドウの左上にある PreviewSize を変更することで想定するサイズを確認できます。
ゲージの残量によっても変化すると面白そうです。
75. ノードを減らす
74. でいろいろ計算していますが、実は無くてもいいノードがあります。
お気づきでしょうか？
答えはここです。
Multiply と 1-x ノードが無くなっています。
結果が同じになっているのは、ほかの場所で辻つまを合わせているからです。
まず、1-x が無いので、SmoothStep の Min と Max が逆になります。
また、V方向の中央が 0 で上下の端が 0.5になります。 サインカーブの形を調整しているパラメータが変わります。
この差をパラメータで吸収するようにします。
それなりに法則はありますが、理屈がわかるまではムムム・・・となります。
例えるなら、今まで 3×4＝12 とやっていたところを、 2×6＝12 に変える感じです。
シェーダーって「出来た！」といって実装してしまうと、しばらく触らないことが多いので、忘れたころに「？？？」となることが多い印象。しっかりメモを残して共有するといいかも。
人間から見てわかりにくくはなるけど、計算量が減るのであれば、チリツモでも処理上げには貢献できるので、こういった最適化はできるに越したことはありません。
つぎは、テクスチャを使ってランダムな形を作ります。
76. ノイズテクスチャを使う
波形をノイズテクスチャに変えてみたらこんな表現が可能です。
128x128
V方向は 74. と同様です。ノイズテクスチャのランダムな輝度がサインカーブの波形の代わりに合成されて、音声波形のような趣になりました。
ゲージの長さによって違う値を波形に掛け算することで波の強さを２段階にしています。
テクスチャの解像度と表示サイズとのバランスで雰囲気が変わります。
いろいろ試すと新たな発見があるかもしれません。
UI表現的にどこまで応えるか次第ですが、波形についての造詣があれば、計算でよりリアルな波や、意味のある波形が作れると思います。
そのあたりは有識者を訪ねて三顧の礼で教えを賜るか、他人に頼らず雰囲気重視でフェイクを貫くか。
表現したいものがあればどんどん突き詰めていくと、提案できるものが広がっていくし、アイデアが選ばれなかったとしても、技術となって確実に手に残ります。
今回は以上の３本です
ScalarParameterノードをパラメータとしてつないで調整に使っていますが、ブループリントやタイムラインから操作すると演出としても使えます。値をいじってみてどういった変化になるか解かってくると、アレンジや最適化のヒントになったりします。
マイペースでなかなか進みが遅いですが、ようやく 3/4 まで来ました。あと24本。
仕事のほうも落ち着いてきたので頑張る。
ではでは
素敵なゲージライフを！
