『呪術廻戦 ファントムパレード』2Dと3Dを融合させたバトルシーン表現事例 ～呪術廻戦らしいドラマチックなバトル体験を実現するために～【CAGC2024】

『呪術廻戦 ファントムパレード』でのゲームのコア体験となるバトルシーン。
キャラクターを2Dグラフィックで表現しつつ、背景やカメラワークに3D表現を導入することにより、アニメを動かしているようなドラマチックな体験を目指して作り上げてきました。
その中でも、クリエイティブ面での工夫や苦労した点など、制作事例をもとにご紹介いたします。

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

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

Transcript

1. 『呪術廻戦 ファントムパレード』 　2Dと3Dを融合させたバトルシーン表現事例 ～呪術廻戦らしいドラマチックなバトル体験を実現するために～ 呪術廻戦 ファントムパレード 和田 雄介 アニメーション統括 辻本 健太郎 アートディレクター 1
2. 登壇者紹介 2
3. 株式会社サムザップ アニメーション統括 和田 雄介 （わだ ゆうすけ） 2011 サムザップ 中途入社 『このすばらしき世界に祝福を！ ファンタスティックデイズ』、 『呪術廻戦 ファントムパレード』などに立ち上げから参画。 アニメ周りのディレクション、メンバーのマネージメントを担当。 3
4. 株式会社サムザップ アートディレクター 辻本 健太郎 （つじもと けんたろう） 2016 サムザップ 中途入社 『このすばらしき世界に祝福を！ ファンタスティックデイズ』、 『呪術廻戦 ファントムパレード』などに立ち上げから参画。 アート周りを中心に、クリエイティブ全般のディレクションを担当。 4
5. 『呪術廻戦 ファントムパレード』について 5
6. 6 『呪術廻戦 ファントムパレードは、 2018年より「週刊少年ジャンプ」 （集英社）にて連載中の 芥見下々（あくたみげげ）氏による 人気漫画を原作としたTVアニメ 『呪術廻戦』を元にした、作品初の スマートフォンゲームです。 TVアニメ『呪術廻戦』の第1期の物語を 追体験できるだけでなく、福岡を舞台にした 『ファンパレ』オリジナルの ストーリーが楽しめる コマンドバトルRPGとなっています。
7. 『ファンパレ』開発指針 7
8. 1.スマホゲーム史上最高峰の2Dグラフィックで 　キャラクターの魅力を表現 2.奥深さを感じるゲームシステムを 　ストレス無く楽しめる手触りで提供 3.ゲームならではの要素で今までにない 　『呪術廻戦』を体験できる 8
9. バトルのディレクションコンセプト 9
10. ◆2Dグラフィックのバトルで最高峰の表現 ◆原作、アニメファンに刺さるドラマチックな演出 ◆テンポの良さと演出の強弱による 　メリハリある飽きさせない手触り ◆細部まで作り込まれたリッチなゲーム体験 10
11. 本日のアジェンダ 11
12. 01　なぜバトルに2D表現を使用したのか 02　背景を3D表現にしたことによる表現の拡張性 03　コマンド選択画面で縮まるキャラとの距離感 04　ポストエフェクトによるアニメライクな絵作り 05　テンポの良いノンストレスなバトル演出 06　必殺スキルカットインでバトルの山場を演出 本日のアジェンダ 12
13. なぜバトルに2D表現を使用したのか 13
14. 社内に蓄積した2Dグラフィック技術(Spine、Live2D等)の知見 ・過去の開発タイトルにより蓄積した独自の技術知見とその応用 　⇒他タイトルにはない技術として強みになる 14
15. 2Dグラフィック表現による強み ・3D表現、2D表現それぞれのメリット 　3D：モデルやモーションの取り回しの良さ、 　　　 ダイナミックなカメラアングル 　2D：セルルックとの親和性、モデルの正確性にとらわれない自由な描画 　　　 (崩し、髪や細かいニュアンスの表情の描画等) 　　　⇒それぞれにメリデメはあり、 　　　　近年の技術では表現面での境界も薄まりつつある ・よりアニメを自分で動かしているような体感に ・キャラグラフィックを2D表現に統一することによる演出全体の一体感 15
16. キャラを2D表現に統一することによる効果 ・コマンド選択から必殺スキル、リザルトまで一貫した描画で表現できる ▲バトル ▲カードイラスト ▲コマンド選択 必殺スキルカットイン ▲ 16
17. 背景を3D表現にしたことによる 表現の拡張性 17
18. 3D背景 ・背景を3Dで作り込むことで画面全体をリッチに ・コストをかけて制作することで後述する様々な演出が可能に 18
19. バトル導入演出 ・立体的な表現により、バトル開始と同時に引き込まれるような 　臨場感のある演出を実現 ・ロケーションの補完、空間の広がり 19
20. バトル中の様々な演出① ・強度の強いスキル発動時や強敵出現時などに 　カメラの演出を加えることでメリハリを出す 20
21. バトル中の様々な演出② ・強度の強いスキル発動時や強敵出現時などに 　カメラの演出を加えることでメリハリを出す 21
22. 必殺技カットイン演出 (後ほど詳細) ・キャラのアクションに合わせたアングルで背景を表示可能 　⇒背景を気にせず一番見栄えの良いアクションを描画することができる ・セルアニメで行われている手法を実機上でリアルタイムで実現 22
23. コマンド選択画面で縮まる キャラとの距離感 23
24. キャラクターの見せ方 ・(好きな)キャラクターを大きく表示したい ・意思決定の際に、客観的な視点ではなくキャラに近い視点で 　操作することによる没入感 24
25. ・カットが切り替わることによるメリハリ ・敵と対峙しているという体感 画角の変化による効果 25
26. キャラのダメージ表現 ・ゲームへの没入感 ・TVアニメでのバトルのドラマチックさを追体験 26
27. ポストエフェクトによる アニメライクな絵作り 27
28. カスタムしたポスプロで表現するアニメライクなビジュアル ・アニメの雰囲気を再現 ・背景とキャラが馴染み、画面全体の統一感が出る 28
29. 落ち影の表現 ・リアリティを上げるために丸陰ではなく落ち影を実装 ・背景のライティングに沿った描画でより自然な印象に 29
30. テンポの良いノンストレスなバトル演出 30
31. ユーザーが退屈しない工夫 ・繰り返し見る行動パターンはスピード感を感じられるように工夫 ・戦闘中によく使用する低コストのスキルは、 　終了を待たずに次のキャラクターの行動が始まる仕様に 31
32. 廻想残滓演出 ・想いの力がキャラクターを強化する「廻想残滓」システム ・演出の一部となるように表現し、バトルのテンポを崩さずに 　ドラマチックさを向上 32
33. 必殺スキルカットインでバトルの山場を演出 33
34. 2Dイラストと3D背景を組み合わせることによる表現 ・見栄えの良い画角でキャラ作画することができる 　⇒背景側でロケーション、カメラの画角等を合わせられる ・セルルック(作画)でのキャラクターアニメーション表現ができる 34
35. 領域展開の表現 ・呪術廻戦における最大の見どころの一つである領域展開 ・キャラごとにワンオフで演出を制作 35
36. ワークフローの紹介 ・Vコンテにてレイアウトや尺感を厳密に詰める Vコン制作 作画指示書 作画 ラフ、清書 アニメーション 制作 カメラワーク 実装 36
37. ワークフローの紹介 ・イラスト班へ依頼するための作画の指示書を制作 Vコン制作 作画指示書 作画 ラフ、清書 アニメーション 制作 カメラワーク 実装 37
38. ワークフローの紹介 ・絵コンテ、Vコンを元にイラスト班にて作画部分を制作。 ・アニメーションに必要なパーツ分けも行う。 Vコン制作 作画指示書 作画 ラフ、清書 アニメーション 制作 カメラワーク 実装 38
39. ワークフローの紹介 ・AfterEffectsでアニメーション／エフェクトまで完了させUnityで実装 Vコン制作 作画指示書 作画 ラフ、清書 アニメーション 制作 カメラワーク 実装 39
40. ワークフローの紹介 ・背景と合成する演出はUnityエディタ上で背景モデルカメラワークをつける 　背景のトーンも調整し動画と背景を馴染ませる Vコン制作 作画指示書 作画 ラフ、清書 アニメーション 制作 カメラワーク 実装 40
41. 連携必殺演出 ・呪術廻戦らしいキャラ同士の連携を再現 ・あらゆる組み合わせで連携可能なように制作、 　特定のキャラの組み合わせでユニークな掛け合いが発生 41
42. まとめ 42
43. ◆技術的な強みを活かす ◆2Dと3Dを組み合わせることにより、双方の利点を得る ◆繰り返し見る演出はテンポ良く ◆必殺スキルで最大の山場を作る ◆原作再現を全力でやる まとめ 43
44. ご清聴ありがとうございました！ ©芥見下々／集英社・呪術廻戦製作委員会　©Sumzap, Inc.／TOHO CO., LTD. 44