みつまめ杏仁

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

マテリアルで棒グラフを作る

カラフルな棒グラフをマテリアルで作ってみたら以外に簡単にできたのでメモ。

↓どこかで見たことがあると思いますが、UE4で再現してみました。

f:id:hiyokosabrey:20160730125451p:plain

割合の計算はしないタイプで、パラメータをそのまま追加していきます。

 

マテリアルのみでテクスチャーは使いません。

ということで、まずマテリアルファンクションを作ります。

作り方を書いてるので過去記事貼っておきます。

limesode.hatenablog.com

マテリアルファンクションを作っておくと、繰り返す処理をするときや、いつもの同じ処理をさせるときに手数が減ってラクできます。

今回はこんな感じ。

f:id:hiyokosabrey:20160730152458p:plain

赤いノードがたくさんありますが、入力を受け取るのはInputと付いたノードで3つあります。

まんなか辺りにドカンといるのが、今回のキモとなる GeneratedBand ノードです。

band で検索すると見つかります。

f:id:hiyokosabrey:20160730153114p:plain

2つとも パラメータ入力ピン に Offset を持っています。~OffsetBands の方はスペルが複数形なのと、中に Bands というスカラー型の入力ピンを持っている程度の違いしかないのですが、ノード名にOffset が入っている理由がいまひとつぴんとこないです。

さてさて今回は GeneratedBand の方を使います。

f:id:hiyokosabrey:20160730154711p:plain

(カッコ)の中の文字は受け取る値の型を表しています。

S ・・・ Scalar (スカラーベクター型と違って値が単品)

B ・・・ Boolean (ブーリアン型  True か False の2つの値のみ)

V2 ・・・ Vectorベクタースカラーの値が2つ合わさった状態 UVとか)

V3 ・・・ Vectorベクタースカラーの値が3つ合わさった状態 RGBとかXYZ

V4 ・・・ Vectorベクタースカラーの値が4つ合わさった状態 RGBAとか)

ピンの色がグレーなのは、初期値がセットされているので何もつながなくても大丈夫。という意味です。

 

各ピンの値がどう働くのか調べてみました。

f:id:hiyokosabrey:20160730160336p:plain

 

f:id:hiyokosabrey:20160730161053p:plain

この値を入力するのは、Static Bool ノードを使います。

f:id:hiyokosabrey:20160730161135p:plain

 

f:id:hiyokosabrey:20160730161820p:plain

Offset の値でバンドの移動させる方向と移動する量が指定できます。

Compareの値によっては移動量に気を付ける必要があります。

 

f:id:hiyokosabrey:20160730162825p:plain

 

f:id:hiyokosabrey:20160730162431p:plain

今回は横方向のゲージで左端から増えていって、境界をクッキリさせたいので、いくつか固定値にしています。

 

Direction Switch ・・・ false

Compare ・・・ 0.0

Sharpness ・・・ 1.0

 

幅と位置、カラーが変動するのでそれを入力値用のノードをつないでいます。

このマテリアルファンクションの設定で Expose Library というのがあるのでチェックを付けて保存します。(付けておくとノード検索できるようになり便利です)

f:id:hiyokosabrey:20160730163413p:plain

 

マテリアルファンクションができたので、普通のマテリアルを作ります。

さっき作ったマテリアルファンクションを取り出して、

f:id:hiyokosabrey:20160730163956p:plain

ConstantV3 ノードで『色』を、ScalarParameterノードで『幅』をつなぎます。

次のカラーのために Subtract(引き算)ノードを取り出します。

このセットをまるっと複製してつないでいきます。なんか編み物みたいな感じ。

f:id:hiyokosabrey:20160730164823p:plain

とりあえず 8色分つなぐとこんな感じ

f:id:hiyokosabrey:20160730165248p:plain

これをトーナメント表のように Add ノードを使って足し算していきます。

f:id:hiyokosabrey:20160730165613p:plain

最終的にこうなりました。

f:id:hiyokosabrey:20160730165630p:plain

簡単にUMGで表示するので、マテリアルドメインを UserInterface に変えています。

スタティックメッシュやスプライトの場合は Surfaceのままで大丈夫です。

スカラーパラメータのパラメータ名はすべて違う名前にしないと誤作動するのでご注意。

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

 

実験するために Widgetを用意します。キャンバスにImageパーツをドラッグ&ドロップしたら、適当なサイズにします。

f:id:hiyokosabrey:20160730170028p:plain

このパーツに、作ったマテリアルをセットします。

Detailsタブの Appearance > Brush > Image からセットできます。

f:id:hiyokosabrey:20160730170241p:plain

コンテンツブラウザでマテリアルをフォーカス(ハイライト)しておいて、白い矢印を押すとラクちんです。

 

次に、編集モードを Graphに変えて、Widgetブループリントを編集します。

Float型の配列変数を用意します。グラフに初めから置かれているEventConstruct ノードにつないで、マテリアルに渡す値を8色分設定します。

f:id:hiyokosabrey:20160730170545p:plain

 ここでダイナミックマテリアルインスタンスを作っておきます。

キャンバスに置いたImageパーツが エディタ左の Variables 欄に並んでいるはずなので、グラフにドラッグ&ドロップしたら Get Dynamic Material ノードをつないで ReturnValue ピンの上で右クリックします。Promote to Variable を選択すると変数が追加されるので良い感じにリネームします。

 

次に値を反映するための関数を用意します。

Float型の配列を受け取れるようにします。

f:id:hiyokosabrey:20160730171643p:plain

その受け取った配列から Getノードで一つづつ値を取り出しては Set Scalar Parameterノードに渡していきます。

f:id:hiyokosabrey:20160730171505p:plain

 

最終的にこんな感じ。

f:id:hiyokosabrey:20160730171930p:plain

関数ができました。

 

とりあえずさくっと実験表示してみたいので、最初のEventConstructの続きにつなぎます。

f:id:hiyokosabrey:20160730172312p:plain

Widgetはこれで完成です。

 

あとは、いつものようにレベルブループリントからビューポートに追加するだけです。

f:id:hiyokosabrey:20160730175328p:plain

合計値が 1.0を越えないようにいろいろ値を入れてみると楽しいです。

f:id:hiyokosabrey:20160730175926p:plain

 

UMGでスケールアニメーションをあらかじめ用意しておいて、値を渡すと内容が変わるタイミングでアニメーションを再生すると、けっこうリッチな感じになるのでオススメです。

 

今回はこの辺で。

 

素敵なゲージライフを