独特の絵本ルックで魅せる『ベヨネッタ』シリーズの前日譚『ベヨネッタオリジンズ: セレッサと迷子の悪魔』（2）背景・エフェクト編

人気タイトル『ベヨネッタ』シリーズの新作、『ベヨネッタオリジンズ: セレッサと迷子の悪魔』が3月17日（金）にリリースされた。シリーズ作とは一線を画す絵本をモチーフとした温かみのあるビジュアルの開発について、プラチナゲームズに聞いた。

前回のキャラクター制作、モーション、UIに続き、今回は背景とエフェクトの制作について紹介する。

関連記事：作画キャラと3Dエフェクトが絡む異色の独特の絵本ルックで魅せる『ベヨネッタ』シリーズの前日譚『ベヨネッタオリジンズ: セレッサと迷子の悪魔』（1）

記事の目次

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

Information

『ベヨネッタオリジンズ: セレッサと迷子の悪魔』
発売：任天堂
開発：プラチナゲームズ、任天堂
リリース：発売中
価格：6,578円（パッケージ版）、6,500円（ダウンロード版）
Platform：Nintendo Switch
ジャンル：アクション・アドベンチャー
www.nintendo.co.jp/switch/axb8a/
©Nintendo © SEGA Published by Nintendo

Interviewee

前列左から　リードシネマティックアーティスト：田中裕史氏、VFXアーティスト：岡田賢哉氏、VFXアーティスト：岸杏樹氏、アートディレクター：西井智子氏、リードUIアーティスト：近藤知之氏

後列左から　グラフィックプログラマー：袁涌淇氏、エンバイロメントアーティスト：佐事晃斗氏、リードコンセプトアートティスト：陳俊承氏、ディレクター：ティナリ・アビビ氏、プロデューサー：田中孝治氏、リードキャラクターモデラー：髙橋忠礼氏

以上、プラチナゲームズ

Point 01：スタイリッシュに描き出す背景としての妖精の森

コンセプトアートからレイアウト、レベルデザイン、ポストプロセスを経て仕上がったルックは、まさに「絵本らしさ」と「妖精の森」というコンセプトそのものだ。

ファンタジックな背景のコンセプトアート

本作のイメージを特徴付ける重要な要素のひとつが、スタイリッシュな絵本の世界を表した背景だ。リードコンセプトアーティストの陳俊承氏は、「ちょっと不思議でメルヘンチックなモチーフをランドマークにしてデザインを進めました。森の中に大きなカゴや、公園みたいなものを置いたんです」と、「妖精の森」と「絵本っぽさ」というコンセプトを背景で表現するための工夫について話した。

またエンバイロメントアーティストの佐事晃斗氏によると、背景セクションでは「手描き感のある画として映える背景」、「レイアウトの疎密感」、「プレイヤーがカメラを動かせないストレスを感じず、画づくりも担保できるカメラワークを意識した背景」という3点に配慮して背景制作を進めたそうだ。

プレイアブルのイベント画面
【左画像】の場面が一枚絵として描かれた「思い出のしおり」

画面の密度感の調整前
密度感の調整後。輪郭にディテールのある要素を加えて密度感を出した

アセットをバランス良くレイアウトして美しい背景のシルエットを得る

本作では、ステージに配置したアセットのシルエットが背景デザイン上の重要なポイントになる。画面に緻密さを出すためには細かくアセットを配置していきたいところだが、アセットが多くなると処理落ちしてしまう。多すぎると処理落ちし、減らしすぎてもチープになるというせめぎ合いの中、ひとつひとつ実機で処理を確認しながらレイアウトを進めたという。

「アセットにはマテリアルに含まれるリッチさや立体的表現が含まれていませんから、画面のレイアウトやカラーバランスを整えないと、すごくクオリティが下がってしまうことになります。そこにはかなり気を遣いました」と佐事氏。

Mayaでホワイトボックス状態のアセットを組み合わせてレイアウトを作成
【左画像】を実機で確認

レベルデザインと画づくりを両立させるためのカメラ調整

本作ではユーザーがカメラを動かせないことから、カメラ位置をどう設定するかがとても重要になった。カメラによるレベルデザインと画づくりの両立が欠かせないため、気を遣ったという。また、俯瞰に設置されたカメラが「森」の設定と相性が悪かったと佐事氏は話す。

「森は天井が塞がっていないと深い森という感じがしないものです。でも今回は天井を開けたまま、深い森の中を歩いている雰囲気を出さなくてはならなかったので、木々からの落ち影を効果的に地面やキャラクターに落としたり、手前に被さるアセットの配置を工夫したりして対応しました」（佐事氏）。

カメラ補正なし。キャラクターは中央にいるが、足元のギミックを作動させた後にどうなるのか想像がつかず、わかりにくい
カメラを引いて右方向にオフセットをかけることにより、次の目的地となる幹の上への動線を強調。これによりギミックを用いて先へ進むという発想へプレイヤーの意識を誘導している

別の例。カメラ補正がないため、ギミックと次の目的地との関連性がわかりにくい
カメラ補正あり。カメラを引き左方向へオフセットをかけることで、プレイヤーとギミックの位置関係が近づき、また動線である崖の上一帯も見えやすくなった。このようにギミックと動線の関連性を見せることで進路の誘導を行なっている

UVによる影の表現とガラスシェーダ

影は基本的にアルベドマップに描き込まれているが、対応できない場合はUVグラデーションを使用。この方法であればテクスチャなしで静的な影を表現できる。また、ガラスの反射表現にはガラスシェーダが用いられており、ハイライトと共に模様も投影されている。

影の表現例。UVグラデーションなし
UVグラデーションあり

ガラスのシェーダ設定。ハイライトの角度や色、ハイライト内の模様の動きなどをMaya上で細かく設定できる

背景のLODは3段階用意

本作にはディテールの細かいアセットも多いため、背景の軽量化対策としてLODを3段階用意した。基本的にはカメラ位置に応じて自動でLODを切り替えるよう設定してあるが、強制的にLODを下げて表示する箇所もある。

実機画面
デバッグ機能を使って【左画像】のLODを表示。赤がLOD0、青がLOD1、緑がLOD2

別の例の実機画面
【左画像】のデバッグ

絵本の世界観をポストプロセスで完成させる

ポストプロセスを適用して絵本の世界観をグッと高める。

トーンマップ、キャラクターの色調補正、背景の色調補正を施してベーストーンをつくった状態
フォグの付加による深度補正、紙のようなノイズを加えるペーパーオーバーレイ、ハッチングとアウトラインを適用。絵本らしいルックに仕上げた

別の例。ポストプロセスなし
ポストプロセス処理後

別の例。ポストプロセスなし
ポストプロセス処理後

ポストプロセスによる背景のアウトライン描画

背景のアウトラインは、キャラクターと同様の背面法に加えて、深度差、マスクの輪郭、シャドウの輪郭などを利用して描画している。深度差については、オブジェクト同士に一定以上の深度差がある場合にアウトラインを描画する。

この方法ではカメラが寄った際にラインが太くなる問題を回避できるため、より手描きに近いラインになるという。

なお、キャラクターにはラインがデザインに含まれているため背面法アウトラインを採用し、対象とカメラの距離によって押し出し幅を変化するようにして画面上のラインの太さが均一に見えるように調整しているとのこと。

背景のアウトラインを描画した完成ショット
ポストプロセスなし

アウトラインの種類ごとに色分けした実機表示。黄色が背面法、緑がマスクの輪郭を拾ったアウトライン、赤が深度差を使ったアウトライン

自社エンジンでのシャドウ設定。影の輪郭に対してもアウトラインを表示する設定にしてある

Point 02：絵本の中の画として描くエフェクト表現

「エフェクトも絵本の一部」というコンセプトに沿って制作された、手描きの風合いをもつオーガニックなエフェクト群が、ゲーム体験を一段上のレベルに引き上げる。

エフェクトにも絵本や手描きのコンセプトを反映

本作ではエフェクトにも絵本のコンセプトを反映させ、いわゆるVFX的なものからは離れた表現を模索。

「重点的に考えたのは、絵本のテイストを感じられる一方で、鮮やかでリアクションが気持ち良いエフェクトです。エフェクトはそもそもがCG的要素が大きくて、絵本とはかけ離れたものだと思うので、そこをどう擦り合わせるのかが課題でした」とVFXアーティストの岸杏樹氏は話す。

ろうそくの発光表現。いわゆるCGっぽいグローを避け、輪郭がはっきりしたテクスチャで炎を表現している
モンスターの咆哮の表現。一般的にこうした咆哮のエフェクトはブラーや集中線、粒子を飛ばしてインパクトを出すが、本作ではなるべくそうした表現は避け、手描き風のラインで表現している

驚きの表現。怒りや驚きの表現には漫符表現を使いがちだが、本作ではマンガ的表現は絵本にそぐわないと考え、別の表現方法を模索したという
怒りの表現

手描き素材を使った術「ウィッチパルス」のエフェクト

本作のエフェクトには、一部アートセクションによる手描きのテクスチャが活用されている。ゲーム開発において、ここまでアート側からテクスチャの提供を受けたり、アート側と監修作業を密にやるというのはかなり珍しいことだという。

またプラチナゲームズでは、エフェクトは自社エンジンに組み込まれた効果ツールで制作する。効果ツールで作成したエフェクトはそのままエンジン内で実装まで行える。

セレッサの術「ウィッチパルス」のエフェクトを自社エンジン内の効果ツールで作成。手描きのテクスチャが登録されていることがわかる

属性系エフェクトの表現で活躍する手描き素材

エフェクトのテクスチャを手描きで用意する場合、ひとつの動きに複数枚のテクスチャが必要となり、コストパフォーマンスは非常に悪い。しかし本作のような絵本の世界を表現するという目的がある場合、手描きテクスチャの選択は効果的になる。

チェシャの石属性アクション、トップビュー。水溜まりと地面の境界のエフェクトが特徴的だ
パースビュー

別の例として、チェシャの木属性アクションのエフェクト
【木属性アクションのエフェクト】のテクスチャ設定。ツタはアートセクションが提供したテクスチャ素材を使用

【木属性アクションのエフェクト】のエフェクトカラー設定
もう1例、炎のエフェクト。24枚の手描き連番テクスチャからアニメーションを生成している

手描き素材で上質に仕上げる背景のエフェクト表現

手描きのテクスチャは背景にも使われている。十分にアートディレクションされた手描きテクスチャにより、絵本から切り出されたようなルックが見事に表現されている。

紫のベールや夜空のエフェクトは手描きのテクスチャで表現
滝に水飛沫エフェクトを付けている様子。水飛沫には手描き連番テクスチャを使用

実際の背景エフェクト作成画面。背景モデルやフィルタ等の実際のゲーム環境をそのまま効果ツールに瞬時に読み込ませることができ、この中でエフェクトを直付けしていく
【左画像】に手描きのエフェクト素材を配置しているところ

点のゼンマイのような模様は、プリミティブと呼ばれるモデルに対してテクスチャを表示させさらにマスクを動かすことにより、点がゼンマイの上を移動していくようなエフェクトになっている。このゼンマイ用のプリミティブモデルは8種類ほどの形状を用意
【左画像】をアップにしたもの。テクスチャを表示したプリミティブモデル

エフェクトを組み合わせた絵本の滲み表現

絵本イベントの滲み表現もエフェクトを用いたもののひとつ。画面上の紙もエフェクトで表示しているが、その紙のエフェクトに対して「陽炎シェーダ」（ノーマル情報を使って歪みを与えるシェーダ）を適用することで、紙の一部を消し込むというしくみだ。VFXセクションが消えるエフェクトまでを作成し、シネマティックセクションが引き継いで組み込んでいる。