『グリッチバスターズ』の裏側をTAが紹介してみた！　～第3回「背景表現編」

2024年4月4日 15:06

こんにちは！トイロジックでテクニカルアーティスト（以下、TA）をやっているトリと申します。昨年発売された『グリッチバスターズ：スタックオンユー』の開発に携わっておりました。

本記事は、全3回にわたりお送りしている、グリッチバスターズの裏側をTA目線で紹介する企画の最終回となります。

今回は「背景表現編」ということで、グリッチバスターズの背景を彩るために工夫した、いろいろなシェーダ表現をまとめて紹介してみようと思います。なお、前回、前々回に引き続きUnreal Engineの用語や画面を交えての紹介とさせていただきます。

毒々しいけどポップ！？　汚染された世界観を特徴づけるポストエフェクト

グリッチバスターズは、汚染されてしまったインターネットの世界が舞台です。

この世界感をビジュアルで特徴づけるには、やはり、どこでも目にすることになるであろう汚染物質（グリッチ）を、魅力的に（かつ、アブなそうに！）表現することが効果的だと考えました。

そこで、本作では、グリッチを表現するにあたり、その名の通りモーショングラフィックスなどで見かける「グリッチエフェクト」のような、色ずれを起こした見た目で表現することにしました。この表現は、ポストエフェクトで描かれています。

▲ゲーム中にはこんなに大きなグリッチも登場します。

仕組みは以下の通りです。

CustomStencilを使い、汚染のシルエットのマスクを得る
マスクを少しだけ横にずらし、ずらす前のマスクでくり抜く
くり抜かれたマスクをレイヤーマスクとして、シアン、マゼンタのカラーと元のゲーム画面を合成する

発想はシンプルですが、VFXとしてはなかなか効果的です。

マテリアルのグラフは、以下のような感じになります。
※このサンプルでは遮蔽等は考慮していません

実際にゲームに実装したものは、透け感を表現するために多重にレイヤーを作っていたり、ゲームに必要な各種機能を含めたり、最適化のために細かく処理が整理されています。何か似たような表現をする機会があれば、上記サンプルを参考にしてみてください。

まるで無限の空間？改造インテリアマッピング

２つ目にご紹介するのは、プレイヤーキャラが出撃する際の、いわゆる「スタートポイント」の表現です。上の方から覗き込んでみると…

こんな風に、まるで無限に空間が続いているかのような表現になっています。

これは、ビルの窓の表現に使われたりする「インテリアマッピング」を応用して作っています。
通常は手前を除いた3~5面を仮想的に描画することで窓から室内を覗いているかのように見せますが、今回は（仮想的な）底面からの距離に応じてフォグのようなものを描くことで、ずっと先まで空間が続いているかのように見せてみました。

▲たまにはすぐにスタートポイントから動かずに、足元を眺めてみるのも乙なものですよ。

また、インテリアマッピングでは室内の各面のUV座標を計算で求めるものですので、部屋のテクスチャを貼るだけでなく、UV座標を基に距離関数を使って図形を描画することも可能です。壁面のランダムに点滅する水玉模様は、この考え方を活かして作ったものです。

▲シェーダではUV座標が活躍する機会は多いですが、インテリアマッピングにおいても応用できるものです。

元々強力な表現手法であるインテリアマッピングちょっと応用するだけで、さらに表現の幅が広がる、という実例でした。

なお余談ですが、浮かぶ足場のように見える部分は、BumpOffsetノードを使った視差マッピングを使って描いています。

業界初⁉ 消えるギミックの点線アウトライン

こんなものも作りました。

これは、スイッチを押すと出現し、押せていない時は接触不可な足場の、接触不可状態を表す表現です。
立方体の足場が点線状になっていることで、触れなそうな感じを表現したい、というオーダーだったのですが、シルエット以外の線が見えているとゴチャゴチャしすぎるので消してほしい、という条件付きでした。

点線アウトラインの実装解説

どう実現したか、簡単に解説してみます。まず、点線である、という時点で、一般的なアウトラインの手法である、背面法やポストプロセスを使った手法は難しいであろう、と考えました。（思いつく方法はありましたが、おそらく高負荷なため、案から外しました）

そこで、立方体の各辺に予め点線のメッシュを配置しておき、見ている向きに応じてシルエット以外の辺を非表示にする、というアプローチにしました。

「シルエット以外の辺」は、立方体の場合、以下の条件で判定が可能です。

立方体の各面のうち、面法線と視線ベクトルの内積値が正である面と負である面に挟まれた辺が、シルエットとなる辺である（正同士、負同士に挟まれた辺はシルエットとなる辺でない）

※この条件判定は立方体ならどの角度で見ても成立します。

辺メッシュに位置などの情報を埋め込んでおくことで上記の条件判定をマテリアル内で行えるようにします。あとは、シルエットでない辺をOpacityMaskで非表示にすれば、点線表現の出来上がりです。

この手法のメリットは、透明・半透明であってもポリゴン数さえ許せばアウトラインを出せること、それから、ある程度線のスタイルをコントロールできることです。

現時点では立方体にしか使えない手法ですが、実は今も研究を進めており、形状問わず使用できるようにする目算は立っています。いずれ機会があれば、当ブログで進展をご報告したいですね。

その他背景表現アレコレ

ゲームにおける背景というのは、とにかく要素が多いですよね。それだけにここまでご紹介したもの以外にも、面白いシェーダはまだまだあります。せっかくの機会ですので、余ったスペースでできる限り紹介してみます。

グリッチ（破壊可能ギミック）

不気味にうごめいている感じを出すために、二種類の頂点アニメをミックスしました。

呼吸しているかのように見せる拡縮の動きと、脈打っているかのように見せるパルス波による動きです。動きに連動して目？が閉じたりして見えることで、まるで生きているかのような存在感がありますね…。

イラスト風葉っぱ表現

木の葉っぱのシェーダはどことなくイラストっぽさのある表現になっています。

カメラの向きに関係なく縦方向にグラデがかかるようにすることでイラストっぽい陰影感にしてみたり、ストップモーションのようなフレームレートが低い感じでテクスチャを動かしてみたり、といったことをしました。

コイン

スコアアイテムのコインです。ライティングの影響を受けないでほしいという要件からUnlitになっていますが、環境マッピングによる反射表現に対し色をつけることで、「ベースカラーがスペキュラの色に影響する」という金属の性質を簡易に再現しています。

Unlitでも簡単に金属感が出るのでテンションが上がります。

巨大パイプライン

火山ステージに刺さっているパイプです。虹色っぽい色味が特徴的ですね。

厚みを感じられるようにリムライトの出方を工夫しています。また、空気遠近的に情報量が自然に制御されるよう、常に画面の奥の方にある箇所の透明度が上がるようにする機能も入っています。

最後に

グリッチバスターズの背景における、シェーダの工夫について紹介しました。様々な工夫を土台にグリッチバスターズの世界観が成り立っている、ということを感じていただけたのではないでしょうか。

さて、「『グリッチバスターズ』の裏側をTAが紹介してみた！」の連載は今回で最終回となります。掲載期間が空いてしまったりもあった中、ここまでお付き合いいただきありがとうございました。いろいろな表現を紹介してきましたが、実際にゲーム内で見てみると、記事を読むのとはまた違った面白さがあると思います。是非ゲームをプレイして、自分の目で確かめてみてください！

トイロジックでは、シェーダに興味がある、得意なテクニカルアーティストを募集中です！　この記事を読んで興味を持たれた方は是非採用ページにごアクセスください！