前回の記事書いたときはまだ稲刈りも終わってなかったのに、スケジュールが不安定だったり体調崩したりしている間にもう11月。日が暮れるのも早くなってますね。
100本のゲージを作ってシェーダーを使えるようになろうということで始めた企画、まだ半分程度。ここまででゲージのルックを作るための基本的なシェーダーは大体紹介し終わったと思ってます。なので、あとは世界観に合わせたり、組み合わせやテクスチャの妙でひたすらアレンジを試していけば十分マスターできるはず。
ゲージのネタとしてはまだまだあるので、反復でもいいからアレンジネタを紹介していくか、3Dでメッシュを使ったゲージも扱うか、仕様の複雑なものを扱うか。
メッシュは準備に手間がかかる割に、シェーダーだと超シンプルだったりします。頂点カラーを使ったり変な形状が作れたりするので面白いのですが・・・
仕様の複雑なものはゲージを機能させるためにそれなりの処理が必要で、そこまで踏み込むべきなのかどうなのかが悩みどころ。というのもゲームの仕様によって制御方法が変わってくるので、これもサンプルとして紹介するのが難しいなと感じています。
ゲージの描画など付加が高いと目を付けられやすいので、責任を感じてあまり無茶できないという思いもあります。たかがゲージされどゲージ。
バリエーション違いでもいいからもっといろんなデザインを見てみたい？シェーダーはもういいから、使えるゲージを作って見せろ？
なんか悩んでしまったので、X でネタを募集してみることにしました。さっそくネタを提供いただいたので次回に予定しています。引き続きネタ募集してますので、助けてやろうという方はこのブログのコメントにでも書き込んでいただけると助かります。ＸのDMだと細かい仕様等の相談もしやすいので、そちらでもOKです。
できれば基礎を学んだら、あとは自分でアレンジを楽しんでもらえたら嬉しいなと思うのです。ゲームのUIデザインって発明で特許が取得できるんですよ。なので他人にパクられるゲージを発明してやりましょう。
前置きが長くなってしまいました
今回のゲージ本体は普通のゲージです。そこにちょっと味付けをします。
例えば体力ゲージの場合、3Dアクションだとざっくり
- 自身の体力
- 仲間の体力
- 通常の敵（あるいは雑魚敵）の体力
- ちょっと強そうな敵の体力
- ボスの体力
くらいには分けられそうです。それぞれのゲージがどのように画面に登場するか、どのように消えるかをイメージしてみましょう。
位置が固定だったり仕様上消せないものもあります。頭の上につくタイプなんかは死亡モーションやエフェクト次第ですぐ消えてほしいものもあったりしますね。エリートクラスの敵なんかは もったいぶった “死にモーション” を持っているかもしれません。ボスに至っては画面の上部に長いのがでーんと置かれたりするをよく見ます。
僕はゲージもゲームのキャラクターだと考えているので、役の重さを吟味しながら登場と退場の演出を検討します。演出はゲージの存在をアピールするための視線誘導としても効果を発揮します。
そんな演出のひとつとして、マスクテクスチャを使ったディゾルブを作ります。
白から黒のグラデーションで描いた色味のない画像を、アルファチャンネルに利用することでマスクとして機能させることができるので、用途をイメージしやすくするために「マスクテクスチャ」と言ってます。見た目の話であれば「グレースケールテクスチャ」と言う方が伝わりやすいかも。
このマスクテクスチャを使って、アルファチャンネルを操作すると、ユニークな消え方をしたり、出現させることが可能です。
僕の身の回りでは「ディゾルブ」とか呼んでいたりしますが、映像編集界隈とは少し範囲が違うようです。アルファクリップという方がイメージしやすいかもしれません。
気づかれているかと思いますが、この手法はゲージの作り方としてすでに身近なんですよね。
変化に偏りのないまっすぐなグラデーションに対して Stepノードで2階調化するとゲージになるのです。ただゲージにテクスチャを使うと解像度と圧縮の影響で精度の調整が難しいので、ゲージというよりはテクスチャならではの表現にフォーカスします。
では雲模様のようなテクスチャだとどうなるか。
腐食が進んでいくような見た目になります。
Photoshop では調整レイヤーを使うと手軽にシミュレーションできます。
例えばこんなグラデーションだと
こうなります
ピクセル分布の美しさがキモなので、解像度が高ければ高いほどなめらかに動いて良いのですが、解像度が高すぎると８ビットで階調が足りなくなったりします。
また、偏りがあると動きに緩急が付くので、ゲージには不向きですが、ゲージじゃなければ演出としてそれなりにリッチな見た目が作れるので、いろいろ試してみると面白いです。
いいのができたらテクスチャメモリと相談しつつ実装します。
このディゾルブ用のテクスチャをシェーダーで扱うためのコツをご紹介します、
ポイントは「ヒストグラム」と「レベル補正」
58. デジタルぽく出たり消えたりするやつ
まずノイズテクスチャを作ります
ドット感を表現するには あえて低い解像度にします。
64ｘ64
ノイズテクスチャはいろんな場面で流用できるので、シームレスなタイリングを考慮して正方形で作ることが多いです。UIだけじゃなくVFXやポストプロセスなんかでも使えるので、いいノイズは大事な資産になります。皆で共有できるようにノイズテクスチャを集約して管理するのは結構オススメです。
ここでヒストグラムを確認します
黒 から 白までの階調（ヨコ）が、どれだけ含まれるかの割合（タテ）です。
左端と右端がものすごく伸びてるということは、真っ黒(0) と真っ白(255)が極端に多すぎる状態。
このあと紹介する方法で確認するとわかるのですが、最初と最後が突然変化するような見た目になります。
いい感じに遷移させるには、両端よりも中央が高くなるようにします。
レイヤーの塗りつぶしカラーをグレーにしてからノイズをかけ始めたり、薄めのノイズを数回重ねがけ（Ctrl+Alt+F）たりして調整します。
いい感じの分布になりました
シェーダーで扱うときに、 0 と 1.0 が値の範囲で最小最大になります。
確実に 真っ黒、真っ白になるように、保険として「レベル補正」の調整レイヤーを重ねます。
出力レベルを 最小を 1 最大を 254 にします。
この設定の調整レイヤーを重ねておくことで、最小値 0 と最大値 1.0 が保証されます。
この状態でテクスチャは完成です。書き出してエンジンにインポートできます。
シミュレーションして確認するには 2階調化の調整レイヤーを重ねて試してみましょう。
両端が極端に多い状況で、レベル補正の保険を入れない場合
シェーダーの Stepノードだと 0 と 1 のときに真っ黒や真っ白にならなかったりします。
エンジンにインポートします。
UI でMipmapはまず使用しないので NoMipmaps
圧縮は抑え目でいきたいので Compression Settings は Grayscale
階調をリニアで扱って欲しいので、sRGB は無効
最後にFilterの設定を Nearest に設定
これでテクスチャを拡大してもボケなくなります。
シェーダーに慣れてくるとモザイク表現なんかもできるので、「シェーダーでやったらええやん」病が発症することがあります。場合によりますが小さいテクスチャを用意するだけでモザイク計算しなくて済むこともあるので、油断しないようにしたいものです。
インポート出来たらマテリアルを編集します。
アルファチャンネルに影響させるだけなので、ゲージ部分はシンプルにテクスチャを使わないで作りました。
中央下部 Progress という名前で ScalarParameterノードをつないでいます。
これをBPから制御することで、任意のタイミングでディゾルブをかけることができます。
左下のTexCoordノードの VTiling に値を入れているのは、ゲージが長方形なので、それに合わせるためにセットしています。ノイズのドットがなるべく正方形になるようにします。
マテリアルのパラメータは Widgetブループリントから操作することにします。
タイムラインでアニメーションさせるか、ブループリントでガチ計算するかの２通りの方法があります。今回はタイムラインを使う方法を紹介します。
WidgetブループリントのDesignerで Image を置いてサイズを調整したら、作ったマテリアルをセットします。 Detailsパネルの Appearance > Brush > Image のところ。
タイムラインパネルを①をクリック。アニメーションの名前を決めます。
とりあえず g058 という名前にしました。
ゲージの Imageパーツを選択した状態で、②トラックを追加。
プルダウンリストに、選択しているImageパーツが出てくるので選択 ③
さらに+Track ボタンをクリック ④
Brush.Brush Materialを選択 ⑤
さらに +Parameterボタンをクリック ⑥ すると、マテリアルの中のパラメータが並ぶので選択 ⑦
これで、パラメータに渡す値をタイムラインでキー制御できるようになります。
カスタムイベントから再生できるようにしておけば、任意のタイミングでディゾルブがかけられます。
たとえばゲージがゼロになったら再生するとこんな感じ
おまけ
ディゾルブはアルファだけではなく、Lerpノードで別のテクスチャに差し替えることもできます。
これを画面全体に応用すれば２つのシーンをつなぐトランジションになります。
つぎは、このノイズに加工してみます。
59. ノイズにグラデーションをかける
58. のゲージは全体に一様に変化が及びます。そこにグラデーションを掛け合わせることで、傾斜をつけることができます。
ゲージで使用している UV の Uをかけます。ComponentMask の R
グラデの方向を変えるには 1-x （OneMinus）ノードを Mask ( R ) と Multiply の間に入れます。
下のような状態になっています。
このようにマスクテクスチャに手を加えると面白いディゾルブ表現が可能になります。
シェーダーの中でテクスチャを合成する感じですね。
グラデーションを円形にしたりしても面白くなります。
さらにUV移動のアニメーションを加えてみましょう
Pannerノードを使うか
パラメータにしてタイムラインおよびブループリントで制御するか。
レベル補正についておまけ
雲模様のようなグラデーションだと、ヒストグラムが偏ることもあります。
でも形が気に入ったから、つくりなおすのももったいない。
そこで これをレベル補正してやります。
いい感じに全域に広げることができます。
ちょっと触りにくい印象があるかもしれないですが、慣れるととても便利な調整方法です。トーンカーブとアプローチが違うので時短のためにも使い分けていきたいですね。
今回は以上です
ゲージで使ってたStepノードと、グラデーションテクスチャでのアレンジになります。
ゲージとして使うより、ゲージの存在意義を高めるために使う感じですね。
マスクテクスチャをうまく作ることがポイントになるので、Photoshopなどの画像系DCCツールにはじまり、SubstanceDesigner やパターン生成系のアプリなどいろんなDCCツールを使いこなせると強いです。シェーダーで作ってキャプチャしてもいいかもしれません。逆輸入みたいな感じ。
Processingもいいですね。IllustratorはデフォルトがRGBじゃないのでカラーの扱いに注意が必要です。
まだ触ったことないですが 最近 Pixel Composer が気になってます。
ということで、知恵と工夫と勇気でどんどんアレンジを試していきましょう。学習は楽しめたらどんどん深まっていきます。
ではでは
素敵なゲージライフを！
