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

みつまめ杏仁

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

1枚のテクスチャから多重スクロール

UE4 UMG マテリアル Widget

久しぶりの更新です。

最近はお絵かきの方に精を出してました。

さてさて、多分もうどこかで既にやられてると思いますが、多重スクロールです。

f:id:hiyokosabrey:20160402214323j:plain

4重です。これを1枚のテクスチャで、一つのマテリアルで作ります。

まずはテクスチャから。

Photoshopを使います。RGBAの4チャンネルを自由に編集できるソフトは、Photoshop以外にあるのでしょうか? Photoshopサマサマです。

ベタ塗りレイヤーを3つ使います。調整しやすいのと、見た目に何色のレイヤーかわかりやすいのでコスパ的によくお世話になってます。

f:id:hiyokosabrey:20160402215214p:plain

カラーは赤緑青の3色。

それぞれの輝度は以下。

f:id:hiyokosabrey:20160402224303p:plain

べた塗りレイヤーに、レイヤーマスクがもれなく付いてくるので、ここを編集します。

スクロールさせる方向にもよりますが、タイリングするので、上下左右がつながるように描いておきます。

アルファチャンネルにも適当に雲模様でも描いておきます。

f:id:hiyokosabrey:20160402225114p:plain

Photoshopの雲模様(フィルター > 描画 の中)は、勝手にシームレスにしてくれるので助かります。

f:id:hiyokosabrey:20160402225329p:plain

 この3つのレイヤーのブレンドを、覆い焼き(リニア)-加算 にします。

こんな↓見た目になれば完成です。

f:id:hiyokosabrey:20160402225759p:plain

覆い焼き(リニア)-加算 は、単純にリニア(直線)で補正無しに加算します。

これをTarga形式の32bitとかで書き出してアンリアルエンジンにインポートします。

設定は以下。基本ミップマップ無しの非圧縮です。

f:id:hiyokosabrey:20160402230307p:plain

 

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

 基本のノードは 5つ。

 

Texture Coordinate ・・・ タイリングの回数(=絵の伸び具合)

Panner ・・・ スクロールスピード

Texture Sample ・・・ テクスチャ

Constant3Vector ・・・ カラー

Multiply ・・・ カラーを乗算して色を付ける

 

以下のようにつなぎます。これはアルファチャンネルの場合。

f:id:hiyokosabrey:20160402230831p:plain

↑を複製(Ctrl+W)してRGBの分も並べたら、Addノードでくっつけます。

f:id:hiyokosabrey:20160402232134p:plain

 TextureSampleノードから出ているPINにご注意。

最後1本にまとめるためにAdd(加算)ノードにつないでいます。

Widgetで利用するつもりなので、Material Domain は User Interface を選択しています。

仕上げに、スクロールスピードを調整します。

Pannerノードの設定値を変更します。下図は参考値です。

f:id:hiyokosabrey:20160402233920p:plain

Speed Y に正の数を入れているので、下から上にスクロールすることになります。

負の数を入れると上から下にスクロールします。

数値が小さいほどゆっくり動きます。

 

マテリアルは一旦完成で、あとは調整するだけです。

 

Widgetを用意します。

Designerモードで、Imageパーツをキャンバスにドラッグ&ドロップして配置します。

f:id:hiyokosabrey:20160403003746p:plain

Details(詳細)タブの Appearance > Brush > Image に作ったマテリアルをセットします。

f:id:hiyokosabrey:20160403004042p:plain

これで完成です。

この状態でもマテリアルは動いているので確認できます。

 

 あとは 表示用のブループリントから、このWidgetを呼び出してViewportに追加するだけです。

f:id:hiyokosabrey:20160403004349p:plain

 

テクスチャの状態やスクロールスピード、タイリングの量を調整すれば結構遊べます。

タイリングの量はTextureCoordinateノードの中にあります。この値をブループリントからリアルタイムに変化させればワープ表現にも使えそうです。

サインカーブとかで揺れを入れたりすると、風の表現もできるかも。

 

まぁお気づきだと思いますが、グレースケールの8bitテクスチャを何枚か使っても同じことができます。

メリットはアセットの数くらいでしょうか・・・