去年から慌ただしかった仕事は 完全に終わったわけではないけど、急にやることがなくなってしまった。プレッシャーからは解放されたのに まだ慣性が残っている感じで、すぐには止まれないという焦りとか罪悪感とか、承認されるまでは気が抜けない不安なんかでそわそわする毎日です。
とりあえず船には乗れたけどまだ出航しなくて、なんか忘れ物したんじゃないかとか、行き先間違ってないよね？とかそんな不安な心持ちに近いかな。
というわけで、今度はしばらく途切れていたゲージづくりを再開しようと思います。
ゲージを作りながらシェーダーに慣れようという企画です。
シェーダーで直接ゲージを動かすのは100本に届く前に早々にネタが尽きてしまいました。きっかけになったシェーダーに慣れるという目的を思い出して、ゲージに絡めたシェーダーの扱いをいろいろ紹介していこうと考えています。
今回はテクスチャを節約して使う方法を紹介します。
どんなに素晴らしいデザインでも、実装できなければ絵にかいた餅のままです。ゲームを動かすハードウェアにはそれなりに制限もあって簡単には実装させてくれません。
処理やメモリはバランスを取りながら割り振る必要があって、ゲームのパフォーマンスに影響します。リアルタイムに描画するのでマシンスペックにも振り回されます。
考え方としてはゲージごときにテクスチャ使うなんてもったいない。でもシンプルすぎるのも安く見えて良くない。といった場面で活かせるかなと。
キャラゲーなら尚のことキャラクターのグラフィックにテクスチャ容量を使いたくなるはず。ゲージデザインはできればスキマの空いているところにちょこっと入ればOK。というぐあい。とまた前置きが長くなってしまった。
ポイントはUV空間を鏡像のように線対称にすることです。
9. 中央から増減するゲージと同じ要領でつくるゲージです。
Stepノードで削るとゲージとして使えますが、テクスチャのUVとして使います。
0.5引いて 2倍して Abs（絶対値） の３コンボです。
66. 左右反転
用意するテクスチャは左右対称なデザインの
右半分だけを使います。左側は計算量が増えるのでなるべく避けます。
128 x 32px
ゲージのシルエットだけの利用なので、グレースケールなテクスチャです。
用途的にマスクテクスチャという呼び方もできます。
タイリングで繰り返してほしくないので Clamp にします。
ゲームグラフィックで扱うテクスチャは、タイリングされるのが基本です。
上下左右の端同士がつながっているので、端には何も描かないのがベストなのですが、今回の反転するタイプでは左の端まで使用しているので、Clampする必要があるのです。
下図は Wrap にした場合の見え方。
表示するサイズや位置によってもチラつきが目立つことがあるのでピクセルの配置は重要です。
このテクスチャをアルファチャンネル（Opacity）につないでゲージに仕立てるとこんな感じ。
これで出来上がりとしたいのですが、実際にゲームで使うのであれば問題が残っています。
テクスチャのUV座標は０～１の範囲です。余白があります。
テクスチャのサイズとデザインとしてゲージの長さが一致しないことがほとんどなので、こういった余白はできるものとして扱います。
タイリング設定を Clamp にするためにも、最低でも１pxの余白が必要です。
この余白が問題になります。ちょっと説明が難しいのですが、
ゲージの増減で使用する値の範囲 Value はUV空間を利用するので 0～1 です。
余白の部分はアルファ値＝ゼロで描画されるため目に見えない部分になります。
つまり、ゲージの端は、0と1じゃないということです。
例えば0.998とかでまだ満タンじゃないのに、見た目には満タンという齟齬が生じます。
同じように 0.002とかでゼロじゃないのに空っぽに見えるということです。
この状況はテクスチャを作ったデザイナーの都合なので、このマテリアル内で解決しておきます。
Lerp（線形補間）ノードが便利です。
Valueが 0 のときの値が A、１のときの値が B になります。AとBの間はリニアに補間されます。
例えばテクスチャの余白が 9px の場合で、Canvasでの表示サイズが 256px であれば、
A ＝ 9 / 256
B ＝ (256 - 9) / 256
となります。
テクスチャの解像度と画面に表示されるサイズが一致していないと、テクスチャはボケたり、削れたりするので、チラつきが出ることがあります。その場合は LerpノードのAとBの値を微調整します。また 浮動小数点ならではの誤差もチラつきの原因になることがあるので、余白を調整して割り切れるようにするのもアリです。
テクスチャでユニークな形のゲージを作る場合は、必ずこの余白と闘うことになります。そこは割り切って慣れていくしかないですね。
67. 枠をつける
ゲージと枠をシェーダーで合成して作るゲージ。
テクスチャはこんな状態。グレースケールです。
128 x 64px
計算しやすいようにちょうど半分に分けてあります。
上段にゲージ本体。下段に枠線を含めた全体のシルエットです。下段の方がゲージ本体よりひと回り大きいので、その差分が枠線の幅となります。
気づいた方がいらっしゃるかもしれません。Xには違うのを貼りました。
実はデザインのイメージと発想を変えたテクスチャを作るので、いきなりこの方法にたどり着くのは難しいかなと思ったからです。
普通こんな感じのパーツ分けをイメージしてデザインしていると思います。
これを素直にシェーダーで表現するとノードが増えます。
そこで重ね方を逆にします。
ゲージよりも大きい面積を下にしてゲージを手前にすることではみ出た部分を枠にするのです。
実際には Lerpノードを２段階で使います。
これでカラー部分が完成。アルファブレンドすると出来上がりになります。
Lerpノードは Photoshopのグラデーションマップのように使えます
グレースケールのテクスチャとLerpノードはとても相性がよくて、白と黒で 2つの絵（色）を塗分けしたり、ブレンドしたりと、利用価値はとても高いのでぜひ使いこなしてください。あと、上限と下限を制御するのもお世話になることが多いです。
68. 枠をつける2
67. はグレースケールテクスチャでチャンネルがひとつしかないケースでしたが、これはアルファチャンネルを利用できるテクスチャで作ります。Xに貼ったのと同様、素直に枠線とゲージ本体を重ねる想定です。マスクとして使うのでモノクロで作ります。
Photoshopでマスク範囲に色を50%でつけるとこうなります。
こういうテクスチャはPNG以外のフォーマットで作ります。
同じ位置なので、TextureSampleノードが１つで済むのがウリ。
ただアルファチャンネルと枠線は一致しないので、ブレンドが必要になります。
重ねたときにスキマが出ないように1pxほど重なるようにしています。
RGBチャンネルとアルファチャンネルをGIFアニメーションでブレンドしてみました。
基本の構成は 67. とさほど変わりません。
枠線とゲージのチャンネルを加算して全体のシルエットを作ります。
単純に加算すると 1.0を越えてしまう部分が出てくるのでClampノードで 1.0以上をカットします。
Lerpノードが１段増えて３段構成になりました。
67. で Lerp を使った着色が理解できていれば問題ないと思います。
さらに67. と同じように枠線とゲージの重ね方が逆のテクスチャにしてみるとノードが減らせます。慣れてくると応用の幅が広がると思います。
マスクの状態つまりピクセルごとの輝度をPhotoshopなどDCCツールでコントロールするのが難しいのでLerpの順番がカギになります。順番次第で不要なカラーが出て見えたり、消したりすることができるので、ぜひ使い込んでみてください。
今回は以上です。
こんなに ゴリゴリとUV座標をいじるのは、UI 表示ならではの使い方かと思います。
テクスチャ容量を控えつつ、大量のキャラやアイコンなどの常駐量を気にしつつ高解像度に適応していくのはなかなかしんどいです。
SVGがローコストでモリモリ使える時代が来れば作り方も考え方も変わるかもしれませんが、フラットな見た目を避けたいとなると、プロシージャルテクスチャやらマスク処理など重要な位置づけになるでしょうね。
とりあえず頑張ってユニークなUIデザインを開発してやりましょう。
ユニークというのは他にはないということです。
次回はもう少しUV反転を使ったものを紹介しようと思ってます。
ではでは
素敵なゲージライフを！
