みつまめ杏仁

アンリアルエンジンでGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

ゲージ100本ノック 40

前回の 38-39 はUV移動するタイプのゲージで背景カラーをくっつけていました。パーツがひとつで済むのが利点ですが、デザインによっては背景部分は別に用意する、もしくは透過で入れたくない場合もあると思うので、ゲージのみの場合を紹介しておこうと思います。

 

ゲージ100本ノック 38 - みつまめ杏仁

ゲージ100本ノック 39 - みつまめ杏仁

 

40. UV移動するやつ背景なし

 

使用したテクスチャは以下の構成

RGB

Alpha

PNG形式は完全透明部分に白が入ることがあるので、ネイティブに変換される際、圧縮アルゴリズム次第ではノイズになりやすいので、DDSやTarga形式をよく使います。

しくみは比較的シンプルなのですぐに作れそうですが、問題になるのでがゲージの端っこ


ここで活躍するのが Minノード。Min、 Max のペアで知られるやつ。

AとBを比較して小さいほうを採用するノードです

 

Multiplyで乗算しても構いませんが、計算の性質上シャープになりコントラストが上がります。(1.0 以下の値 同士を掛けるとより小さい値にしかならないので)

ゲージはシャープな方が喜ばれますが、ピクセルのガタつきが気になる場合はMinがおすすめです。

移動後のアルファ 移動しないアルファ を比較します。

Photoshopのレイヤーブレンドにある 比較(暗) で試せます。

いい感じに端っこの形状をキープしたまま伸縮できるようになります。

 

グレースケールテクスチャで作った 38の場合は下図のようにつなぎます。

 

今回は以上です

結構ハイペースで更新してきましたが、ここまではあくまでもシェーダーだけでどうにかなるタイプのいわば基礎です。ウォーミングアップです。

基礎とはいえ組み合わせればまだまだ面白い表現が可能です。テクスチャの使い方もポイントになります。ゲージの入退場やエフェクトをつけたり、プレイヤーの心理を少なからずコントロールできるのがゲージ。メタ表現だし軽く作ればいいってものでもありません。ゲージを嗤うものはゲージに泣かされます。たぶん。

 

ここからは、特殊なやつやアレンジになっていくので、ちょっとペースダウンするかもですが、なんとか100本作り切りたいですね。

 

ではでは

また次回

ステキなゲージライフを!