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

みつまめ杏仁

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

あのニュゥーって伸びながら出てくるヤツ

スーファミとかメガドライブの頃かな、昔のゲームでよく見かけた気がするんだけど、あのニュゥーって伸びながら絵が出来上がっていくやつをマテリアルで再現してみた。

f:id:hiyokosabrey:20160807193613p:plain

 

ちょっと大きいので全体図を のパートに分けて紹介します。

f:id:hiyokosabrey:20160807195104p:plain

 

まずは から。

まとめのとこなので、Add(加算)とMultiply(乗算)ばかりです。

f:id:hiyokosabrey:20160807195630p:plain

つぎにとなりの

f:id:hiyokosabrey:20160807200129p:plain

ここでテクスチャをつなぎます。上下に2つ並んでいるのは同じテクスチャサンプルノードなので複製してOK。UVの切り出しが違うので2つに分けています。

下のValueStepLinearGradientノードは、正常な部分伸びてる部分を分けるために使います。

次に 正常な部分の

f:id:hiyokosabrey:20160807201315p:plain

伸ばす部分を切り出すために1ピクセル分をテクスチャサイズで割っています。

 

最後に引き伸ばす部分の

f:id:hiyokosabrey:20160807201859p:plain

扱う値がUVなので 2Vector にするために、 AppendVectorノードをつないでいます。

確認のために、サインカーブを生成してつないでいますが、実際にはScalarParameterノードにして、タイムラインなどブループリント経由で数値を渡すことになるかと思います。

f:id:hiyokosabrey:20160807202531p:plain

できあがりです。

 

f:id:hiyokosabrey:20160807202858p:plain

f:id:hiyokosabrey:20160807202908p:plain

f:id:hiyokosabrey:20160807202913p:plain

 

テクスチャの大きさで絵が切れるので、端っこがスパッと切れるのが気になる場合は、

グラデーションで端っこがふわっと黒くなるテクスチャを作ってOpacityに掛けてあげればいいと思います。UVの切り出し方向と移動の方向を変えると、タテ方向や逆方向も可能です。

 

ではでは今回はこの辺で。