カラフルな棒グラフをマテリアルで作ってみたら以外に簡単にできたのでメモ。
↓どこかで見たことがあると思いますが、UE4で再現してみました。
割合の計算はしないタイプで、パラメータをそのまま追加していきます。
マテリアルのみでテクスチャーは使いません。
ということで、まずマテリアルファンクションを作ります。
作り方を書いてるので過去記事貼っておきます。
マテリアルファンクションを作っておくと、繰り返す処理をするときや、いつもの同じ処理をさせるときに手数が減ってラクできます。
今回はこんな感じ。
赤いノードがたくさんありますが、入力を受け取るのはInputと付いたノードで3つあります。
まんなか辺りにドカンといるのが、今回のキモとなる GeneratedBand ノードです。
band で検索すると見つかります。
2つとも パラメータ入力ピン に Offset を持っています。~OffsetBands の方はスペルが複数形なのと、中に Bands というスカラー型の入力ピンを持っている程度の違いしかないのですが、ノード名にOffset が入っている理由がいまひとつぴんとこないです。
さてさて今回は GeneratedBand の方を使います。
(カッコ)の中の文字は受け取る値の型を表しています。
S ・・・ Scalar (スカラー型 ベクター型と違って値が単品)
B ・・・ Boolean (ブーリアン型 True か False の2つの値のみ)
V2 ・・・ Vector (ベクター型 スカラーの値が2つ合わさった状態 UVとか)
V3 ・・・ Vector (ベクター型 スカラーの値が3つ合わさった状態 RGBとかXYZ)
V4 ・・・ Vector (ベクター型 スカラーの値が4つ合わさった状態 RGBAとか)
ピンの色がグレーなのは、初期値がセットされているので何もつながなくても大丈夫。という意味です。
各ピンの値がどう働くのか調べてみました。
この値を入力するのは、Static Bool ノードを使います。
Offset の値でバンドの移動させる方向と移動する量が指定できます。
Compareの値によっては移動量に気を付ける必要があります。
今回は横方向のゲージで左端から増えていって、境界をクッキリさせたいので、いくつか固定値にしています。
Direction Switch ・・・ false
Compare ・・・ 0.0
Sharpness ・・・ 1.0
幅と位置、カラーが変動するのでそれを入力値用のノードをつないでいます。
このマテリアルファンクションの設定で Expose Library というのがあるのでチェックを付けて保存します。(付けておくとノード検索できるようになり便利です)
マテリアルファンクションができたので、普通のマテリアルを作ります。
さっき作ったマテリアルファンクションを取り出して、
ConstantV3 ノードで『色』を、ScalarParameterノードで『幅』をつなぎます。
次のカラーのために Subtract(引き算)ノードを取り出します。
このセットをまるっと複製してつないでいきます。なんか編み物みたいな感じ。
とりあえず 8色分つなぐとこんな感じ
これをトーナメント表のように Add ノードを使って足し算していきます。
最終的にこうなりました。
簡単にUMGで表示するので、マテリアルドメインを UserInterface に変えています。
スタティックメッシュやスプライトの場合は Surfaceのままで大丈夫です。
スカラーパラメータのパラメータ名はすべて違う名前にしないと誤作動するのでご注意。
これでマテリアルは完成です。
実験するために Widgetを用意します。キャンバスにImageパーツをドラッグ&ドロップしたら、適当なサイズにします。
このパーツに、作ったマテリアルをセットします。
Detailsタブの Appearance > Brush > Image からセットできます。
コンテンツブラウザでマテリアルをフォーカス(ハイライト)しておいて、白い矢印を押すとラクちんです。
次に、編集モードを Graphに変えて、Widgetブループリントを編集します。
Float型の配列変数を用意します。グラフに初めから置かれているEventConstruct ノードにつないで、マテリアルに渡す値を8色分設定します。
ここでダイナミックマテリアルインスタンスを作っておきます。
キャンバスに置いたImageパーツが エディタ左の Variables 欄に並んでいるはずなので、グラフにドラッグ&ドロップしたら Get Dynamic Material ノードをつないで ReturnValue ピンの上で右クリックします。Promote to Variable を選択すると変数が追加されるので良い感じにリネームします。
次に値を反映するための関数を用意します。
Float型の配列を受け取れるようにします。
その受け取った配列から Getノードで一つづつ値を取り出しては Set Scalar Parameterノードに渡していきます。
最終的にこんな感じ。
関数ができました。
とりあえずさくっと実験表示してみたいので、最初のEventConstructの続きにつなぎます。
Widgetはこれで完成です。
あとは、いつものようにレベルブループリントからビューポートに追加するだけです。
合計値が 1.0を越えないようにいろいろ値を入れてみると楽しいです。
UMGでスケールアニメーションをあらかじめ用意しておいて、値を渡すと内容が変わるタイミングでアニメーションを再生すると、けっこうリッチな感じになるのでオススメです。
今回はこの辺で。
素敵なゲージライフを