みつまめ杏仁

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

モノクロテクスチャに色を付ける

Unreal Fest 2016 Osaka に行ってきました。

興味深い講演ばかりであっという間でした。中でもヒストリアさんの講演でForeachLoopの処理に関数で定義したMakeArrayの検証が衝撃でした。

よく使ってるからというのもありますが、Pure型か通常型かで、速度に違いが出ます。

関数内でMakeArrayするのは、変数の初期化くらいしか思いついてなかったので、戻り値に配列を返してForeachLoopを回すときは注意が必要ですね。

ForeachLoopの中で、毎回Lengthノードが動いています。どちらかと言えばこれの方が気になったりします。JavaScriptActionScriptの処理上げで昔誰かが書いていたような・・・。

 

var array = ["aaa","bbb","ccc","ddd","eee"];

for (i=0; i < array.length; i++) {

    document.write(array[ i ]);

}

 

とループ中で、length を使うより

 

var array = ["aaa","bbb","ccc","ddd","eee"];

var al = array.length;

for (i=0; i < al; i++) {

    document.write(array[ i ]);

}

 

実際のところは、プログラマではないので分りませんが、こういったハックぽいのはワクワクします。

 

前置きが長くなってしまいましたが、モノクロテクスチャの色付けです。

Photoshopだと、グラデーションマップを使えば簡単です。これをUE4のマテリアルでやってみます。

f:id:hiyokosabrey:20160515233145j:plain

こんなテクスチャを用意してみました。24bitのTargaで保存してUE4でインポートします。

アルファチャンネルは無いので、フォーマットは G8 です。

テクスチャアセットが保存できたら、ここからマテリアルを作ります。

アセットアイコンの上で右クリックすると、コンテキストメニューが出てくるのでCreate Material を選びます。

f:id:hiyokosabrey:20160515233646p:plain

マテリアル編集開始です。

早速エラーが出ています。これはテクスチャのフォーマットが気に入らないようです。

f:id:hiyokosabrey:20160515233940p:plain

グレイスケールで保存してるようだけど、TextureSample ノードの設定が Colorになってるよ。というエラーです。設定を変えてあげると大人しくなります。

f:id:hiyokosabrey:20160515234528p:plain

Linear Grayscaleに変更します。

f:id:hiyokosabrey:20160515234548p:plain

 

色を付けるには Lerp ノードを使います。 Lキーを押しながらグラフをクリックすると簡単に呼び出せます。

f:id:hiyokosabrey:20160515234838p:plain

テクスチャのカラーPINを Lerpノードの Alpha につなぎます。

次に色付け用のVector型の変数かパラメータを2つ用意します。それぞれLerpノードのAとBのPINにつなぎます。

f:id:hiyokosabrey:20160515235449p:plain

はい出来上がりです。超簡単。

あとは、BaseColorかEmissive、UMGならFinalColor につないでやるだけです。

Photoshopほど柔軟ではありませんが、Lerpノードで2色のグラデーションマップができます。

f:id:hiyokosabrey:20160516002548j:plain

 

実は艦これ改の背景を再現しようとしているので、もう少し手を入れていきます。

f:id:hiyokosabrey:20160516001113p:plain

随分近づいてきました。

f:id:hiyokosabrey:20160516002330j:plain

このマテリアルをインスタンスにすると、いろんなカラーバリエーションを増やすことが簡単にできます。

f:id:hiyokosabrey:20160516002712j:plain

 

カラーをパラメータで持たせておくとブループリントから変更するのも面白いです。

例えば、UMGだとEventConstructでカラーを配列にセットしておきます。

f:id:hiyokosabrey:20160516004116p:plain

関数やマクロなんかで引数をもらって変更するようにしておいて、適宜呼び出します。

f:id:hiyokosabrey:20160516004226p:plain

f:id:hiyokosabrey:20160516004507j:plain

 

ではでは

今回はこの辺で