みつまめ杏仁

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

Widgetコンポーネントにマテリアル

4.13にアップデートしてみたら、うれしい機能が追加されてた。

多分VRでWidget使いたいという声が多く寄せられたんじゃないかと想像してみたり。

Widgetはそのままだと、2Dだけど、とWidgetコンポーネントとしてWorld空間に置くと3次元が表示できる。DeadSpaceが再現できる。

ブループリントアクターから、Widgetコンポーネント としてビューポートに追加するんだけど、4.13からここにマテリアルがセットできるようになった!

f:id:hiyokosabrey:20160904211101p:plain

相変わらず Experimental(実験的)実装なまま・・・

 

マテリアル以外にも気になるパラメータがあるんだけど、とりあえずマテリアルで実験してみた。

適当な背景用画像を用意。

f:id:hiyokosabrey:20160904213625p:plain

で、これを使ってマテリアルを作成。SceneDepthを利用。

f:id:hiyokosabrey:20160904213710p:plain

Widgetに使うんだけど、コンポーネント用だとマテリアルドメイン(属性)は Surfaceでいいみたい。

ScreenDepth は、不透明モデルが描画されるタイミングで更新されるぽくて、そのDepth(深度)情報を元に if ノードで描くか描かないかを決めています。

 

次に、Widgetブループリントを作成。

といっても、上のマテリアルで適応するとWidget自身の描画がされないので、ひとまず四角い板を一つ。

f:id:hiyokosabrey:20160904214740p:plain

サイズは 適当に 1920x1080 。

SaveしてWidget完成。

 

次にブループリントアクターを作成します。

+Add Component ボタンから、Widgetコンポーネントを追加します。

f:id:hiyokosabrey:20160904215126p:plain

追加したら、エディタ右の Detailsタブを確認して、

Material という項目を探して用意したマテリアルをセット、

f:id:hiyokosabrey:20160904223631p:plain

すぐ下の User Interface という項目の、Widget Class に作ったWidgeブループリントをセットします。

f:id:hiyokosabrey:20160904215925p:plain

Draw Size に描画したい大きさを指定できるのですが、Widgetの中身に合わせてほしいので、Draw at Desired Sizeにチェックを付けておきます。

簡単なテストなんでブループリントはこのくらいで出来上がりです。

 

ではワールドに配置していきましょう。

適当なキューブとかスフィア(球)を置きます。ライトも適当に。

ブループリントもドラッグして配置します。右端がブループリントの中にいるWidgetコンポーネント

f:id:hiyokosabrey:20160904224930p:plain

これをWidget側に回り込むと・・・

f:id:hiyokosabrey:20160904225143p:plain

手前にいるのに、モデルより奥に描画されています。SceneDepth情報がうまく利用できているということです。

カメラに貼り付けたりビルボード的に表示できれば面白い使い方ができそうです。

 

4.13いいですね。

まだまだ検証しないといけないですが、また何か発見があれば記事を書こうと思います。

 

今回はこの辺で。