ひきつづき書いていきますよ～
って、これほどゲージについて書いてるブログはここだけじゃないだろうか。別にゲージが好きでもなんでもないんだからね、と言ってみたところでブログのカテゴリーにあるゲージ(34)って年齢みたいな書き方をみても、もう誰も信じないところまで来てしまっている感じがするよね。実際今まで関わったタイトルでゲージのないゲームなどなかったわけで、我がUI人生常にゲージと共にありという事実と向き合うしかないのであって、あと60本ネタを出し続けることに目を背けたいわけでは決してないということを私は訴えたいのであります、さあ同志諸君よマウスを持て、敵の体力をゲージ化するのだ、そして自身の体力を可能な限りの長さと減りにくい見た目にして敵を圧倒するのだ。いざゆかん！
・・・
冒頭からいきなり変なノリで始めてしまったけど、いやぁ暑いですねと言いたかったんだと思う・・・たぶん。
39. テクスチャのUVを動かすやつ２
前回のやつは、グレースケールテクスチャを使ってテクスチャメモリの節約を狙った作りでしたが、今回はカラーテクスチャで作ってみます。
用意したのは下のようなやつ
RGB
Alpha
アルファチャンネルには左右の端に黒を 1px 置いています。
37.のゲージで説明したようにタイリング設定を Clamp にして利用するためです。
中央の MakeFloat2 は AppendVector に替えてもOK。
背景色の部分は、テクスチャのアルファチャンネルを使って Lerp で塗分けています。
Linear Interpolate（=Lerp）この線形補間ってやつは用途の幅がめちゃくちゃ広いのでとてもお世話になってます。
今回ので、シェーダー（UEではマテリアルアセットで作る）を使ったゲージの基本形を２種紹介しました。メッシュで作るやつはアレンジの範囲だと思うので後に回すとして、シェーダーを使わないタイプで スケーリング（拡縮）で表現するゲージがあります。それぞれ特徴があるので、使い分けについて書いておこうと思います。
ゲージが減っていくとき、 Stepを使ったタイプは削られてゆく表現になりますが、UVを動かすタイプはゲージそのものが移動するので、見た目に短くなってゆく表現になり、スケールで縮小するタイプ色の幅が圧縮されていくようになるので、それぞれ違う印象になります。
比較してみると
もちろん満タンの時は差はありません。
さらに減らすと
色も形も変わってしまうものがでてきます。
作り方によって印象が全然変わるので、ユーザーに伝えたい情報とデザインに合わせて選択します。
少ないことを訴えるのか、満タンであることが大事なのか、自動回復するのか、プレイに対する緊張度は？などと考えてあげると方向性が絞られてきます。
枠線や下敷きのあしらいなどで多少は見え方の印象を変えることができるので、試行錯誤しながら実装して遊んでみましょう。評価してみて、またいじって、というのを繰りしていけば経験が増えて、デザインしながら作り方をイメージできるようになります。
ということで、今回はここまで
次回のゲージは、今回のやつを少しいじって背景の無いバージョンを作ります。
ではでは
素敵なゲージライフを！
