何とか100本をカウントすることができてホッとしています。約一年半かかってしまいました。100本という数字のいかに重たいかを身をもって知ることができた。見積もりの甘さゆえの楽観的な数字だったと今更ながら思う。いけるんちゃう？みたいな。
桜井さんのように事前に内容を精査して原稿を準備していれば、30本ノックになっていたか、もっと早くに終わっていたかもしれない。
途中本業の繁忙期に突入して時間の余裕がなくなったりしたので、更新間隔が空いてしまったときは、ネタ切れで逃亡説も囁かれていたかもしれませんね。実際ネタ募集したこともありましたし。
書きながら改めて検証したりして、扱い方の印象が変わるノードもありました。経験則で理解したつもりになっていたけど、現場でちょこっと試して解決してしまう程度では、深い解像度での理解に至らないのを痛感しました。
とりあえずリニアなグラデーションをゲットできればゲージが作れます。
本来 TexCoord ノードは UV座標を扱うノードです。
シェーダーを覚えたての頃は LinearGradientノードを使っていました。名前がズバリなので安心感があったのです。
このノードは Detailを見るとMaterial Function Call とあるので、UEで用意されたノードです。ダブルクリックすると中身を見ることができます。
これを見たときのインパクト。
え？ TexCoordノード、ていうか UVってこんな使い方もできるんだ。
LinearGradient ノードは ComponentMaskノードをつながなくていいのは便利なんですが、サンプラーにつなぐときには ひとつにまとめないといけないのと、TexCoordノードは登場頻度が高く、[U] +クリックで取り出せるしで、LinearGradientノードは私のよく使うノード集から消えました。
このリニアなグラデーションに対して、Ifノードで分割していたのが Stepノードになり、色のないところに色を付ける Lerpノードと組み合わさってゲージの基礎ができあがりました。
いまのところ この構成でいい具合にゲージ表現できているので、あえて経過を辿るようなことはせず、基本の構成としてビジュアルのアレンジを楽しむという形にしています。
というわけで、シェーダーを使ったビジュアルをいろいろと試しながら、使えそうなやつ、面白そうなやつ、特殊なやつを網羅したら 100本なんて、あっという間・・・のはずだったのですが。以外にできることは少ない。でもちょっとしたアレンジで印象が変わるなら、その辺も採用していけば、反復練習にもなるんじゃないかと割り切ってみたのですがいかがでしたでしょうか。
扱い方に慣れてきたら、次は自分のアイデアを試してもらえたら嬉しいので、紹介したゲージのサンプルは、テストするためのものというニュアンスを込めて時間をかけないでつくれる素材を意識しました。
途中から記事を見始めると、怪しいノードが出てくることに気づくと思います。
マテリアルパラメータコレクションという仕組みを利用して進めました。
ゲージは動かないとテストできないので、動かすためにタイマーノードを入れたりすると紹介するときに邪魔です。そこでレベルを再生してマテリアルパラメーターコレクションに対して常に値を書き込んでいれば、大量のマテリアルを作っても簡単に一律のテストができます。初回の記事で解説していますので、興味が湧いた方はぜひ試してみてください。
作ったゲージを画面いっぱいに並べても一斉に動くので壮観です。
イベントで変化するやつは、キー入力に反応するようにしています。
一度こういったテスト用のレベルを作っておくとちょっとしたテストが気軽にできるのでオススメです。
シェーダー内で使うコマンド（命令）はノードという形で順番に組み合わせて最終的な出力結果を想定通りの物にします。同じ結果にたどり着くとしても、いくらか組み合わせに幅があります。「結果オーライ！（汗」が ある程度の「確信」に変わるまでサンプルを作ったりして「よし！」って安心しつつも、しばらくするとすっかり忘れて過去にやったのを思い出しながらつないでいたら、思ってたより少ないノードで作れたり、または調整の仕組みをひらめいたりします。
つまり
慣れる
これに尽きます。
Photoshopやクリスタなどのレイヤーのブレンドについて計算式を理解してから使う人なんていないんじゃないかと思います。シェーダーも、同じようにノードの組み合わせを試して結果を体験してみるところから始めればいいと思うのです。
ディゾルブやディストーション、グリッチみたいな演出やエフェクトで使えそうな目を引くやつは、難しそうに見えてしくみは簡単。解ってしまえばたいして難しくないけれど、素材がクオリティを左右するので、いい感じの素材ができるまで四苦八苦することも。素材の塩梅が大事ではあるけれど、まずはUV座標をいじるとどうなるのか、加算や乗算、 閾値（しきいち）を使うと何ができるのか、値を別の用途で使ってみる、というような試行錯誤を経て、ノードの扱い方さえ覚えられたら、あとは工夫と根気でどんどんいいものが作れるようになります。
ということで実用レベルでの習得を後押しするために 100本用意しました。
つまり
やってみる
これに尽きます。
シェーダーを推す理由はいくつかあるけど、特に大事にしたいのは 2つだけです。
テクスチャの効率化 と 調整コストの削減
これ以外は、タイムラインなどのアニメーション制御のしやすさ、装飾、演出 での活躍が期待できるので無理しない程度にチャレンジするくらいでいいかなと。確かにこのあたりはうまく扱えるようになると、早い者勝ちですがドヤ顔できます。
ただ、演出効果系は派手さはあるものの、ユーザービリティの質が上がるものではなく、場合によっては悪目立ちすることもあるので、さりげなさは大事です。
キャラ絵のようにキレイで大きいほど喜ばれるものはメモリ消費がネックです。
テクスチャを効率よく使用するということは、そういったリッチなテクスチャをたくさんメモリに乗せるために、削れるものはとことん削る。でもクオリティは落としたくない。そのためにはシェーダーが頼もしい味方になってくれます。
ゲーム開発は最後の最後まで仕様が揺れます。開発期間が長いと見飽きてきて手を入れたくなったり、先行リリースのタイトルと被ってしまったり、時流的にNGデザインになってしまったり。開発あるあるです。
手を入れたくなったとき、ある調整によって連鎖的に変更しないといけないものが多くなることなんてしょっちゅうです。そうなると「妥協」の二文字が脳内に積みあがっていくことになります。
シェーダーのパラメータを変えたり、ひと手間入れておくことでギリギリまで安全に調整できます。もちろんデザインを変えるのは大変ですが、UMGやブループリントをいじらずに見た目のガラリと変えることもできたりするので、やっぱり融通がきくというか、ゴリ押しができたりして臨機応変な対応がしやすくなります。そのためには使いこなせたほうが断然有利です。
パラメータの使い方に慣れてくると、調整のしやすさと汎用化に気づくと思います。
少しでもたくさんの美麗なグラフィックや、演出効果を実装するために、節約して切り詰めるところはシェーダーを補助的に使って、画面処理に余裕のある場面では大胆にリッチなシェーダーを組む。いろんなシチュエーションに対応できるバランス感覚を身に着けるためにもいろんなシェーダーを経験しておきたいものです。
つまり
工夫して試す
これに尽きます。
100本分を改めて眺めてみると、ゲージとしての仕組みはだいたい同じであることに気づくと思います。
Stepノードで 0 と1 の2色に分け、Lerpノードで着色。
まずは これを基本形として覚えておけばだいたい何とかなります。
あとはデザイン次第で継ぎ足ししてゆきます。
テクスチャに余裕があれば、UVを動かしてみたり。
汎用性については慣れるまではあとから考える方が良いです。最初は狙った仕様通りのものを速度重視で用意。いくつか溜まってきて同じような挙動のやつがあれば、まとめられないか検討する。共通項を見つけるような感じで少しづつ進めると安全です。
最後に
シェーダーを使わなくてもゲームは開発できますが、使えるようになるとUIデザイナーとしての QOL が少し向上します。
用意したデザインパーツをテクスチャにして復元するだけの簡単なお仕事。
で納得していてはもったいない。
せっかくUEという素晴らしいゲームエンジンを手にしたのなら、使いこなすことであなたのセンスをさらに引き出すことができます。たぶん。
ぜひいろんな表現、手法を見つけていってください。
この100本ノックがそのための足がかりになりますように。
ではでは
素敵なシェーダーライフを！
