前回の 38-39 はUV移動するタイプのゲージで背景カラーをくっつけていました。パーツがひとつで済むのが利点ですが、デザインによっては背景部分は別に用意する、もしくは透過で入れたくない場合もあると思うので、ゲージのみの場合を紹介しておこうと思います。
40. UV移動するやつ背景なし
使用したテクスチャは以下の構成
RGB
Alpha
PNG形式は完全透明部分に白が入ることがあるので、ネイティブに変換される際、圧縮アルゴリズム次第ではノイズになりやすいので、DDSやTarga形式をよく使います。
しくみは比較的シンプルなのですぐに作れそうですが、問題になるのでがゲージの端っこ。
ここで活躍するのが Minノード。Min、 Max のペアで知られるやつ。
AとBを比較して小さいほうを採用するノードです
Multiplyで乗算しても構いませんが、計算の性質上シャープになりコントラストが上がります。(1.0 以下の値 同士を掛けるとより小さい値にしかならないので)
ゲージはシャープな方が喜ばれますが、ピクセルのガタつきが気になる場合はMinがおすすめです。
移動後のアルファ と 移動しないアルファ を比較します。
Photoshopのレイヤーブレンドにある 比較(暗) で試せます。
いい感じに端っこの形状をキープしたまま伸縮できるようになります。
グレースケールテクスチャで作った 38の場合は下図のようにつなぎます。
今回は以上です
結構ハイペースで更新してきましたが、ここまではあくまでもシェーダーだけでどうにかなるタイプのいわば基礎です。ウォーミングアップです。
基礎とはいえ組み合わせればまだまだ面白い表現が可能です。テクスチャの使い方もポイントになります。ゲージの入退場やエフェクトをつけたり、プレイヤーの心理を少なからずコントロールできるのがゲージ。メタ表現だし軽く作ればいいってものでもありません。ゲージを嗤うものはゲージに泣かされます。たぶん。
ここからは、特殊なやつやアレンジになっていくので、ちょっとペースダウンするかもですが、なんとか100本作り切りたいですね。
ではでは
また次回
ステキなゲージライフを!