『呪術廻戦 ファントムパレード』ゲームライズしたADV表現 〜「シネマティックシーン」制作のこだわりと実現への道のり〜【CAGC2024】

『呪術廻戦 ファントムパレード』に導入した新しいADVの形「シネマティックシーン」の制作について紹介します。
今までになかったアニメーション表現の仕組の開発から制作フロー、実装に至るまでのこだわりや課題解決などの事例にフォーカスして解説させていただきます。

https://cagc.cyberagent.co.jp/2024/session/index.html?id=abz64bphy9

©芥見下々／集英社・呪術廻戦製作委員会　©Sumzap, Inc.／TOHO CO., LTD.
Copyright © CyberAgent, Inc.

Transcript

1. 『呪術廻戦ファントムパレード』 ゲームライズしたADV表現 ～「シネマティックシーン」制作のこだわりと実現への道のり～ アートディレクター / 呪術廻戦 ファントムパレード 中山 祐治　Nakayama Yuji 1
2. 自己紹介 2
3. 自己紹介 ❖ 中山 祐治　Nakayama Yuji 株式会社サムザップ　アートディレクター 2020年サムザップ入社。 デザイナー、イラストレーターを経て アートディレクターを努めています。 『ロンドン迷宮譚』のリリースや 『呪術廻戦 ファントムパレード』 などに立ち上げから参画。 クリエイティブ全般の技術向上やディレクションを担当。 3
4. 『呪術廻戦 ファントムパレード』について 4
5. 5 『呪術廻戦 ファントムパレードは、 2018年より「週刊少年ジャンプ」 （集英社）にて連載中の 芥見下々（あくたみげげ）氏による 人気漫画を原作としたTVアニメ 『呪術廻戦』を元にした、作品初の スマートフォンゲームです。 TVアニメ『呪術廻戦』の第1期の物語を 追体験できるだけでなく、福岡を舞台にした 『ファンパレ』オリジナルの ストーリーが楽しめる コマンドバトルRPGとなっています。
6. 『ファンパレ』開発指針 6
7. 1.スマホゲーム史上最高峰の2Dグラフィックで 　キャラクターの魅力を表現 2.奥深さを感じるゲームシステムを 　ストレス無く楽しめる手触りで提供 3.ゲームならではの要素で今までにない 　『呪術廻戦』を体験できる 7
8. 本日のアジェンダ 8
9. 本日のアジェンダ 1. シネマティックシーン制作の経緯 2. シネマティックシーンの課題とその解決 3. 制作フローの紹介 4. 魅力的なシーン作りの工夫とこだわり 5. まとめ 9
10. シネマティックシーンの制作経緯 10
11. 今作におけるストーリーパートは大きく２部構成 今作においてストーリーパート（※以下ADVとします）は ・「アニメを元にした追体験のストーリー」 ・「ゲームオリジナルストーリー(福岡分校編)」 の２つに分かれています。 前者の「アニメを元にした追体験のストーリー」は アニメ１期のアニメーションを導入し、呪術廻戦を知っているユーザー様から 馴染みやすく没入しやい展開になっているのに対し、 「ゲームオリジナルストーリー(福岡分校編)」はアニメーションがなく スチルイラストやADVでのこだわり抜いた演出はあるものの 今作をプレイするユーザー様にとってもADVの体験として物足りなさや 没入感が弱いと考えておりました。 11
12. 臨場感のあるADV表現の模索 そこで検討したのが「ゲームオリジナルストーリー(福岡分校編)」にも アニメーション表現を追加することでした。 ただ、同じようにアニメを作ることではなく よりゲームの流れとしてアニメーションを魅せられるADV体験はないかと 模索した結果生まれたのが「シネマティックシーン」です。 「シネマティックシーン」の特徴 ・ADVを進めていく上でTAP待ちにも対応した動画ではない映像表現 ・ゲーム内イラストやLive2Dのテイストに合わせた親和性の高い表現 ・少ないリソースでクオリティー高くシーン制作ができる ・サムザップだからこそのSPINEを使った２Dアニメーション 12
13. シネマティックシーンの構想　１ Live2Dの表現やスチルイラスト導入だけでは演出が難しい 呪術廻戦の醍醐味である臨場感のあるバトルや、 ドラマティックなキャラクター同士の掛け合いや雰囲気をADVの仕様に 落とし込んで表現するにはと、まず考えたのが 絵コンテを作って演出と画作りをしてみるという事でした。 13
14. シネマティックシーンの構想　２ 当初はLive2Dや立ち絵としてある既存素材でできる範囲の絵コンテで考えていましたが、 やはりそれだけでは、呪術廻戦の迫力ある演出やドラマティックな表現を 表現することが難しかったので、シーンによっては作画を制作しSPINEの技術をプラスしてみました。 その過程でこの「SPINEの技術」は、「TAPで進める」というADVの仕様において SPINE特有の待機モーションや１枚絵を動かす表現は相性がよかったのと、 Unityでシーン制作する上で扱いやすいという利点もありました。 14
15. シネマティックシーンの構想　３ 表現の方向性が定まり、Vコンの制作へ。 最初の構想で完成したのがこちらの動画になります。 15
16. シネマティックシーンの構想　４ 表現を実現するために用いたのがUnityのCinemachineによる リアルタイムでのタイムライン制作機能とまたSpineの採用です。 上記２つの採用とゲーム(ADV)での「TAP待ち」の仕様をインタラクティブに 考え構築した表現方法を、弊社では「シネマティックシーン」と呼び、 新たなADV体験と表現の一つにできたと考えております。 16
17. シネマティックシーンの課題とその解決 17
18. シネマティックシーンの課題とその解決 実現する方法が見えてきた中で浮上した課題がいくつかありました。 その中でも大変だった下記課題を３つ紹介します。 ・「Unityの表現をAEでの表現に近いものを目指す」 ・「リソース数が毎話ごとに肥大化しコストがかかる」 ・「クオリティー維持ができるチーム体制」 18
19. シネマティックシーンの課題とその解決 表現の構想土台(UnityのCinemachineとSpineの採用)はできたが、 土台構築の着地点として「Unityの表現をAEでの表現に近いものを目指す」 という課題解決が必要となりました。 「AEでできることをUnityでできるようにする」 シンプルな解決方法だが、結果的にこれ着地点になると考え エンジニアと協力し追加機能開発をしていただき、 AEまでとはいかないが、AEでできる表現が可能になり 主にタイムラインやポスプロ周りの機能・表現の幅が格段にあがりました。 19
20. シネマティックシーンの課題とその解決 リソース管理面でも課題がありました。 シネマティックシーンは１話概ね10～20カットほどで構成されており、 カットに応じて毎回新規制作するとリソース数も肥大化する課題。 「過去に制作したリソースを差分という形で流用」 これらを解決するために、コンテ制作の後 各リソースを発注する資料制作時に過去に制作したリソースを 一覧で確認できるシートを制作し、同じモデルで演出時流用することでした。 そのままの場合もありますが、シーンによってモーション(演技)を変えたり、 作画に差分を制作し、同じ素材のように見えないようにする工夫をしています。 20
21. シネマティックシーンの課題とその解決 残る課題はチーム体制です。 この仕様で運用するとなるとクオリティー担保するために 人材の確保はもちろん、他チームとの連携も必要になります。 「スキルセットの明確化、ノウハウの蓄積、課題共有の振り返り」 チーム体制の解決として、まずは各セクションにリーダーを立たせることにしました。 人材の入れ替えが発生しても大丈夫なようにノウハウの蓄積を都度まとめる事、 スキルセットの言語化も明確にする事、毎月必ず振り返り会を実施する事。 この３つを徹底し、仮に人材の入れ替えが発生しても 新しく参画した担当者が足りないスキルの可視化をして、各セクションで起こりうる 可能性のある課題を起こる前に把握するというチーム体制を作る事ができました。 21
22. 制作フローに関して 22
23. 制作フローに関して 絵コンテ制作 Vコンテ制作 アニメーション制作 シーン制作 リソース制作 サウンド制作/調整 シネマティックシーンは主に右図のような ７つの工程で制作しています。 このセクションでは各工程のご紹介をさせていただきます。 確認会 23
24. 絵コンテ制作 絵コンテ制作 Vコンテ制作 アニメーション制作 シーン制作 リソース制作 サウンド制作/調整 まずは絵コンテ制作です。 シナリオ班が選定した「シネマティックシーン」を 導入する箇所を確認し、予め必要な情報を シナリオ班やＡＤＶチームと確認してから 絵コンテを着手し始めます。 コンテ制作時に、シナリオ班と密にコミュニケーションを行い、 出来上がったシナリオから「コンテを作る」のではなく 「コンテを作りながらシナリオもブラッシュアップ」 しています。演出をつけることでセリフの言い回しや内容など、 映像になって違うという差異をなくし良い演出を作るため、 シネマ班とシナリオ班とで連携しこだわって制作しています。 確認会 24
25. Ｖコンテ制作 絵コンテ制作 Vコンテ制作 アニメーション制作 シーン制作 リソース制作 サウンド制作/調整 Ｖコンテ制作です。 ここでは完成した絵コンテを「Animate」という シーン制作ツールで制作してまいります。 制作する「シネマティックシーン」１本の流れの確認と その中で利用するリソース（作画や背景、エフェクトやサウンドなど）も 洗い出していきます。 ※この工程で「Animate」というツールを用いているのには いくつか利点があり、 シーンごとに制作できることや各リソースが扱いやすい点はもちろん、 前記でお伝えした「TAP待ち」の状態を再現できる という点が制作・確認する上で便利です。 確認会 25
26. リソース制作 絵コンテ制作 Vコンテ制作 アニメーション制作 シーン制作 リソース制作 サウンド制作/調整 Vコンテが完成し、作るリソースが確定したら 各セクションに制作依頼を出していきます。 この段階では主に「作画」「背景」から 先行して着手していきます。 Vコンテで演出や動きを確認しながら、線の太さや 陰影の濃さ、デッサンの取り方など細かい調整をしております。 次の工程でモーション制作を行うので細かいパーツ分けなども この段階でアニメーション制作班と確認しながら行っています。 確認会 26
27. アニメーション制作 絵コンテ制作 Vコンテ制作 アニメーション制作 シーン制作 リソース制作 サウンド制作/調整 ここは主に「リソース制作」の工程で制作した 「キャラクター作画」にSPINEというツールで モーションをつけていきます。 特にボイスに合わせた専用演技をするので 状況や立ち位置、セリフ、呼吸も拾ってフェイシャルの 演技にこだわっています。 また、各シーン前後のリズム感を意識したアニメ作り 動画ではなく実装するデータであることを大事にしています。 確認会 27
28. シーン制作 絵コンテ制作 Vコンテ制作 アニメーション制作 シーン制作 リソース制作 サウンド制作/調整 ここではunityのタイムライン上で各工程で制作した リソースをまとめてVコンに合わせたシーン制作を行っています。 また、この工程でエフェクトの制作なども行っています。 特に素材それぞれ色の発色や、雰囲気に合わせた撮影処理を入れるため 画面全体に対して「単色合成」「グラデーション合成」など 細かく重ねがけしてなじませています。 エフェクト制作では、 単発エフェクトとループエフェクトをつなげて再生し 「TAP待ち」で画が止まらないようにしています。 確認会 28
29. サウンド制作 絵コンテ制作 Vコンテ制作 アニメーション制作 シーン制作 リソース制作 サウンド制作/調整 社内のサウンドクリエイターと協力し、 シネマティックシーンで必要になる音の制作を行ってます。 Vコンの時点で基本的に精査できるのですが、 「シーン制作」工程で若干テンポやリズムの変化があった場合に 必要になる効果音であったり、「TAP待ち中」の音や TAPをして得られる体験には音も重要だと考えているので サウンドクリエイターに完成したシーンを確認してもらいながら 最終的なアレンジも行っています。 また、「シーン制作」の段階でもこだわっている点として 複数の音を重ねて音に厚みを持たせています。 連続して同じ音が再生されると違和感にもつながるので、 同系統で異なる音の体験ができるようにしています。 確認会 29
30. 確認会 絵コンテ制作 Vコンテ制作 アニメーション制作 シーン制作 リソース制作 サウンド制作/調整 確認会は主に下記３つを実施しております。 ・版元への確認会 ・ADV班の確認会 ・シネマ班の確認会 「版元への確認会」では、IP案件のため キャラの表現において齟齬がないかなどを主に確認しています。 「ADV班の確認会」では、ADV本編とシネマティックシーン導入への リズム感や導入前後のつながりを確認しています。 「シネマ班の確認会」では、上記確認会を終えてから 成果物に対してシネマ班全員が当事者意識を持ち 各位でフィードバックを出し合い、より良い表現や演出を 取り入れながらブラッシュアップを行い完成させていきます。 確認会 30
31. 魅力的なシーン作りの工夫とこだわり 31
32. こだわりポイント　１ キャラクターの表情の演技 SPINEによるアニメーション技術でよりなめらかで豊かな感情表現 32
33. こだわりポイント　2 カラーグレーディングによるポスプロ シーンそれぞれの雰囲気に合わせたポスプロを設定・適応し ＡＤＶ本編とシネマティックシーン共に臨場感を演出しています。 33
34. こだわりポイント　3 インタラクティブなADVの演出 今作で用いたシネマティックシーンは動画ではなく「TAP待ち」という仕様に合わせた インタラクティブなADV表現です。 「TAP待ち」の箇所も、最終的なADV体験を確認するために Vコンテやシーン制作工程で必ず「TAP待ち」の体験も確認しながら制作しております。 34
35. まとめ 35
36. ◆ 動画ではないインタラクティブで『ゲームライズされた』 　 新たなADV体験「シネマティックシーン」 ◆ リソースを最大限活用することでADVと親和性の高い表現が可能 ◆ ノウハウ蓄積と妥協しないこだわりによって完成した技術表現 まとめ 36
37. ご清聴ありがとうございました！ ©芥見下々／集英社・呪術廻戦製作委員会　©Sumzap, Inc.／TOHO CO., LTD. 37