「呪術廻戦 ファントムパレード」のゲーム的な映像表現「シネマティックシーン」はどのように実現されたのか

　サイバーエージェントは2024年3月7日，ゲーム・エンターテイメント事業部の技術やノウハウを紹介するゲーム開発者向けカンファレンス「CyberAgent Game Conference 2024」を開催した。本稿では，サムザップでアートディレクターを務める中山祐治氏のセッション「『呪術廻戦 ファントムパレード』 ゲームライズしたADV表現 ～『シネマティックシーン』制作のこだわりと実現への道のり～」をレポートしたい。

「CyberAgent Game Conference 2024」公式サイト

CyberAgent Game Conference 2024 アーカイブ動画一覧

　「呪術廻戦 ファントムパレード」のストーリーパートは，「アニメを元にした追体験のストーリー」と「ゲームオリジナルストーリー（福岡分校編）」に分かれている。前者はTVアニメ1期のアニメーションを導入しており，「呪術廻戦」を知るプレイヤーにとっては，なじみやすく没入しやい展開だ。

　一方，福岡分校編にはアニメーションがなく，スチルイラストとLive2Dを使った会話劇の演出はあるものの，プレイヤーにとって没入感が弱く物足りないのではないのかと考えた。

　そこで検討したのが，福岡分校編にも映像に近いアニメーション表現を追加することだ。ただ，よりゲーム的な体験を提供できないかと模索し，その結果として生まれたのが「シネマティックシーン」だったという。

　シネマティックシーンは，以下の4つの特徴を持つ。

• ストーリーパートを進めていくうえで，タップ待ちにも対応した動画ではない映像表現
• ゲーム内イラストやLive2Dのテイストに合わせた親和性の高い表現
• 少ないリソースで高いクオリティのシーンを制作
• サムザップだからこそのSpineを使った2Dアニメーション

　Live2Dやスチルイラストだけでは難しい臨場感やドラマチックな表現を実現するにはどうすればいいか考えた中山氏らは，まず，絵コンテを作って演出と画作りに取り組んだ。この工程を入れたことにより，動きのあるダイナミックな演出やカメラワークなどが可能となり，より見応えのある表現に近づいたという。


　絵コンテからシーンを制作するにあたっては，当初，既存の素材でできる範囲を考えていたものの，それだけでは不十分だったため，シーンによって作画を制作した。制作には，Live2Dではなく2Dアニメーションツール「Spine」の技術を使ったが，Spineはシネマティックシーンと相性が良く，Unityで制作するうえでも効果があったという。


　方向性が定まったことにより，次はビデオコンテの制作に着手した。このビデオコンテ制作に用いたのが，Unityの「Cinemachine」によるリアルタイムのタイムライン制作機能と，再びSpineだ。
　CinemachineとSpineの採用，そしてタップ待ちの仕様を考えたうえで構築した表現方法が，シネマティックシーンなのだという。

　このシネマティックシーンを実現するにあたっては課題もいくつかあり，中でも大変だったのが，以下の3つだった。

• Unityでの表現を「After Effects」の表現に近付ける
• リソースが毎話ごとに肥大化し，コストがかかる
• クオリティ維持ができるチーム体制

　1つめに関しては，表現の土台（UnityのCinemachineとSpineの採用）はできたが，着地点として「Unityでの表現をAfter Effectsでの表現に近付ける」という課題の解決が必要となった。結果として「After EffectsでできることをUnityでもできるようにする」というシンプルな解決方法に至り，エンジニアと協力し追加機能の開発をしたそうだ。そのおかげで，After Effectsにはおよばないものの，近い表現が可能となり，主にタイムラインやポストエフェクトまわりの機能・表現の幅が格段に広がったとのこと。

　2つめのリソース管理面の課題とは，1話あたり10～20カットほどで構成されるシネマティックシーンを毎回，新規で制作するとリソースが肥大化するというもの。
　これは「過去に制作したリソースを差分という形で流用」することによって解決を図った。具体的には，過去のリソースを参照できるシートを作り，コンテ制作のあと，各リソースの発注資料を制作する際にそれを確認して，同じモデルがある場合にはそれを用いることにしたとのこと。とはいえ，シーンによってモーション（演技）を変えたり，差分を作ったりして，同じ素材には見えないようにしているそうだ。

　3つめは，チーム体制に関する課題だ。シネマティックシーンの運用にあたって，クオリティを担保するための人材を確保することはもちろん，他チームとの連携も必要となる。それを解決するために考えたのが，「スキルセットの明確化，ノウハウの蓄積，課題共有の振り返り」だ。
　まず，各セクションのリーダーを決めた。人材の入れ替えが発生しても大丈夫なように，蓄積したノウハウを適宜まとめ，スキルセットの言語化も明確にし，毎月必ず，振り返り会を実施した。
　この3つを徹底し，仮に人材の入れ替えが発生しても，新しく参加した担当者に足りていないスキルの可視化し，各セクションで起こりうる課題を事前に把握できるチーム体制を構築できたという。

　制作フローも紹介されており，シネマティックシーンは，以下のスライドに示された7つの工程で制作されたという。


　絵コンテ制作は，シナリオ班が選定したシネマティックシーン導入部分をチェックし，あらかじめ必要な情報をシナリオ班やストーリーパートチームとの間で確認してから，絵コンテに着手した。出来あがったシナリオからコンテを作るのではなく，シナリオ班とコミュニケーションをとりつつ，「コンテを作りながらシナリオもブラッシュアップ」しているそうだ。
　これにより，映像になったとき，セリフの言い回しや内容などに相違が生じることを防ぎ，より良い演出にするためのこだわりだ。

　ビデオコンテ制作では，完成した絵コンテをシーン制作ツール「Animate」で編集していく。その段階では，制作するシネマティックシーンの流れを確認すると同時に，利用する作画や背景，エフェクト，サウンドといったリソースの洗い出しも行う。なお，Animateを用いるのは，シーンごとの制作が可能で，リソースが扱いやすく，さらにタップ待ちの状態を再現できるからとのこと。

　ビデオコンテが完成したら，リソース制作に入り，各セクションに制作依頼を出す。ここでは，主に作画と背景を先行するという。作業は，ビデオコンテで演出や動きを確認しつつ，線の太さや陰影の濃さ，デッサンなどを細かく調整していく。
　次の工程でモーション制作を行うため，細かいパーツ分けなども，この段階で確認しておく。


　アニメーション制作では，主にリソース制作の工程で作ったキャラクター作画に，Spineでモーションを付ける。ボイスに合わせるため，状況や立ち位置，セリフ，呼吸などにもこだわってフェイシャル演技を制作しており，各シーンの前後のリズム感や，実装データであることも意識しながら作業を進めているという。


　各工程で制作したリソースをUnityのタイムライン上でまとめて，コンテに合わせたシーン制作を行っていく。この工程では，エフェクトも制作する。それぞれの素材の発色や全体の雰囲気に合わせた処理を入れるため，単色合成やグラデーション合成など細かく重ねてなじませているとのこと。加えてエフェクト制作では，単発エフェクトとループエフェクトをつなげて再生することで，タップ待ちで画面が止まらないようにしている。

　サウンド制作では，社内のサウンドクリエイターと協力し，シネマティックシーンで必要になる音を作る。ビデオコンテの時点で必要なサウンドは分かっているのだが，シーン制作工程でテンポやリズムの変化が生じるケースもあるそうだ。必要な効果音や，タップ待ち中の音，タップをして起きることに伴う音など，完成したシーンをサウンドクリエイターに確認してもらいつつ，アレンジしていく。
　サウンドでは，複数の音を重ねて厚みを持たせることにこだわっており，また，連続して同じ音が再生されると違和感につながるため，同系統ながら異なる音にしているという。

　その後，版元の確認会とストーリーパート班の確認会，シネマ班の確認会という3つの確認会を実施する。IPものなので，版元の確認会では，キャラクターの表現で齟齬がないかなどを確かめる。
　ストーリーパート班の確認会では，ストーリーパート本編とシネマティックシーン導入へのリズム感，導入前後のつながりを意識して確認するという。
　シネマ班の確認会は最後に行い，完成したものに対する当事者意識を全員が持ち，意見を出し合い，よりよい表現や演出を採り入れ取れながらブラッシュアップを行って完成させる。

　本作における，魅力的なシーン作りの工夫とこだわりも紹介された。まずシネマティックシーンでは，キャラクターの表情の演技にとくに力を入れたとのこと。Spineのアニメーション技術で，より滑らかで豊かな感情表現が可能になったという。


　またシーンそれぞれの雰囲気に合わせてカラーグレーディングによるポストプロダクションを適用し，ストーリーパート本編とシネマティックシーン共に臨場感を演出している（画像右側が適応後）。


　インタラクティブなストーリーパートの演出にもこだわったシネマティックシーンは動画ではなく，「タップ待ち」という仕様に合わせたインタラクティブな表現であり，ビデオコンテとシーン制作工程でも，必ずタップ待ちの体験を確認しているそうだ。

「呪術廻戦 ファントムパレード」公式サイト

「呪術廻戦 ファントムパレード」ダウンロードページ

「呪術廻戦 ファントムパレード」ダウンロードページ

4Gamer「CyberAgent Game Conference 2024」掲載記事一覧