UMGで画像を扱うときに、マテリアルを使うとテクスチャの一部分だけ切り出して使うことができます。さらにテクスチャのUVを移動させることで、アイコンを切り替えたりロール式のカウンタを再現といった使い方なんかができます。
こんなテクスチャを用意してみました。
256ｘ256 で アイコン１個のサイズが 48ｘ48です。
絵柄は、Windowsにバンドルされてるフォント Webdingsからチョイスしました。
↑に貼った画像はアルファチャンネルの状態です。
32ビットのTarga形式で保存したらコンテンツブラウザにドラッグ＆ドロップ。
MipMapの設定を変更し、ドットの荒れを回避するために圧縮形式をUserInterface2Dにします。
設定変更したら、Reimportボタン、保存ボタンの順に押して編集ウィンドウを閉じます。
そのままコンテンツブラウザのテクスチャアセットの上で、右クリックしてメニューから、Create Materialを選択します。この方が少しだけ手間が省けるからです。
できたマテリアルアセットに名前を付けて編集開始です。
UMGで利用するので、Material Domainを User Interfaceに変更します。
アルファチャンネルも使うので、Blend Mode を Translucent にします。
一旦接続が切れるので、つなぎなおします。
ここにUV値を制御する Texture Coordinate ノードをつなぎます。
アイコンの大きさが 48ｘ48なので、48 ÷ 256 ＝ 0.1875
この数値を Tilingのところに入力します。
一旦コンパイルして保存します。
Widgetを用意します。
Imageパーツを配置したら、Detailタブの Appearance ＞ Brush ＞ Image のところで作っておいたマテリアルをセットします。
表示サイズを 48ｘ48にして、あとは、Is Variableのチェックが付いていればOK。
編集モードをGraphに切り替えます。
テクスチャのUV値を保存しておく配列変数を用意します。まとめて扱うのに便利なVector2D型にします。
テクスチャの中に、アイコンは48ｘ48なので 0.1875間隔に並んでいます。
これを Make Arrayノードにセットします。配列のSetノードからドラッグすると簡単に見つかります。
数があるとちょっと面倒だけど、開発の途中で順番が入れ替わったり欠番がでたりすることがあるので、後々メンテがラクです。
（UE4の配列変数は値のセットする操作がちょっと煩わしい・・・）
次にアイコンを指定したやつにセットする関数を用意します。
引数を一つ、整数型で受け取るようにします。
この引数でテクスチャのUV値を配列から取り出してマテリアルのパラメータに渡します。最終的に以下のようになりました。
Vector2D型のデータは一旦 Break Vector 2Dノードで、Float型に分解します。
作っておいたImageパーツをドラッグ＆ドロップで置いたら、Get Dynamic Material ノードにつなぎます。その Return Valueピンから Set Vector Parameter Value を引っ張り出してつなぎます。Parameter Name のところは、”Offset”としておきます。
あとは 分解したFloat型のピンXとYを、図のようにつなぎます。
これで Widgetの編集は完了です。コンパイルして閉じます。
再びマテリアルを編集します。
パラメータを受け取るための仕掛けを追加します。
まず Vector Parameterノードを置いて、パラメータ名を "Offset" とします。赤(R)と緑(G)のピンをAppendノードを使ってまとめ、TextureCoordinateから出ているUV値に加算します。
これでマテリアルも完成。コンパイルして閉じます。
仕上げにレベルブループリントで表示させます。
いつものWidgetを表示する定番の流れ
Create Widget → Add to Viewport
に加えて、作った関数を呼び出してます。
関数の引数をいろいろ変えてみると、アイコンが切り替わります。
