以前、マテリアルのパラメータ指定で細かい小数を扱っているのを、改良する記事を書きました。
今回はもう少しだけ発展させます。
テクスチャの一部を切り出して使うには、UとVの2つの値を扱うことになります。このUとV、2つの値を渡すには、Set Scalar Parameter Value を2つ並べるか、
Set Vector Parameter Value の4つあるピンを贅沢に使うか、
処理される時間を考えると、Vectorのように一度に値を渡せた方がいいけど、なんかちょっともったいない気もしてて、もっとスッキリできないかなと考えてたら思いつきました。(またもや前置きが長い)
配列変数はもう使いません。
その代わり少し計算が必要になります。
これも過去の記事で書いたのが参考になります。
この記事でグリッドに並べるための計算方法を説明しました。これをマテリアルに応用してみたのが下の図。
パラメータノードは、スカラー型が1つだけです。見慣れないやつがいるかもですが、値を調整する部分は4か所です。
しかも必要な数値は3つ。簡単に計算できます。
テクスチャのサイズは ヨコ 512 タテ 256 の場合です。アイコン1つ分の大きさは 80x80 なので、UとVそれぞれのサイズは以下のようになります。
80 ÷ 512 = 0.15625
80 ÷ 256 = 0.3125
必要な3つの数値のうち2つが確定しました。3つ目は並んでいる数です。
横方向に6つずつ並んでいます。この並んでいる数を計算に使用することでアイコンのUV座標(場所)を割り出します。このマテリアルさえ完成すれば、ブループリントはプログラマに管理してもらって、マテリアルとテクスチャはデザイナーが管理すればいいという、とても素敵な座組みで作業を進めることが可能です。
これでアイコンを番号で指定して表示することができるようになります。
Blueprintから指定したアイコンに切り替えたいときに、set Scalar Parameter Value ノードが一つで済みます。
アイコンの種類を Int型で扱ってそのままFloat型にするだけというシンプルさと、UV値のことは忘れてもOKというのが魅力的です。配列変数のメンテやメモリも不要なのでプログラマも喜んでくれるはず。
ただし、このステキな方法にもリスクがあります。
UV座標をマテリアルで演算することになるのでGPU側の負荷になります。描画処理に余裕がない場合は控えた方がよさそうです。とはいえUIがガッツリ表示されている時はそれほどシビアな描画はしていないのがほとんどだと思います。
アイコン表示の切り替えでお悩みの紳士淑女のみなさま、ぜひこのマテリアルで計算する方法を一度ご検討されてみてはいかがでしょうか。
ではでは
今回はこの辺で