インフルエンザで寝込んでたりしてあまり時間が取れなかったので、久しぶりの更新になってしまいました。正直ネタに困ってたというのもあります。
さてさて
突然ですがハイライト部分がくるくると切り替わるサンプルを作ってみました。
テクスチャを用意します。サイズは512x512。
エコで行きたいのでMaskにします。
マテリアルを用意します。
まずは基本のカラーとフォーカスしてるときのハイライトカラーの部分です。
基本のカラーは手っ取り早くマスクの白い部分に0.05を掛けてグレーとして利用。
そこにハイライトカラーを加算で乗せるカタチです。
左に伸びているのが以下の部分。ちょっとややこしいので画像を２つに分けてます。
後で変更するためにスカラーパラメータをひとつ Section という名前でつないでいます。
VectorToRadialValueノードは、下図のようなグラデーションを生成します。
角度 0° から 360° を 0.0 ～ 1.0 として扱うことができて便利なんだけど、
右から逆時計回りに1.0～0.0となってて、なんとなく逆がいいなーということで、
これを OneMinusノードで反転してます。
でこれを if ノードを使って明るいとこと暗いとこにバキっと分けます。
このノードはパッと見分りにくいんだけど、慣れたら結構便利です。
例えば 下のような状態の時。
0.125～0.25 の範囲を明るくしたいので、if ノードを２つ使います。
AのPINはグラデーション
BのPINは比較のための値（パラメータで可変します）。
１つ目
A>=B → 0.125 以上 は 1.0
A==B → 0.125 と同じなら 1.0
A<B → 0.125 未満は 0.0
２つ目
A>=B → 0.25 以上 は 0.0
A==B → 0.25 と同じなら 0.0
A<B → 0.25 未満は 1.0
この２つをMultiplyで掛け合わせるとこうなります。
あとはこれをさらにテクスチャと掛けるだけでOK。
マテリアルはこれで完成。
つぎにWidgetを用意します。
編集モード Designer で、Imageパーツをひとつレイアウトします。
サイズを512ｘ512にして、AppearanceのBrush > Image のところにさっき作ったマテリアルをセットします。
パーツは以上です。
編集モードをGraphに切り替えます。
マテリアルのパラメータを扱うためにはマテリアルインスタンスダイナミックにする必要があるので、変数化しておきます。
Get Dynamic Materialノードは、Widget内でのみ使える便利なノードです。
次にハイライト位置 を保持する変数をInt型で一つ用意します。
とりあえず SectionIndex と命名。
準備が整ったので関数を作っていきます。
まずは、ハイライト部分（明るいとこ）をセットする関数から。
Integer型の引数を一つ受け取って、保持するための変数にセット。それをマテリアルに渡すだけです。
あとはSectionIndex の値を増やしたり減らしたりする関数。
増やす方の関数はシンプル。
算術ノード ％ は『剰余』という割った余りという意味で、 8で割った余りということなので、0、1、2、3、4、5、6、7、0、1、2、3、4、・・・という風に０～7までの数字を取り出すことができます。ひたすら１ずつ足すだけなのに結果はループするので結構便利です。
最後に減らす方。
こちらは０以下でマイナスの数値になると％は使えないので、0以下になると強制的に7にするように Selectノードを使っています。
これでWidgetは完成です。
うまく動くか確認するために、レベルブループリントから呼び出してビューポートに配置します。
カーソルキー割り当てて関数を呼び出します。
いかがでしょうか？
パーツが一つなので、シンプルな見た目ですが、マテリアルを工夫すればもう少しアレンジできそうな気がします。
