前回に続いて、UVの反転を使ったテクスチャの節約術を紹介。
あくまでもゲージを100本作ったらシェーダーへの理解が深まるんじゃないか企画です。
ゲージとして TexCoordノードを利用しましたがテクスチャに利用すると線対称な表示が可能なので、実質半分のテクスチャで済みます。前回は左右の反転でしたが、今回は上下左右に反転するので、４分の１のテクスチャで作ります。
反復練習にちょうどいいですね。
UとVに対して 0.5引いて2掛けて 絶対値 Abs にすると出来上がり。
69. 上下左右反転
使ったテクスチャはこのような形。
ゲージの色が変わる部分のほうが大きくなってしまいました。
今回の主役はこちらです。
とてもあっさりしてます。
一応テクスチャの作り方についてオススメの方法を書いておきます。
Photoshop限定になりますがスマートオブジェクトを使うので、修正やバリエーションを作るのが簡単です。
まずはモチーフを描きます。対象ペイント機能が便利です。
ちなみに青いガイド線は、パス編集が可能なので回転させることができます。
描けたら、このレイヤーをスマートオブジェクトに変換します。
カンバスサイズを1/4にします。残すのは右下なので、以下の設定でOK。
OKすると下のようなダイアログがポップアップするので、気にせず続行を選びます。
これをテクスチャにして書き出せばOK。
あとで再編集するかもしれないのでPSD形式で保存しておきます。
修正や調整したいときはレイヤーパネルのサムネイルをダブルクリックするとスマートオブジェクトを編集することができます。
中は 1/4 になっていないので安心です。スマートオブジェクトは Ctrl + S するか、スマートオブジェクトのドキュメントウィンドウを閉じると保存されて反映されます。リアルタイムには更新されないのと、スマートオブジェクトの保存だけではドキュメントが保存されないことに注意。
上下左右反転の節約方法は、使う機会はたくさんあるのでぜひいろいろ活用してみてください。
このようなテクスチャを反転して
回転はRender Transform の Angle で回してます。
こういうタイプは表示サイズが固定であれば、シェーダーで破線作るよりはお手軽です。
70. テクスチャをブレンドと着色
上下左右反転で節約すると、そのぶん別のパーツを高解像度にしたりできるので、クオリティコントロールの選択肢が増えます。
ゲージではないのですが、値を受け取って反映させる仕組みはゲージと同じす。
テクスチャは２種類用意しました。
ひとつはベースになる1/4のテクスチャ。グレースケールです。
64ｘ64px
もうひとつは上に重ねるためと、カラーを決めるテクスチャ。RGBA 4チャンネルのカラーテクスチャです。タイリングはしないので Clampを設定。
64ｘ512px
縦方向はちょっと余白が多いですが、表示サイズの４倍で 128ｘ4 の 512pxです。
大事なのは書き出すテクスチャのフォーマット。
PNG は完全に透明な部分はマットカラー（デフォルトは白）で埋められる仕様なので、思ったように表示できません。PNG自体は素晴らしい画像フォーマットなのですが、ブラウザに表示するためのフォーマットです。アルファチャンネルを多用するゲームUIの制作、特にシェーダーで扱う場合には 向いていない場合があるのでご注意ください。
参考までに PNG にするとした図のようになります。
今回はTGA形式でインポートしています。
テクスチャ１枚にひとつのデザインしかないようなものは、例えばプロフィール用のアイコンやバッジ、称号、そういったものは、数が不定だしアウトソースにしやすいので、PNGが向いていたりします。それ以外は基本 TGA, DDS, TIFF あたりが無難です。
ゲージ増減の値は 0～1 でしたが、これは 0、１、２、３、の４段階。
上の Tier というノードがパラメータとしてその値を受け取ります。
そこに 0.25 を掛けることで、テクスチャの切り取る場所が変化します。
Vに足し算しているので、
Tier＝0 のとき、V=0
Tier＝1 のとき、V=0.25
Tier＝2 のとき、V=0.5
Tier＝3 のとき、V=0.75
となります。
これもゲージ 57. でパターンアニメーションとして紹介した方法になります。
次はテクスチャサイズが違うものを重ねる方法。
※ここからの図は説明のために着色しています。
実際はどちらのテクスチャも横幅は 64pxですが、
下地は上下左右の反転したぶんをいれて表示サイズは 2倍になってます。
1/4 にする前のサイズに復元されたような見た目です。
一方の"TIER"の方は
横方向 U に対して何もしなければ下図のように伸びた見た目になります。
”TIER” の方の Uを 2倍します。
縦横の比率は正しくなりました。
テクスチャのインポート設定で、Clampにしていると、端のピクセルが引き延ばされるので繰り返さなくなります。
仕上げに、右に 0.5 ずらせば位置合わせはバッチリ。
テクスチャのタイリング設定はとても重要です。
あとは 着色のためのブレンド。
おなじみLerpノードを使います。
シェーダーの理解のためとはいえ、普通に作ったほうが早くない？
フルカラーだとこんな風に並べるだけで簡単に・・・
ちっちっち、最終的にどうなるかわからないのがゲーム開発というもの。とくに「段階」や「最大数」なんてものは最初から最後まで変わらないなんてことはないし、変わらなかったとしても、続編で増えるのはよくある話。
決定するまでは、修正や変更を素早く行えると、テストの精度が上がって、結果的に最終決定までの時間が短縮できます。
簡単に作れるものは、開発終盤で仕様が確定していて、短時間で仕留めるときに採る手段です。それ以外では、いろんな作り方や修正手段を探っておくのを成長のためにもお勧めします。仕様の迷いを断ち切るお手伝いをするのもUIデザイナーの仕事だと僕は思います。
アセットのみの修正、スクリプトのみの修正、両方同時に修正は嫌われますし、安全に修正、調整できることを約束できることは信頼関係の維持向上のためにも大事。
ほんとうにゲームの仕様が確定するまでは、デザインはできていても、実装上はギリギリまでFIXせず、柔軟に対応して調整に付き合う、もしくは調整の幅だけでもプログラマも交えて確定させる。そのために仕込みに時間をかけてでも備えておくのが業界を生き抜く秘訣。
作り方次第で変更に対する選択肢が変わります。
デザインを実装するときにいろんな制約や悪条件をうまくかわせるようなっておくことがポイントです。UIの実装方法をプログラマに考えてもらうのはダメデスヨ。いろんな実装方法を提示して相談しながら決めるというプロセスが大事です。
今回は以上です
UV周りのアレコレはよく使うので、もう少し続けようと思います。
ではでは
素敵なゲージライフを！
