読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

WidgetでPieMenu的なのを作ってみる

UE4 UI UMG Widget マテリアル

f:id:hiyokosabrey:20160314224345p:plain

インフルエンザで寝込んでたりしてあまり時間が取れなかったので、久しぶりの更新になってしまいました。正直ネタに困ってたというのもあります。

さてさて

突然ですがハイライト部分がくるくると切り替わるサンプルを作ってみました。

 

テクスチャを用意します。サイズは512x512。

f:id:hiyokosabrey:20160314224505p:plain

エコで行きたいのでMaskにします。

f:id:hiyokosabrey:20160314224755p:plain

マテリアルを用意します。

まずは基本のカラーとフォーカスしてるときのハイライトカラーの部分です。

f:id:hiyokosabrey:20160314225246p:plain

基本のカラーは手っ取り早くマスクの白い部分に0.05を掛けてグレーとして利用。

そこにハイライトカラーを加算で乗せるカタチです。

左に伸びているのが以下の部分。ちょっとややこしいので画像を2つに分けてます。

後で変更するためにスカラーパラメータをひとつ Section という名前でつないでいます。

f:id:hiyokosabrey:20160314230024p:plain

VectorToRadialValueノードは、下図のようなグラデーションを生成します。

f:id:hiyokosabrey:20160314230126p:plain

角度 0° から 360° を 0.0 ~ 1.0 として扱うことができて便利なんだけど、

右から逆時計回りに1.0~0.0となってて、なんとなく逆がいいなーということで、

これを OneMinusノードで反転してます。

f:id:hiyokosabrey:20160314230311p:plain

でこれを if ノードを使って明るいとこと暗いとこにバキっと分けます。

このノードはパッと見分りにくいんだけど、慣れたら結構便利です。

例えば 下のような状態の時。

 f:id:hiyokosabrey:20160314232653p:plain

0.125~0.25 の範囲を明るくしたいので、if ノードを2つ使います。

AのPINはグラデーション

BのPINは比較のための値(パラメータで可変します)。

 

1つ目

    A>=B   → 0.125 以上 は 1.0

    A==B   → 0.125 と同じなら 1.0

    A<B   → 0.125 未満は 0.0

 f:id:hiyokosabrey:20160314233823p:plain

2つ目

    A>=B   → 0.25 以上 は 0.0

    A==B   → 0.25 と同じなら 0.0

    A<B   → 0.25 未満は 1.0

 f:id:hiyokosabrey:20160314234235p:plain

この2つをMultiplyで掛け合わせるとこうなります。

 f:id:hiyokosabrey:20160314234355p:plain

あとはこれをさらにテクスチャと掛けるだけでOK。

マテリアルはこれで完成。

 

つぎにWidgetを用意します。

編集モード Designer で、Imageパーツをひとつレイアウトします。

サイズを512x512にして、AppearanceのBrush > Image のところにさっき作ったマテリアルをセットします。

f:id:hiyokosabrey:20160314235759p:plain

f:id:hiyokosabrey:20160314235358p:plain

パーツは以上です。

編集モードをGraphに切り替えます。

マテリアルのパラメータを扱うためにはマテリアルインスタンスダイナミックにする必要があるので、変数化しておきます。

f:id:hiyokosabrey:20160315001547p:plain

Get Dynamic Materialノードは、Widget内でのみ使える便利なノードです。

 

次にハイライト位置 を保持する変数をInt型で一つ用意します。

とりあえず SectionIndex と命名。

 

準備が整ったので関数を作っていきます。

まずは、ハイライト部分(明るいとこ)をセットする関数から。

f:id:hiyokosabrey:20160315001434p:plain

Integer型の引数を一つ受け取って、保持するための変数にセット。それをマテリアルに渡すだけです。

 

あとはSectionIndex の値を増やしたり減らしたりする関数。

増やす方の関数はシンプル。

f:id:hiyokosabrey:20160315002638p:plain

算術ノード は『剰余』という割った余りという意味で、 8で割った余りということなので、0、1、2、3、4、5、6、7、0、1、2、3、4、・・・という風に0~7までの数字を取り出すことができます。ひたすら1ずつ足すだけなのに結果はループするので結構便利です。

 

最後に減らす方。

こちらは0以下でマイナスの数値になると%は使えないので、0以下になると強制的に7にするように Selectノードを使っています。

f:id:hiyokosabrey:20160315003255p:plain

これでWidgetは完成です。

 

うまく動くか確認するために、レベルブループリントから呼び出してビューポートに配置します。

f:id:hiyokosabrey:20160315004039p:plain

カーソルキー割り当てて関数を呼び出します。

f:id:hiyokosabrey:20160315004110p:plain

 いかがでしょうか?

f:id:hiyokosabrey:20160315004636g:plain

 パーツが一つなので、シンプルな見た目ですが、マテリアルを工夫すればもう少しアレンジできそうな気がします。