みつまめ杏仁

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

UV座標の計算をマテリアルでやらせると指定がラクチン

以前、マテリアルのパラメータ指定で細かい小数を扱っているのを、改良する記事を書きました。

limesode.hatenablog.com

今回はもう少しだけ発展させます。

 

 テクスチャの一部を切り出して使うには、UVの2つの値を扱うことになります。このUとV、2つの値を渡すには、Set Scalar Parameter Value を2つ並べるか、

f:id:hiyokosabrey:20161203211210j:plain

Set Vector Parameter Value の4つあるピンを贅沢に使うか、

f:id:hiyokosabrey:20161203211557j:plain

処理される時間を考えると、Vectorのように一度に値を渡せた方がいいけど、なんかちょっともったいない気もしてて、もっとスッキリできないかなと考えてたら思いつきました。(またもや前置きが長い)

 

配列変数はもう使いません。

その代わり少し計算が必要になります。

これも過去の記事で書いたのが参考になります。

limesode.hatenablog.com

この記事でグリッドに並べるための計算方法を説明しました。これをマテリアルに応用してみたのが下の図。

f:id:hiyokosabrey:20161203213953p:plain

パラメータノードは、スカラー型が1つだけです。見慣れないやつがいるかもですが、値を調整する部分は4か所です。

f:id:hiyokosabrey:20161203225113p:plain

しかも必要な数値は3つ。簡単に計算できます。

 

  テクスチャのサイズは ヨコ 512 タテ 256 の場合です。アイコン1つ分の大きさは 80x80 なので、UとVそれぞれのサイズは以下のようになります。

80 ÷ 512 = 0.15625

80 ÷ 256 = 0.3125

f:id:hiyokosabrey:20160918001757p:plain

必要な3つの数値のうち2つが確定しました。3つ目は並んでいる数です。

f:id:hiyokosabrey:20161203225644p:plain

横方向に6つずつ並んでいます。この並んでいる数を計算に使用することでアイコンのUV座標(場所)を割り出します。このマテリアルさえ完成すれば、ブループリントはプログラマ管理してもらって、マテリアルとテクスチャはデザイナーが管理すればいいという、とても素敵な座組みで作業を進めることが可能です。

 

これでアイコンを番号で指定して表示することができるようになります。

Blueprintから指定したアイコンに切り替えたいときに、set Scalar Parameter Value ノードが一つで済みます。

f:id:hiyokosabrey:20161203230549p:plain

 アイコンの種類を Int型で扱ってそのままFloat型にするだけというシンプルさと、UV値のことは忘れてもOKというのが魅力的です。配列変数のメンテやメモリも不要なのでプログラマも喜んでくれるはず。

 

ただし、このステキな方法にもリスクがあります。

UV座標をマテリアルで演算することになるのでGPU側の負荷になります。描画処理に余裕がない場合は控えた方がよさそうです。とはいえUIがガッツリ表示されている時はそれほどシビアな描画はしていないのがほとんどだと思います。

 

アイコン表示の切り替えでお悩みの紳士淑女のみなさま、ぜひこのマテリアルで計算する方法を一度ご検討されてみてはいかがでしょうか。

ではでは

今回はこの辺で