『呪術廻戦 ファンパレ』シナリオパート制作に迫る開発者インタビュー。Live2Dキャラクターの実在感を高める3Dライティングと作品愛あふれるワークフロー【CAGC2024】

2024.07.03
注目記事ゲームづくりの知識見た目を良くするインタビューゲームの舞台裏CyberAgent Game Conference 2024Unityアニメーション
この記事をシェア!
Twitter Facebook LINE B!
Twitter Facebook LINE B!

サイバーエージェントのゲーム・エンターテイメント事業部による初めての技術カンファレンス 「CyberAgent Game Conference 2024」が2024年3月7日に開催されました。

本稿では、『呪術廻戦』の世界をスマートフォンでドラマチックに表現するADV演出について解説するセッション「『呪術廻戦 ファントムパレード』ADV制作事例 ~会話シーンを「飽きさせない」画作り術~」にフォーカス。

登壇したサムザップ アートディレクター 中山 祐治氏、Live2Dアニメーター 安部 裕香氏へインタビューし、Live2D表現の工夫やノーマルマップによるライティング技法のポイント、そして人気作品を原作として扱うタイトルならではのこだわりなどを深掘りしました。

TEXT / ハル飯田
INTERVIEW / 神山 大輝
INTERVIEW&EDIT / 神谷 優斗

目次

「『呪術廻戦 ファントムパレード』ADV制作事例 ~会話シーンを「飽きさせない」画作り術~」アーカイブ動画

ノウハウを活かしてブラッシュアップを決断

——自己紹介をお願いします。

中山:サムザップ アートディレクターの中山です。『呪術廻戦 ファントムパレード(以下、ファンパレ)』では、通常のADVパートのほか、ダイナミックな2Dアニメーションを使用する「シネマティックシーン」をメインに担当しています。

安部:Live2Dアニメーターの安部と申します。イラストレーターとして入社した後にモバイルゲーム系のアートディレクターを経て、現在は『ファンパレ』のADVパートで使用されているLive2Dキャラクターを制作しています。

シネマティックシーンの参考画像(画像は公式サイトより引用)

通常のADVパートでは、会話に合わせてLive2Dキャラクターがアニメーションする(画像は公式サイトより引用)

——『ファンパレ』は企画の始動からリリースまで、どのように開発を進めていきましたか?

安部:今まで開発してきたタイトルのノウハウがあったため、それを生かして開発していきました。

加えて、「サムザップの全力を尽くしてもっと良いものを届けよう」と、演出やバトルの面白さなどでさらにブラッシュアップを図りました。

セッションで紹介された『ファンパレ』の開発指針

シネマティックシーンの使用箇所はどう決める?

——それでは、まずADVパートの詳しい制作ワークフローについてお伺いします。

安部:『ファンパレ』のADVパートは「オリジナルストーリー」とTVアニメに沿った「追体験ストーリー」、そしてキャラクターを育てると見られる「サイドストーリー」の3種類に大別されます。いずれも版元さんに確認を取りながら制作を進めています。

シナリオライターにプロットから書き起こしてもらったシナリオをもとに、スクリプター班が背景や楽曲、キャラクターの感情表現に必要なパーツなど素材の発注を打診します。シネマティック班とLive2D班ですり合わせを行った後、発注が確定します。

通常のADVパートでは迫力が足りず表現しきれない部分はシネマティックチームに制作依頼を行い、シネマティックシーンとして制作します。

——Live2Dに必要な素材もアニメーターさんではなくスクリプター班が選定しているんですね。

安部:メインスクリプターのADV制作経験が豊富で、シナリオから必要な素材を推測できることで実現できています。

——シネマティックシーンについて、「ここはシネマティックシーンを使おう」という判断は誰が行うのでしょうか。

中山:ひとつの判断基準として、長尺のシネマティックシーンは基本的にオリジナルストーリーと毎月実施しているイベントのストーリーにのみ採用しています。シネマティックシーンの中でもスチルイラストに演出をつける「ショートシネマ」と呼んでいる演出は、特に制限なく使用しています。

制作の流れとしては、シナリオのテキストが確定したタイミングで、シナリオ班からシネマティックシーンで表現したい部分を選定してもらいます。その後、確認会で詳細を人員やスケジュールなど現実的な条件を見ながら使用箇所を判断します。

とはいえ、演出経験が豊富なチームからの提案であるため、制作パートを大幅に変えることはありません。例えば「10タップ目から25タップ目まで」という範囲指定に対して「20タップ目までの方が前後のつながりがちょうどよい」など、微調整を行うことも多いですが、基本的にはシナリオ班の判断がベースになっています。

——条件によってさまざまだとは思いますが、ひとつのシナリオ完成までにどれくらいの期間が必要ですか?

安部:ものによってまちまちですね。2023年末に実装した『劇場版 呪術廻戦 0』のゲーム内シナリオは、ほとんど完成した後、クライマックスのシーンをリリース直前まで何回も手を入れてブラッシュアップしていたため時間がかかっています。

SNSでのアニメへの反響を見て演出を変えたりユーザーさんから寄せられたリクエストを参考に制作し直したりすることもあります。音声の収録は済んでいるため大きくは変えられませんが、力を入れるポイントほど時間と手間はかかっています。

中山:特に、オリジナルストーリーは監修も含めてかなり前から準備が始まっていることが多いですね。

——原作があるタイトルならではの事情として、監修以外で「こうしてほしい」というリクエストはあるのでしょうか。

安部:監修以外のリクエストはありませんね。チーム内で相互的に確認したり、ブラッシュアップしたりして進めています。ゲームの表現についてはノウハウを信用していただけているように感じます。

100体以上作成したLive2Dキャラクターのモーション内訳

——続いてはLive2Dのモーション作成についてお伺いします。本作ではキャラクターごとに「ベースタイプ」が紹介されましたが、それぞれのタイプに個別のモーションがあるのでしょうか。

安部:「cool」や「wild」などキャラクターごとの性格に対応した5種類のベースタイプそれぞれに、10~12種類のベースとなるモーションを用意しています。

各キャラクターにはタイプ別のベースモーションに加え、虎杖 悠仁の「頭をかく」や、五条 悟の「指を組む」など固有のモーションがあります。

(画像はアーカイブ動画より引用)

——固有モーションの数の目安はどれくらいでしょうか。

安部:キャラクターによって大きく異なりますね。個性が強いキャラクターほど固有モーション数が多くなる傾向があります。特に、五条 悟はちょっとした動きでもほかのキャラと違いを持たせるよう固有で作っています。

狗巻 棘のチャックを上げ下げする動きも特殊ですね。これは例えば「肯定する」モーションの場合、通常の「肯定する」モーションにはチャックに関するキーを入れず、後からチャックのモーションを乗算させて表現しています。

安部:『劇場版 呪術廻戦 0』ゲーム内シナリオの制作にあたっても、新規作成したモデルは少ない一方で追加したモーションは多いです。夏油 傑や禪院 真希など、外見の変化があるキャラクターはモーションを変えることでも違いを表現しています。

——本作で今まで作成してきたキャラクターモデルの数はどれくらいでしょうか。

安部:リリース当初は50〜60でしたが、現在では倍以上のキャラクター数になっていますね。

——かなりの数ですね。Live2Dアニメーターは何人くらいのチームになりますか?

安部:基本的にはモデル担当とモーション担当の2人体制ですね。以前開発していたタイトルでも同じ体制をとっており、流用できるモーションもあったためそこまで大変には感じていません。

——セッションではリップシンクについてのこだわりも紹介されていましたが、表情差分によって異なる口の形状を作成したのでしょうか?

安部:1つのモデルに対して通常状態の口、ネガティブな感情を表現する小さい口、バトルで叫ぶ時などに使う大きく開いた口などに対応した、5種類ほどの「あ/い/う/え/お」を作成しています。そのほか、ギャグ顔専用の口なども存在します。

表情差分も10種類以上用意していますが、アニメーションではないため体全体のモーションに比べるとかなり短時間で制作できます。

——ほかにLive2Dモーションでのこだわりポイントはありますか?

安部:虎杖 悠仁の「頭をかく」モーションは、通常のパーツ描画順とは異なり、手首を身体の後ろに、肘を前腕の手前に描画させています。描画順の制御は複雑ですが「この動きがないと虎杖 悠仁らしくないな」と思って制作したこだわりのポイントです。

シネマティックシーンでSpineを採用する理由とは

——ここからはADV演出について深掘りしていきたいと思います。まずは、シネマティックシーンの制作フローを教えていただけますか。

中山:まずはシネマティックシーンの要件に対して、セリフの言い回しなど演出についてディスカッションしつつ絵コンテを制作します。完成した絵コンテは監修に回し、問題なければVコンテの制作に移ります。

シネマティックシーンはタップで読み進めるため、Vコンテは読み進めることを想定して制作します。制作には、「タップで進める」機能が使え、カットごとの管理やリソースの配置ができるAdobeの「Animate」を採用しています。また、Vコンテの段階で作画やサウンド、背景など必要なリソース数が分かるため、工数を見積もってリソース制作を依頼します。

シネマティックシーンの制作過程が紹介されたセッション「『呪術廻戦 ファントムパレード』ゲームライズしたADV表現 〜「シネマティックシーン」制作のこだわりと実現への道のり〜」

中山:制作するリソースはキャラクター作画が大きな比重を占めます。完成したキャラクターはアニメーションツール「Spine」で骨を入れ、アニメーションをつけます。その後は、Unityの「Cinemachine」でカットを作っていく流れです。

カット制作段階でサウンドなども組み込みます。実際に入れて物足りなさを感じたときは、新しくつくり直しを依頼することもありますね。

シネマティックシーンが完成したら、3段階の確認会を行います。まず監修で確認していただいた後、ADV班とADVシーンの途中に挿入しても前後がおかしくないかを確認します。最後に、シネマティック班で確認を行います。監修後でも「1シーン足してみようか」とブラッシュアップをかけることがあります。100点をいただいても120点を目指したい気持ちがありますね。

——OKが出た後もブラッシュアップを行うというのは面白いですね。“120点を目指したブラッシュアップ”で、特に手応えがあったシーンや印象に残っているケースはありますか?

中山:五条 悟が「この目でしっかり観察させてもらうとするよ」と話すシーンは何度も作り直しましたね。最初はもう少しラフな印象だったんですが、色味を変えたり、描き直したりしています。

また、釘崎 野薔薇のイベントシーンはかなりこだわった結果、Xでたくさんスクリーンショットをポストされて嬉しかったですね。ほかにも、東堂 葵の変顔がよりアニメ版に近くなるよう、専用のポストプロセスをかけているのもこだわりです。

五条 悟が「この目でしっかり観察させてもらうとするよ」と話すシーン

——実装されているシネマティックシーンの数はどれくらいでしょうか。

中山:リリース時点で10本前後実装されており、ストーリー追加に併せて月に1, 2本のペースで追加しています。制作ラインは、複数本が同時進行しています。1本完成するまでには8か月ほどかかっていますね。

——1本のシネマティックあたりではどれくらいの作画量になるのでしょうか。

中山:ほとんどが既存の作画を流用できるシーンもあれば、全部描き下ろすシーンもあり、作画量はまちまちですね。物語が後半に近づくにつれて作画量が多くなっていく感覚はあります。

——イラスト用アニメーションツールであるLive2DとSpineを、ひとつのタイトルで併用しているのは珍しく感じます。

中山:シネマティックシーンではSpineでキャラクターを動かしています。画像素材はLive2Dと共通です。できることはどちらも大きな違いはない印象ですが、Spineの方が激しいアクションが得意であるように感じますね。関節が外れているような外連味のある動きを演出できるんです。

Spineのエディタ画面。Spineではボーンを使って画像をアニメーションさせる

中山:Spineの採用にあたっては、ポストプロセスなどの工程がUnityで完結するよう、エンジニアに内製ツールを開発してもらいました。Unity上で作業することで、ADVパートと同じポストプロセスやカラーグレーディングが適用でき、シネマティックシーンとADVパートの色味を共通化できます

安部:欲しい機能を取り入れたインポーターも作ってくれました。ほかには、ゲーム事業部内で作られたUnityシステムMODを『ファンパレ』用にカスタムして使っています。

中山:Spine自体に細かく効果を乗せられる機能もエンジニアに作ってもらっています。

Live2Dにノーマルマップを適用するにあたっての試行錯誤

——かなりクリエイティブな作業環境になっているんですね。本作は、3Dモデルの凹凸表現に用いるノーマルマップをLive2Dに適用し、立体的なライティングを表現しているのが特徴的でした。ノーマルマップはどのようなフローで制作しているのでしょうか。

中山:Live2D班に作っていただいたアトラステクスチャに「laigter」というツールを使用し、ノーマルマップを自動生成します。生成したノーマルマップはPhotoshopでレタッチし、Unity上で確認する流れであるとセッションでは紹介しました。

現在は、確認のためにUnityへインポートする手間を省くためのチェック用ツールを作成し、フローがより効率化されています。

安部:ツールでは「キャラクターの立ち位置」「昼夜」など複数のパターンを即座に確認できます。Unityの操作に慣れないクリエイターが確認作業に詰まることもなくなりました。

——ノーマルマップを最終調整する判断は誰が行っていますか?

中山:私や安部が最終的な判断を行なっています。

安部:「肩に上手く光があたらなくて」という状況であれば、まずLive2D班が肩のパーツを確認し、実際のライティング具合は中山がチェックしているようなイメージです。

自動生成のノーマルマップで生まれた余計な凹凸を調整する例

——ノーマルマップの調整で、特に難しかった部分や破綻しやすいと感じた部分はありますか?

中山:Live2Dの仕様として肩とデコルテのパーツが分離しているため、肩から首にかけてのハイライトが途切れてしまうことがありました。

また、光源に近づきすぎて眩しくなるパターンもありますね。虎杖 悠仁の頭をかくポーズで、光源に近づいた肘が強すぎる反射光を出してしまい、解決に試行錯誤したことがあります。

ほかには、色味の調整も大変でした。イラスト自体は光がなくとも成立するように色が調整されているため、ライトを乗せると想定しない色味になってしまうこともあります。そのため、ライトを乗せてちょうどよい色になるようイラストの色味を何度か調整しました。

——屋内でも屋外でもノーマルマップを使用されているのでしょうか。

中山:そうですね。ただし、昼間で開けた場所など、背景によってはノーマルマップを使わないこともあります。昼間の屋外でも、木漏れ日など局所的にリムライトが欲しい場合には使います。ほかには、赤いリムライトをのせて緊迫感を出したいシーンなどで使いますね。

ノーマルマップが特に効果的なのは強い色を混ぜたい場合で、例えば物語冒頭の「廊下で虎杖 悠仁と伏黒 恵が出会うシーン」では赤い光や青い帳によってうまく雰囲気を出せていると思います。

中山:ADVチームのコンセプトのひとつは「みんなひとりひとりが演出家であり表現者である」というものです。ノーマルマップやカメラの被写界深度をダイナミックに変化させる演出などは、この理念に基づいて生まれた要素と言えますね。

ダイナミックな被写界深度の変化も本作における特徴のひとつ

チーム全員が集まってチェックする

——『ファンパレ』のADV制作体制で「ほかとは違うな」と感じる点はほかにもありますか?

安部:確認の回数にはこだわっており、確認会は何度も行うようにしています。完成したものは、シナリオ、スクリプト、アニメ、シネマティックの各リーダーに加え、シナリオ班とスクリプト班全員がチェックします。

チームが集まってチェックすることで、その場で修正の判断ができるのもメリットであるという

安部:これに加えて、クリエイター寄りの感性を持っているスクリプターがいることも特徴です。「こう組んだらどう見えるか」といった知識があるおかげで、演出を考慮したスクリプトが作れています。

また、シナリオライターによる勉強会を行うことで、演出面の知識向上も図っています。勉強会では『呪術廻戦』の漫画とアニメを見たり読んだりして理解を深め、演出意図を分析します。これにより、スクリプター側で「喋っているキャラクターより、それによって心を動かされたキャラクターを映すべき」などの判断ができるようになっています。

——勉強会なども含めて、演出にこだわる開発チームができあがっているんですね。

安部:表現に関しては、以前Live2Dを使用したタイトルを開発していたときと同じチームだったのも大きいように感じますね。乙女ゲーム出身で、繊細な表情の調整に長けているスクリプターのおかげで細かなブラッシュアップも行いやすかったです。

現在のチームには4, 5人のスクリプターがいますが、その方がリーダーとなって演出のノウハウをレギュレーション化してくださったため、班全体が演出の知識に長けていると感じています。

——アニメの中には、どうしてもADVでもシネマティックでも表現が難しいシーンもあったのではないでしょうか。

安部:アニメのシーンをすべて再現するのではなく、思い切ってカットすることも大事です。絶対に入れたいシーンはシネマティックシーンにしますが、中だるみしそうなところはシナリオライターと相談したうえでバッサリと切ってしまいます。

例えば、多人数の会話シーンで各キャラクターが一斉に返事をする場面は、全員分の返事を入れると冗長になってしまうためカットします。

また、ADVでは場面転換を説明するために入れがちな「ト書き(※)」は、代わりに暗転の時間を調整するなど演出で表現する工夫をしています。一瞬の暗転だと場所が移動したように感じ、長めに暗転して心理描写に入ると「別の日になったんだな」と感じる、といったイメージです。
※ 場面の状況を説明するテキスト

最初はとにかく要素を盛り込んだシナリオを書いてもらい、そこからどんどん削っていきます。結果として、どのシナリオも初稿から1/3ほど削っています

——本当に作品の重要なシーンなどをしっかり把握されているように感じますが、作品のインプットはどのように行っているのでしょうか。

安部:最初はチームで集まってアニメの上映会をやっていましたね。

中山:全員が話を知っている前提でADVパートの確認会を行うため、各自で予習復習はしています。次の話も知っておかないと話がうまくつなげられないこともあり、都度全員でアニメを見返すこともあります。

安部:また、人によって心に刺さるポイントも違うため、推しキャラを紹介しあったこともありました。Live2D班では「このキャラクターは外注せずにやりたいです!」というケースも多く、キャラクターへの愛はモチベーションにつながっているように感じます。

制作チームが『呪術廻戦』ファンであることでクオリティも大きく変わってきますし、ユーザーさんを満足させられたことへの喜びも大きいです。

——ありがとうございます。これからの『ファンパレ』の展開も楽しみになるお話でした。

「『呪術廻戦 ファントムパレード』ADV制作事例 ~会話シーンを「飽きさせない」画作り術~」CAGC公式サイト『呪術廻戦 ファントムパレード』公式サイト
ハル飯田

大阪生まれ大阪育ちのフリーライター。イベントやeスポーツシーンを取材したり懐ゲー回顧記事をコソコソ作ったり、時には大会にキャスターとして出演したりと、ゲーム周りで幅広く活動中。
ゲームとスポーツ観戦を趣味に、日々ゲームをクリアしては「このゲームの何が自分に刺さったんだろう」と考察してはニヤニヤしている。

関連記事

サイバーエージェント主催のUnity勉強会「CA.unity #8」から、6セッションのスライド&動画が公開。『学マス』のライティングやソースコード自動生成機能などを解説
2024.07.05
『桃鉄ワールド』にUnityを導入した理由や役立った機能は?ユニティ・テクノロジーズ・ジャパン、シニアプロデューサーの岡村 憲明氏にインタビューした記事を公開
2024.06.27
『呪術廻戦 ファントムパレード』の「夢幻廻楼」背景演出について、サムザップが技術ブログで解説。無限に続く塔、天候の変化を表現する方法とは
2024.06.26
mocopiのモーションデータをリアルタイムでMayaに送れる公式プラグインが公開。併せて、UE版プラグインがUE5.4に対応
2024.06.21
雲が流れる速度や色彩変化を低コストで調整。UnityのSRPとVolumeを活用した事例をQualiArtsが紹介
2024.06.21
Unity Technologies、初心者から上級者まで幅広くカバーしたアニメーションの電子書籍を無料で公開。Blenderからのインポート、AIナビゲーションなど解説
2024.06.14

注目記事ランキング

2024.06.28 - 2024.07.05
VIEW MORE

連載・特集ピックアップ

イベントカレンダー

VIEW MORE

今日の用語

レンダリング(Rendering)
レンダリング コンピューターグラフィックスにおける、各種データ(3Dモデルなど)をプログラムを用いて計算し、画像として表示すること。レンダリングを行うプログラムをレンダラー(Renderer)と呼ぶ。
VIEW MORE

Twitterで最新情報を
チェック!