ちょっと間が空きましたが続きのゲージです。
シェーダーを覚えたい後輩に大言を放ってしまったのがきっかけで書き始めたシリーズ記事になります。
単純にシェーダーだけとなるとバリエーションをひねり出すのが難しいのと、ゲームの仕様に依存するタイプのゲージ（たとえば、ダメージを受けたときに遅れて減るようなタイプ）はシェーダーでどうこうするより、ブループリント側の処理が必須になるので脇に置いているのもあったりで、まだ半分ほどでペースが遅くなりつつありますが、ネタを発掘しながらゆるく頑張りたいと思います。
今回キャラクターをゲージとして扱うときに、いくつかシェーダーならではの表現が可能なのでネタとして取り上げることにします。
棒状のゲージでは、ゲージの背景というか、下敷きにあまり意味を持たすことはしません。純粋にゲージの長さが分かれば役目は果たせるし、そもそも細いので情報を込めるのが難しいというのもあります。
ところがキャラクターになると印象が変わってきます。何かしらの状態を表現することが可能になります。
キャラクターの見た目が普通であれば通常、ゲージとして減っている部分が異常な状態として表現することにして、シェーダーのバリエーションを作りました。
キャラ用のテクスチャを用意しました。
今までの応用なので、特別新しいことはしていませんがカラー調整の方法を学ぶのにちょうどいい教材かなと思います。
ここでもポイントとなるのは、Stepノード と Lerpノード。
ゲージには欠かせない便利ノードです。
Stepノードでいったん 0 と 1 の２値に分けて、Lerpノードで ０ のところと 1 のところそれそれどのような絵を流すかを工夫するとゲージが出来上がります。
47. 単色カラーで表現
基本的に 33～36と同じ構成です。
単色のシルエット状態は変化がわかりやすい分、ちょっとさみしい見た目になります。
表示開始時にシルエット状態のチャージ系ゲージにはあまり向いていないかもしれません。
48. カラーの乗算で表現
テクスチャのカラーに対して、任意のカラーをMultiply（乗算）するだけのもの。
最初から暗い色調や色味によっては効果が薄くなります。
49. カラーを反転して表現
もっとメリハリをつけたいなというときに、
テクスチャのカラーに対して 1-ｘ ノードを使うだけのシンプルな色反転。
絵の配色によっては、あまりギャップに感じない場合があります。
RGBをいろいろ繋ぎ変えると面白い色変化が楽しめます。
50. グレースケールにして表現
キャラクターにはいろんな色が使われるので、乗算だと安定しない場合にこの方法。
加重平均法を使ってテクスチャのカラーをシェーダー内でモノクロにします。
計算量は増えますが、テクスチャ容量を節約したいときにオススメ。
RとGとB それぞれをそのまま足して3で割ると、純粋な平均値がわかるのでグレースケールに使えそうですが、肉眼で見た時に不自然な印象になります。
RGBはそれぞれ明るさが違います。なのでRGBにはそれぞれに重み（係数）を掛けて足し算すると、それなりのグレースケール値が算出できます。それが NTSC加重平均法
0.29881 * R + 0.58661 * G + 0.11448 * B
この計算をノードで再現するのに、dotノードを使うと便利。計算式を ・(点、ドット)を使って表記するのでドットプロダクト（点乗積）ともいうそうです。
この重み付けの値については、他にもいくつかあるので興味がわいたら調べてみてください。映像デバイスの進化と関連していたりして結構奥深いです。
ちょっと明るさが気になったので、Multiplyで 0.4 を掛けて全体的に落としています。
51. 専用のテクスチャを用意して表現
いやいやシェーダーなんかで調整しても限界あるっしょ。ということで、専用の絵を用意してそちらと切り替えるタイプ。
用意するテクスチャは、UV計算節約のために別のテクスチャにしても大丈夫ですが、アセットの管理コストと、メモリに読み込む際のコストをケチる目的で１枚に仕込むスタイル。
今回 左右２等分なので、UVの切り分けも簡単です。
またシェーダーを扱うようになると、RGBAすべてのチャンネルを効率よく利用できる技が身につくので、PNGよりは、TGA や DDS、TIFF あたりを使うのが無難だと気づかされます。
ブログに貼る画像は JPG か PNG なので、RGBAそれぞれの状態が分かりやすくなるように、分けて貼っておきます。
RGB
Alpha
テクスチャを部分的に切り出すのは、UV座標に対して、掛け算してそのあと足し算します。テクスチャは解像度やアスペクト比に関係なく 0 ～ 1.0 です。
今回の絵は、横方向に 0.5 を掛けると左半分の絵が。 そこへ横方向に 0.5 足すと 右半分の絵が切り出せます。
52. 専用のテクスチャとノイズを追加
ノイズの作り方はいろんな手法があるので、調べてもらうとよいのですが、ひとまず簡単なランダム風ノイズを紹介。
デバフくらって回復まで時間がかかる、みたいな使い方になるでしょうか。
ノイズテクスチャは、タイトルの雰囲気に合った特別なものを用意して、汎用的に使えるようにすると効率的です。
サイズは256x256px Photoshopのノイズ生成で作成
ブロック感を出したいので、インポート設定の Filter は Nearest にしています。
ニアレストにするとテクスチャがボケなくなります。
キャラは 51. と同じように、専用の見た目を用意
テクスチャは以下のようになっています
RGB
Alpha
ノイズを動かすのはこんな感じ
高速で切り出すUV座標を散らせばいいと考えて、Timeノードから拝借しました。
Timeノードは常に微小な変化ですが加算され続けています。
適当に 10 やら 1000 といった倍率をかけると小数点の位置がずれます。
そこに Fracノードでズバッと 整数部分をカットしています。それをUV座標にすることで簡易的にランダムを実現しています。
Appendノードは 複数のVectorを1つに束ねてくれます。Fracで作った2つの値をVector2 の形、つまり UVとして扱えるようになるので、Texture Sampleノードにつないでランダム部分は出来上がり。
これをゲージに合成します。
暗くしてAdd（加算）しているだけですが、計算方法を変えるとまた違った色味が作り出せます。
例えば
ぜひテクスチャの色やノイズの色味を変えてアレンジしてみてください。
53. ノイズでスピード感
ノイズテクスチャを使ったアレンジその２。次はマンガテイストでアナログな感じにしました。ダメージというより発動中な印象。
ノイズテクスチャはグレースケール
サイズは128x128px Photoshopのノイズ生成で作成
こちらはブロック感は無しにしたいので、インポート設定の Filter は Default のままです。
33～36で使った Pannerノードを使用します。
UVに掛けている値は 切り出すサイズで、U方向をとても小さな値にしています。
正確には 1.5ピクセル分の値です。1.5/128 = 0.01171875
この値を大きくしたりゼロにしたりして、どのように見た目が変化するか試してみると面白いですよ。
このタイプの表現は、キャラ固有スキル等で、発動してから一旦ゼロになって、またチャージしてを繰り返すようなタイプで使えそう。
２色のカラーをパラメータを使っているので、
それぞれ違う色にしてスピード感、同じ色でチャージ中、という使い方ができます。
54. テクスチャを線画と塗りで分けておく
このタイプは、ちょっと制作フローが変わってくるので、先にルックを確定させておかないと、後から思い付きで実装するのは難しいタイプ。絵を描くアーティストに 線画 と 塗り を分けて納品、もしくは分けてテクスチャを作ってもらう必要があります。
絵のタッチによっては無理になる表現ですが、アニメ塗りのような線画が独立しているような絵だと試してみてもいいと思います。
用意したテクスチャは以下
RGB
Alpha
2枚の絵をゲージとして動かすかたちになるので、ちょっと交差が多くて見苦しいですが以下のような構成にしました。
Lerpノードが 3つあります。
左の 2つはゲージとして色を分けるためのもの。
重要なのが右端の Lerpで、線画を見て、線のあるところとないところで塗り分けを行っています。「線画を見て」というのは、アルファチャンネルの状態が白黒で描かれていてシェーダーでは 0～1 として扱われるのを利用するという意味です。
白(1.0)の部分に線画のカラーを、黒(0)の部分に塗りのカラーを、途中のグレーはその中間という処理で、結果的に線画と塗りの２枚をブレンドすることになります。
シェーダーを使わない場合、スプライトとかエレメントなどのパーツを２枚重ねることになりますが、シェーダーを使うと１枚で済みます。
ちょっと遊んでみました
52 で作ったノイズテクスチャを線画のカラーにしています。
今回はこの辺までにします。
一気に8本紹介しました。
ゲージ本体ではない部分に、いろんな表現を差し込めるので、どんな印象になるか試しながらノード編集に慣れていくことができればいいなと思います。
シェーダーならではの表現や、意外なノードの使い方に気が付いたりと、夏休みの工作としてもうってつけですね。
とりあえずシェーダーをこねこねするための教材という位置づけですが、もし本気で実装するのであれば、ゲージの範囲に気を配る必要があるので、一応過去記事を貼っておきます。
ほんとに暑い日が続きますね。冬とは違って着るもので調節できないぶん体温調整の難易度が跳ね上がる感じなので、みなさま体調にはくれぐれもお気を付けてお過ごしください。
ではでは
素敵なゲージライフを！
