みつまめ杏仁

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

マテリアル操作で簡単アイコン切り替え

UMGのマテリアル操作でアイコンイメージを切り替える記事を前に書きました。

ちょっとだけラクする方法をひらめいたのでメモしておきます。

簡単といっても指定が楽になる程度ですが。

 

limesode.hatenablog.com

このときは、アイコンのUV値(テクスチャ内の場所)をそのまま配列にしていました。

f:id:hiyokosabrey:20160112205453p:plain

 小数点の扱いがちょっと・・・な感じです。

 

まず今回用に新しくテクスチャを用意しました。

512x256 の長方形です。

相変わらず、Webdingsという書体で構成しています。

 

↓RGBはこんな感じ。

f:id:hiyokosabrey:20160918001216p:plain

↓アルファチャンネルはこんな感じ。

f:id:hiyokosabrey:20160918001313p:plain

 

アイコン1個分の大きさは 80x80 です。今回長方形のテクスチャなのでTilingの値がUとVで異なります。

UV値を扱う場合、 値の範囲は 0.0 ~ 1.0 なので、

値を求めるときは  ( 移動量もしくはサイズ ÷ テクスチャサイズ )で計算します。

Uの値は 80 / 512 で 0.15625

Vの値は 80 / 256 で 0.3125

になります。

f:id:hiyokosabrey:20160918001757p:plain

半角のスラッシュは、プログラミングの世界では 『割り算』を意味します。

分数表記で 1/2 と書いたりしますが、そういうことです。

割り算のノードを取り出すときに使います。ちなみに掛け算は アスタリスクです。

 

3Dモデルを作る方々はこんなUVの計算なんか無縁なんですが、UIデザイナーは日々こんな小数点と闘っているのです。えへん。

 

で、この値をマテリアルに仕込んでいきます。

今回見た目に発光させたいので、Blend Mode を Additive にしました。

f:id:hiyokosabrey:20160918003249p:plain

まずは色を付けるところから。色を変えるためにベクター型のパラメータを2つ。

f:id:hiyokosabrey:20160918004439p:plain

 

つぎにUVを操作するとこ。

f:id:hiyokosabrey:20160918010345p:plain

ベクター型の中身である4つのFloat型、RGBA のうち、RとGをTilingの値としています。BとAをOffestにしていますがTilingと掛けているところが今回のポイントです。

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

 

前回の記事と同様にしてキャンバスに並べてブループリントから変更してやるだけなのですが、配列の値を変えます。その前にアイコンの並びを確認。キレイに並んでいれば配列を使う必要はないのですが、削除したり追加したりしているうちに制作終盤で下図のように不規則になることもあります。

f:id:hiyokosabrey:20160918100237p:plain

普通テクスチャ内でアイコンの場所が変わっても、アイコンを管理する番号(ID的な)は仕様的に変更することはしません。バグの元になります。なので、アイコンが順番通りに並んでいなくても、管理番号さえ変えなければ問題ないので配列が便利なのです。

 

今回、マテリアルに仕込んだ計算でこの場所の指定がラクになります。

左上のアイコンを(0,0)として右下のアイコンが(5,2) という形になります。

f:id:hiyokosabrey:20160918101013p:plain

 

配列にするとこんな感じ。メンテナンスするならどちらが簡単か一目瞭然です。

f:id:hiyokosabrey:20160918102218p:plain

アンリアルエンジンでは数値のフォームで四則演算が使えます。

左側の場合 一旦 0.15625 というベースの数字を [Ctrl] +[ C]キー でクリップボードに入れたら、あとは[Ctrl] +[ V]キーでペーストして、 *2 とか *5 を後ろに入力して[Enter]キーを押すと計算結果に変わります。

f:id:hiyokosabrey:20160918103127p:plain

テクスチャが長方形の場合、UとVでベースの数字が違うのと、アイコンのサイズとテクスチャのサイズを忘れた頃に編集することになると思うので、それなりに面倒です。

テクスチャをパッと見て、左から何個目、上から何個目って数えた方が早いです。

 

で、表示テスト。

f:id:hiyokosabrey:20160918104805p:plain

 

 ちょっと遊んでみました。

f:id:hiyokosabrey:20160918112925g:plain

カーソルキーでフォーカスを切り替えています。上下左右はループするすようにしています。

今回のマテリアル操作自体は、新しいテクニックではないです多分。単に自分で勝手に「そうかその手があったか」って盛り上がったので、記事にしてみました。

 

基本的な操作を習得するので問題ないですが、制作の工程を長い目で見ると、まだまだ効率化の余地はあるなぁ、と長年やってきて思うわけです。

 

ではでは、ステキなUVライフを!