テクスチャをリソースとしてパッケージに組み込む際、特別な用途を除いて圧縮されるのが普通です。圧縮でのピクセルの荒れを少しでも抑えるためにテクスチャの色数と複雑さが少なくなるように工夫します。今回はシェーダーでドロップシャドウを作り出します。テクスチャに影用のカラーを描き込まないので、シンプルなピクセルが期待できます。シェーダーで着色するので、カラーバリエーションも簡単に増やせます。
使用したテクスチャは
256 x 32px のグレースケールです。
ポイントは余白です。ずらしたい方向に余白を確保します。
１枚の絵の中で平行移動するので、余白の量が移動限界になります。
インポートするときにタイリング設定を Clamp にしておきます。
このテクスチャを使いまわして３タイプを作っていきます。
83. ドロップシャドウ（外側）
今回のサンプルではテクスチャを使ってナナメ形状を実現したので、端っこはいい感じに滑らかです。正直にテクスチャだけでやろうとすると、サンプラーが 3つ必要です。
38. で紹介した方法にドロップシャドウ用にUVをずらしたものを合成します。
合成は Add ではなく Max（Maximum）がベスト。
アルファチャンネル つまり シルエットはこれでOK。
つぎは着色。
2段階の Lerp ノードを使います。
ゲージとそれ以外に分ける Lerp と ゲージの本体と背景に分ける Lerp ノード。
テクスチャに余白を作ったので、UV移動の範囲も ピッタリ 0～1.0 ではなくなるため補正してやります。ここでも Lerp ノードの出番です。
満タンのときに UVが動いていない状態なので 0 になります。
Alpha が 0 のとき Ａ、1 のとき Ｂ になります。
一応サンプラーを 1つ減らしたもの作ってみました。
計算は増えますが、テクスチャへのアクセスが減ります。
いつもの TexCoord をグラデーションとして使う方法でゲージ本体を作ります。
Step ノードを使って増減しています。
端のジャギーが気になるようであれば、SmoothStep を使うときれいになります。
84. ドロップシャドウ（内側）
平面だけど段差があるように見えて、気持ち絵的な情報量が増えます。
83 同様にずらしていますが、シルエットは合成しません。
基本は ずらした状態で着色して、アルファで抜くと出来上がりですが、
ゲージの増減もあるので、影のカラーを作って乗算する形にします。
乗算したものをアルファで抜くと完成。
これをノードにすると、
着色している部分を除くとわりとシンプルです。
テクスチャの形状をいろいろ試してみると発見があるかもしれません。
加算にしてみたり。
このタイプは、影を移動する分の余白が必要ないので、テクスチャをギリギリまで使えます。ただしタイリング設定をClampにするので、1px だけは空けておく必要はあります。
おまけ
ナナメの形は直線で構成されているので、ゲージ本体と影についても、それぞれテクスチャを使わないようにすることが可能です。
SmoothStepで影の境界を調整しています。
85. ドロップシャドウ（内側だけどゲージは含まない）
ゲージの長さに同期して影を動かします。
ゲージのカラーが最大になりつつ、影の暗さでいい感じにコントラストが上がって視認性が上がるという、素敵な構成です。
しくみは 84. とだいたい同じです。
合成したものをアルファで抜くと完成。
とにかく白と黒で分けられていれば、Lerpノードで簡単に着色できます。
ゲージを動かすパラメータは 0 ～ 1.0 の範囲で推移します。
例えば HPの最大値が 28000 のキャラがいたとして、体力ゲージを表示するのに 28000ピクセルで表示するわけにはいかないですよね。画面に表示するゲージの最大の長さ＝28000として、割合でゲージが増減するようにすると、ゲージのデザインが自由にできます。現HP ÷ 最大HP で 0 ～1.0 の範囲になるので、それをシェーダーに活用するのです。
ですが、テクスチャを使用する場合バイリニアフィルタ対策などで端までピクセルを置かないことが多いので、0～1.0 だとゲージの見え方としては問題が生じます。
このあたり過去記事に書いていますので、対策について詳しく知りたい方はこちらをぜひ。
Lerp ノードで補正をかけます。
上段は ドロップシャドウ用なので補正ではないですが同じ要領でずらすのに使います。下段はゲージの増減を補正しています。
今回は以上です。
少しの味付けで安っぽさが軽減されるので、いろいろ工夫してみたいですね。
84. 85. は斜めの形状と相性バツグンですが、83. は汎用的にいろんな場面で使えます。
テクスチャに書いてしまえば済むのですが、テクスチャが圧縮される世界線ではシェーダーでやったほうがキレイです。いろいろ遊ぶこともできます。
Webとかでよく見るかけるクリックすると凹むやつとかも作れます。
ではでは
素敵なゲージライフを！
