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

みつまめ杏仁

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

UMGのイメージをマテリアル操作で切り替え

UE4 UMG Widget UI

f:id:hiyokosabrey:20160113003400p:plain

UMGで画像を扱うときに、マテリアルを使うとテクスチャの一部分だけ切り出して使うことができます。さらにテクスチャのUVを移動させることで、アイコンを切り替えたりロール式のカウンタを再現といった使い方なんかができます。

 

こんなテクスチャを用意してみました。

f:id:hiyokosabrey:20160112194801p:plain

256x256 で アイコン1個のサイズが 48x48です。

絵柄は、Windowsにバンドルされてるフォント Webdingsからチョイスしました。

↑に貼った画像はアルファチャンネルの状態です。

 

32ビットのTarga形式で保存したらコンテンツブラウザにドラッグ&ドロップ。

MipMapの設定を変更し、ドットの荒れを回避するために圧縮形式をUserInterface2Dにします。

f:id:hiyokosabrey:20160112195925p:plain

設定変更したら、Reimportボタン、保存ボタンの順に押して編集ウィンドウを閉じます。

そのままコンテンツブラウザのテクスチャアセットの上で、右クリックしてメニューから、Create Materialを選択します。この方が少しだけ手間が省けるからです。

できたマテリアルアセットに名前を付けて編集開始です。

f:id:hiyokosabrey:20160112200736p:plain

UMGで利用するので、Material Domainを User Interfaceに変更します。

アルファチャンネルも使うので、Blend Mode を Translucent にします。

f:id:hiyokosabrey:20160112201013p:plain

一旦接続が切れるので、つなぎなおします。

f:id:hiyokosabrey:20160112201237p:plain

ここにUV値を制御する Texture Coordinate ノードをつなぎます。

f:id:hiyokosabrey:20160112202621p:plain

アイコンの大きさが 48x48なので、48 ÷ 256 = 0.1875

この数値を Tilingのところに入力します。

一旦コンパイルして保存します。

 

Widgetを用意します。

f:id:hiyokosabrey:20160112203505p:plain

 Imageパーツを配置したら、Detailタブの Appearance > Brush > Image のところで作っておいたマテリアルをセットします。

表示サイズを 48x48にして、あとは、Is Variableのチェックが付いていればOK。

 

編集モードをGraphに切り替えます。

 テクスチャのUV値を保存しておく配列変数を用意します。まとめて扱うのに便利なVector2D型にします。

f:id:hiyokosabrey:20160112234314p:plain

テクスチャの中に、アイコンは48x48なので 0.1875間隔に並んでいます。

f:id:hiyokosabrey:20160112234105p:plain

これを Make Arrayノードにセットします。配列のSetノードからドラッグすると簡単に見つかります。

f:id:hiyokosabrey:20160112205453p:plain

数があるとちょっと面倒だけど、開発の途中で順番が入れ替わったり欠番がでたりすることがあるので、後々メンテがラクです。

(UE4の配列変数は値のセットする操作がちょっと煩わしい・・・)

 

次にアイコンを指定したやつにセットする関数を用意します。

f:id:hiyokosabrey:20160112235406p:plain

引数を一つ、整数型で受け取るようにします。

この引数でテクスチャのUV値を配列から取り出してマテリアルのパラメータに渡します。最終的に以下のようになりました。

f:id:hiyokosabrey:20160112235610p:plain

 Vector2D型のデータは一旦 Break Vector 2Dノードで、Float型に分解します。

作っておいたImageパーツをドラッグ&ドロップで置いたら、Get Dynamic Material ノードにつなぎます。その Return Valueピンから Set Vector Parameter Value を引っ張り出してつなぎます。Parameter Name のところは、”Offset”としておきます。

あとは 分解したFloat型のピンXとYを、図のようにつなぎます。

これで Widgetの編集は完了です。コンパイルして閉じます。

 

再びマテリアルを編集します。

パラメータを受け取るための仕掛けを追加します。

f:id:hiyokosabrey:20160113001625p:plain

まず Vector Parameterノードを置いて、パラメータ名を "Offset" とします。赤(R)と緑(G)のピンをAppendノードを使ってまとめ、TextureCoordinateから出ているUV値に加算します。

これでマテリアルも完成。コンパイルして閉じます。

 

仕上げにレベルブループリントで表示させます。

いつものWidgetを表示する定番の流れ

Create Widget → Add to Viewport

に加えて、作った関数を呼び出してます。

f:id:hiyokosabrey:20160113002249p:plain

関数の引数をいろいろ変えてみると、アイコンが切り替わります。