みつまめ杏仁

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

[3D]頂点移動でタブウィンドウ的な何かをつくる《拡張版》

今年の4月にメッシュでできたウィンドウ的な何かを頂点変形させる記事を書きました。その内容に関してコメントいただきましたので解決方法を《拡張版》としてを書くことにしました。「まず横幅を広げた後で縦方向に広げたい」という案件です。

limesode.hatenablog.com

 

過去記事では、タブの水平移動と縦方向に広がるウィンドウを、メッシュの頂点にテクスチャでマスクすることで実現しました。その時のマスクテクスチャがこちら。

f:id:hiyokosabrey:20180428114908p:plain  64x32 の実寸です。

 

これに対して今回用意したのはこれ。

f:id:hiyokosabrey:20180831004548p:plain

 

拡大すると、こんな感じ。

f:id:hiyokosabrey:20180831004804p:plain

メッシュのUVが分かりやすくなるようにオレンジのラインを入れています。

左右に緑色の四角を塗って、レイヤーブレンドを『覆い焼き(リニア)』にします。

f:id:hiyokosabrey:20180831004931p:plain

こうすることで、青く塗った部分(R:0, G:0, B:255)を壊さずに緑成分を重ねることができます。

f:id:hiyokosabrey:20180831005111p:plain

赤や青同様にこの緑成分を横方向の拡張に利用します。

 

さてさて、

これをUE4にインポートしたら、マテリアルを改造します。

前回はこんな風でした。

f:id:hiyokosabrey:20180828235019p:plain

今回はここに、頂点のプラスマイナスを判定してから緑チャンネルと乗算する処理を追加します。

f:id:hiyokosabrey:20180831004151p:plain

まず最初に頂点座標のうち、X座標について IF ノードで判定しています。

この値とテクスチャの緑成分を掛け算することによって、動かしたい頂点と動かしたくない頂点を分けてています。

さらに

IFノードの判定によって出てくる、-1、 0 、 1 という3つの値を利用することで、あとから足し算する際の方向をそれぞれの頂点位置に合わせることができます。

 

 

f:id:hiyokosabrey:20180831010551p:plain

 

 

プラス方向に動いてほしい頂点には、プラスの値を足し算して、

マイナス方向に動いてほしい頂点には、マイナスの値を足し算する必要があります。

 

最初実験していた時、

テクスチャでプラとスマイナスの値を作って加算していました。

何となくいい感じだったのですが、タブが一緒に動いていました。

黒の部分の値が計算されてしまって、マスクがうまく効いてないという状況でした。

 

今のところ、テクスチャの役割としては、カラーのある部分の頂点を動かす、ということになります。

 

以上でマテリアルは完成です。

 

次にアニメーション部分の改造です。ブループリントは前回こうなっていました。

f:id:hiyokosabrey:20180430151329p:plain

ここに、横幅を広げるタイムラインと、ノードを追加します。

タイムラインに横幅変化用のトラックを一つ追加。

f:id:hiyokosabrey:20180829002931p:plain

下段が横幅用。上段が縦幅用。 値は 0 → 1.0 に変化しています。

トラックが追加できたら、イベントグラフの方。

f:id:hiyokosabrey:20180829003216p:plain

カスタムイベントの引数(Inputs)に横幅を受け取るピンを追加して、タイムラインの値と掛け算しています。

 

このカスタムイベントを呼ぶところで、パラメータをセット。

f:id:hiyokosabrey:20180829003557p:plain

これで準備完了です。

 

テストしてみましょう。

f:id:hiyokosabrey:20180831013228g:plain

なんとか、うまく動いてくれました。

ちょっとややこしい作りになりますが、うまく応用できればいろいろ表現の幅が広がりそうです。

いかがだったでしょうか?

最近、小ネタをTwitterの方に呟くようになったので、ブログの更新ペースが伸びませんが、何かあれば当ブログにコメントいただくか、Twitterの方からつついていただけるとありがたいです。

 

ではでは

ステキなウィンドウライフを!