Tango Gameworksのチャレンジが詰まったカートゥーン調リズムアクションゲーム『Hi-Fi RUSH（ハイファイラッシュ）』（2）背景・ライティング編

『サイコブレイク』や『Ghostwire: Tokyo』といったリアルなホラーやアクションアドベンチャーを代表作とするTango Gameworks（以下、Tango）。新作『Hi-Fi RUSH』は、過去にないカートゥーン調の明るいビジュアルを見せる。第1回に続き、今回は背景とライティングに注目して紹介する。

関連記事：Tango Gameworksチャレンジが詰まったカートゥーン調リズムアクションゲーム『Hi-Fi RUSH（ハイファイラッシュ）』（1）

記事の目次

※本記事は月刊「CGWORLD + digital video」vol. 297（2023年5月号）からの転載となります。

Information

『Hi-Fi RUSH』
発売：Bethesda Softworks
開発：Tango Gameworks
リリース：発売中
価格：4,150円（通常版）、5,550円（Deluxe Edition）
Platform：Xbox Series X|S via Xbox Game Pass、PC
ジャンル：リズムアクション
bethesda.net/ja-JP/game/hifirush

© 2023 Bethesda Softworks LLC, a ZeniMax Media company. Developed in association with Tango Gameworks. Hi-Fi RUSH, Tango, Tango Gameworks, Bethesda, Bethesda Softworks, ZeniMax and related logos are registered trademarks or trademarks of ZeniMax Media Inc. in the U.S. and/or other countries. All Rights Reserved.

Interviewee

写真左から　リードコンセプトアーティスト／エンバイロンメントアートディレクター：阪井圭太氏、ディレクター：ジョン・ジョハナス氏、エンバイロンメントデザイナー：渡部圭一氏、リードアニメーター：畠山耕一氏、リードキャラクターアーティスト：松村和也氏、リードグラフィックスプログラマー：田中康介氏、リードVFXデザイナー：木戸健雄氏

グラフィックスプログラマー：駒田喬氏
以上、Tango Gameworks

Point 1：明るくカラフルなムードとカオスなムードが混ざる背景

アート班とコンセプトを共有し、ディレクターのジョン氏の要望を聞きながら、カラフルさとカオスさを混ぜ合わせた背景を生み出した。

様々な観点から描かれたコンセプトアート

カナバングラフィックスによる、シナリオから特徴的なシーンを抜き出したシーンアート。シナリオの大きな要点が固まった段階で、細かなデザインや遊びなどは気にせず比較的自由に描いてもらったという。「このシーンアートで要点が可視化できていたおかげで、各ステージの特色や作業ボリュームの把握に大変役立ちました」（阪井氏）

研究開発部エントランスエリアのコンセプトアート
左のコンセプトアートを基に背景班が作成したステージ

【背景班が作成したステージ】に空間・雰囲気演出の色温度感やライティング感などを示すためにレタッチしたライティングコンセプト
実機画像

ステージ制作のながれ

本作が例外的なのは「全てを音楽に合わせるため、具体的なステージの制作が後になる」という開発フローだ。まず楽曲に合わせてグレーモデルでステージの構造を決定してから、背景班がアセットを制作していった。

最初は企画班がグレーモデルを構築
チェックが終わると本格的に背景制作へ。アート班によってラフデザインが起こされる

背景班が上の企画班が構築したグレーモデルを基に作成したグレーモデル。「背景班は、建物の接地やバランス調整、本番を見据えたアセット切り分け等のデータ整理をしつつ作成します。ただそれによって、企画側で考えた要素と少しズレることがあるので、定例会議等で、都度確認しながら進めます」（エンバイロンメントデザイナー・渡部圭一氏）

背景のカラーコンセプト。エリアの特徴を見ながら固有色などの配色を決める
背景制作の初期～中期の様子。基本的に本作はリズムアクションゲームであるため60fpsを死守する必要があり、当初はリフレクションも入れていなかった

UE4で既存のプロップなどを利用し、エリア全体のデザインを具体化。このターンでライティングコンセプトも作成
背景制作の後期。様々な機能を入れてルックを向上させられることがわかると、今度は逆に悪目立ちしないような調整も行われた

完成したステージ。「本作は開発が本格的に始まったとたんにコロナ禍でテレワークを余儀なくされましたが、その時点でおおまかにこのステージ制作のながれが構築できていたことで、テレワーク下でも比較的スムーズなステージ制作につながりました」（阪井氏）

背景アセットの質感設定

背景制作では主にMayaでモデルを作成。そこへLUT、エッジ、ニュアンスという3枚のテクスチャを使用しアウトラインや質感を表現している（Tangoでは3つの頭文字を取り、LENと呼ばれる）。

UV1枚目となるLUTのテクスチャ。カラーをこちらで指定
ドアのモデルにLUTテクスチャを適用

UV2枚目のエッジのテクスチャ
エッジテクスチャを適用

UV3枚目のニュアンスラインのテクスチャ。味付けとして汚しを加えたり、エッジラインに変化をつけるために使用
ニュアンスラインテクスチャを適用して汚れやタッチを追加

完成形。背景物のアウトラインは、ランダムさを出したいという要望もあり、1個1個UVを歪ませたり、頂点を移動したり、エッジ用にメッシュに割りを追加するなど手作業で調整しているという

斜めに動くガラスのスペキュラ

ガラスなどのオブジェクトのスペキュラも、トゥーン調の表現が徹底された。特に斜めに入るスペキュラはジョン氏が「カメラが動いたら、スペキュラも動くようにしてほしい」とこだわった部分だ。

カメラ開始位置。ガラスのスペキュラに注目
カメラ移動後。ガラスの光沢が移動しているのがわかる。「UVをプログラム側で生成して動かしています」（リードグラフィックスプログラマー・田中康介氏）

フレネルによる半透明表現

背景のガラスなど半透明のオブジェクトのライティングにはフレネルが活用された。

半透明ガラスが使用されている箇所にトランスルーセントライティングボリュームを配置。半透明のオブジェクトを囲い、フレネルの色を指定する。半透明のオブジェクトに対しては、全て手作業で設定している

フレネル設定前。まだ平坦な印象
フレネル設定後。ガラスの質感が出た

SSR（スクリーンスペースリフレクション）による映り込み

汎用のラフネステクスチャ。映り込みの強さは5段階ある
UV設定。ここではMayaでの作業となり、前述のLENを使用したアセットに加える場合、UVセットをすでに3つ使用しているため、4つ目を作成し、入れたい強度のところにUVを作成する

SSR適用前
適用後。映り込みが生まれ、より立体的な空間になっている

Point 2：コミックテイストならではの光と影、そのシャープな表現方法とは

最後にライティングでは、コミック風ビジュアルを活かしつつ、ひととおりのリッチな描画要素を実装している。その工夫を紹介する。

フォワードライト

本作ではUE4のフォトリアルなライティングをそのまま使用すると重くなりすぎるため、独自実装した3種のライトを活用している。そのひとつ、フォワードライトはカットアウト表現が搭載されたライト。1画面で8個まで表示を可能としている。

ただテクスチャ投影機能がないため、投影が必要な場合はデカールライト、そうでない場合はフォワードライトと使い分けるという。またディレクショナルライトのような表現もできるため、ポイントで明るくしたいところにも使われる。

フォワードライト無効時のマップ
有効化したときの照射範囲

スポットライト無効時の他マップ
スポットライトの照射範囲

デカールライト

デカールライトはテクスチャを投影できるしくみをもつライト。

画像の7種類のデカール用テクスチャから選択し、色、大きさ、カットアウトの数や幅を調整して使用している。ユーザーの目を引きやすい箇所にポイントとして配置することも多い

デカールライト1のボリューム適用範囲
デカールライト1の照射デカールボリューム

【デカールライト使用例】のデカールライト照射範囲
【デカールライト使用例】のデカールライトビジュアライゼーションデバッグ表示

Lightmassを拡張したGIベイク

本作ではライトマップは使っておらず、ProbeGIと呼ばれるライトプローブをベースとしたGI表現を実装している。これはエミッシブとスタティックライトをGIベイクできる機能で、ベイクの対象範囲にワールドボリュームライティングボリュームを配置することで適用する。このほかに、ベイクオンリーメッシュを使用し、擬似GIをベイクする手法も採用。

スタティックライトを配置
スタティックライト無効

スタティックライト適用範囲のビジュアライゼーションデバッグ表示
スタティックライト有効

ベイクオンリーメッシュ（白いボックス）を配置した様子
ベイクオンリーメッシュ無効

ベイクオンリーメッシュ適用範囲のビジュアライゼーションデバッグ表示
ベイクオンリーメッシュ有効

多種多様な影の表現

プレイヤーキャラクターの影は、常に専用の影ライトが描画するようになっている
建物などの影の中でも、より濃い影色で描画される。キャラクターに近い部分ほど斜線を太く描画することで、影の明るさの変化を表現

プレイヤー以外のキャラクターには、簡易影としてUE4のカプセルシャドウを使用。ライトを必要としないため、どの場所でも影が描画される

ボスなど、一部演出上カプセルシャドウでは表現が難しい巨大なキャラクターについては、専用影ライトを使用して動的シャドウを描画している
背景においても、動くオブジェクトに対してはクオリティアップにつながる箇所に限り影ライトを使用している。画像では大きく動く赤と黄色のギミックアームに影ライトを適用し、周囲の壁や配置物に動的シャドウが落ちている

背景の固定影については、ライトから影を落とせないため、スタティックシャドウマップアクターを配置し、対象物を投影、影が描画される面のみボリュームで囲うことで表現している
影が落ちる場所にシャドウオンリーモデル（画像内ピンク色のオブジェクト）を配置した様子。シャドウオンリーモデルは、自身は描画されず影だけを落とす設定のオブジェクト