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

Slide 1

Slide 1 text

『呪術廻戦ファントムパレード』ゲームライズしたADV表現～「シネマティックシーン」制作のこだわりと実現への道のり～アートディレクター / 呪術廻戦ファントムパレード中山祐治　Nakayama Yuji 1

Slide 2

Slide 2 text

自己紹介 2

Slide 3

Slide 3 text

自己紹介 ❖ 中山祐治　Nakayama Yuji 株式会社サムザップ　アートディレクター 2020年サムザップ入社。デザイナー、イラストレーターを経てアートディレクターを努めています。『ロンドン迷宮譚』のリリースや『呪術廻戦ファントムパレード』などに立ち上げから参画。クリエイティブ全般の技術向上やディレクションを担当。 3

Slide 4

Slide 4 text

『呪術廻戦ファントムパレード』について 4

Slide 5

Slide 5 text

5 『呪術廻戦ファントムパレードは、 2018年より「週刊少年ジャンプ」（集英社）にて連載中の芥見下々（あくたみげげ）氏による人気漫画を原作としたTVアニメ『呪術廻戦』を元にした、作品初のスマートフォンゲームです。 TVアニメ『呪術廻戦』の第1期の物語を追体験できるだけでなく、福岡を舞台にした『ファンパレ』オリジナルのストーリーが楽しめるコマンドバトルRPGとなっています。

Slide 6

Slide 6 text

『ファンパレ』開発指針 6

Slide 7

Slide 7 text

1.スマホゲーム史上最高峰の2Dグラフィックで　キャラクターの魅力を表現 2.奥深さを感じるゲームシステムを　ストレス無く楽しめる手触りで提供 3.ゲームならではの要素で今までにない　『呪術廻戦』を体験できる 7

Slide 8

Slide 8 text

本日のアジェンダ 8

Slide 9

Slide 9 text

本日のアジェンダ 1. シネマティックシーン制作の経緯 2. シネマティックシーンの課題とその解決 3. 制作フローの紹介 4. 魅力的なシーン作りの工夫とこだわり 5. まとめ 9

Slide 10

Slide 10 text

シネマティックシーンの制作経緯 10

Slide 11

Slide 11 text

今作におけるストーリーパートは大きく２部構成今作においてストーリーパート（※以下ADVとします）は・「アニメを元にした追体験のストーリー」・「ゲームオリジナルストーリー(福岡分校編)」の２つに分かれています。前者の「アニメを元にした追体験のストーリー」はアニメ１期のアニメーションを導入し、呪術廻戦を知っているユーザー様から馴染みやすく没入しやい展開になっているのに対し、「ゲームオリジナルストーリー(福岡分校編)」はアニメーションがなくスチルイラストやADVでのこだわり抜いた演出はあるものの今作をプレイするユーザー様にとってもADVの体験として物足りなさや没入感が弱いと考えておりました。 11

Slide 12

Slide 12 text

臨場感のあるADV表現の模索そこで検討したのが「ゲームオリジナルストーリー(福岡分校編)」にもアニメーション表現を追加することでした。ただ、同じようにアニメを作ることではなくよりゲームの流れとしてアニメーションを魅せられるADV体験はないかと模索した結果生まれたのが「シネマティックシーン」です。「シネマティックシーン」の特徴・ADVを進めていく上でTAP待ちにも対応した動画ではない映像表現・ゲーム内イラストやLive2Dのテイストに合わせた親和性の高い表現・少ないリソースでクオリティー高くシーン制作ができる・サムザップだからこそのSPINEを使った２Dアニメーション 12

Slide 13

Slide 13 text

シネマティックシーンの構想　１ Live2Dの表現やスチルイラスト導入だけでは演出が難しい呪術廻戦の醍醐味である臨場感のあるバトルや、ドラマティックなキャラクター同士の掛け合いや雰囲気をADVの仕様に落とし込んで表現するにはと、まず考えたのが絵コンテを作って演出と画作りをしてみるという事でした。 13

Slide 14

Slide 14 text

シネマティックシーンの構想　２当初はLive2Dや立ち絵としてある既存素材でできる範囲の絵コンテで考えていましたが、やはりそれだけでは、呪術廻戦の迫力ある演出やドラマティックな表現を表現することが難しかったので、シーンによっては作画を制作しSPINEの技術をプラスしてみました。その過程でこの「SPINEの技術」は、「TAPで進める」というADVの仕様において SPINE特有の待機モーションや１枚絵を動かす表現は相性がよかったのと、 Unityでシーン制作する上で扱いやすいという利点もありました。 14

Slide 15

Slide 15 text

シネマティックシーンの構想　３表現の方向性が定まり、Vコンの制作へ。最初の構想で完成したのがこちらの動画になります。 15

Slide 16

Slide 16 text

シネマティックシーンの構想　４表現を実現するために用いたのがUnityのCinemachineによるリアルタイムでのタイムライン制作機能とまたSpineの採用です。上記２つの採用とゲーム(ADV)での「TAP待ち」の仕様をインタラクティブに考え構築した表現方法を、弊社では「シネマティックシーン」と呼び、新たなADV体験と表現の一つにできたと考えております。 16

Slide 17

Slide 17 text

シネマティックシーンの課題とその解決 17

Slide 18

Slide 18 text

シネマティックシーンの課題とその解決実現する方法が見えてきた中で浮上した課題がいくつかありました。その中でも大変だった下記課題を３つ紹介します。・「Unityの表現をAEでの表現に近いものを目指す」・「リソース数が毎話ごとに肥大化しコストがかかる」・「クオリティー維持ができるチーム体制」 18

Slide 19

Slide 19 text

シネマティックシーンの課題とその解決表現の構想土台(UnityのCinemachineとSpineの採用)はできたが、土台構築の着地点として「Unityの表現をAEでの表現に近いものを目指す」という課題解決が必要となりました。「AEでできることをUnityでできるようにする」シンプルな解決方法だが、結果的にこれ着地点になると考えエンジニアと協力し追加機能開発をしていただき、 AEまでとはいかないが、AEでできる表現が可能になり主にタイムラインやポスプロ周りの機能・表現の幅が格段にあがりました。 19

Slide 20

Slide 20 text

シネマティックシーンの課題とその解決リソース管理面でも課題がありました。シネマティックシーンは１話概ね10～20カットほどで構成されており、カットに応じて毎回新規制作するとリソース数も肥大化する課題。「過去に制作したリソースを差分という形で流用」これらを解決するために、コンテ制作の後各リソースを発注する資料制作時に過去に制作したリソースを一覧で確認できるシートを制作し、同じモデルで演出時流用することでした。そのままの場合もありますが、シーンによってモーション(演技)を変えたり、作画に差分を制作し、同じ素材のように見えないようにする工夫をしています。 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

制作フローに関して 22

Slide 23

Slide 23 text

制作フローに関して絵コンテ制作 Vコンテ制作アニメーション制作シーン制作リソース制作サウンド制作/調整シネマティックシーンは主に右図のような７つの工程で制作しています。このセクションでは各工程のご紹介をさせていただきます。確認会 23

Slide 24

Slide 24 text

絵コンテ制作絵コンテ制作 Vコンテ制作アニメーション制作シーン制作リソース制作サウンド制作/調整まずは絵コンテ制作です。シナリオ班が選定した「シネマティックシーン」を導入する箇所を確認し、予め必要な情報をシナリオ班やＡＤＶチームと確認してから絵コンテを着手し始めます。コンテ制作時に、シナリオ班と密にコミュニケーションを行い、出来上がったシナリオから「コンテを作る」のではなく「コンテを作りながらシナリオもブラッシュアップ」しています。演出をつけることでセリフの言い回しや内容など、映像になって違うという差異をなくし良い演出を作るため、シネマ班とシナリオ班とで連携しこだわって制作しています。確認会 24

Slide 25

Slide 25 text

Ｖコンテ制作絵コンテ制作 Vコンテ制作アニメーション制作シーン制作リソース制作サウンド制作/調整Ｖコンテ制作です。ここでは完成した絵コンテを「Animate」というシーン制作ツールで制作してまいります。制作する「シネマティックシーン」１本の流れの確認とその中で利用するリソース（作画や背景、エフェクトやサウンドなど）も洗い出していきます。 ※この工程で「Animate」というツールを用いているのにはいくつか利点があり、シーンごとに制作できることや各リソースが扱いやすい点はもちろん、前記でお伝えした「TAP待ち」の状態を再現できるという点が制作・確認する上で便利です。確認会 25

Slide 26

Slide 26 text

リソース制作絵コンテ制作 Vコンテ制作アニメーション制作シーン制作リソース制作サウンド制作/調整 Vコンテが完成し、作るリソースが確定したら各セクションに制作依頼を出していきます。この段階では主に「作画」「背景」から先行して着手していきます。 Vコンテで演出や動きを確認しながら、線の太さや陰影の濃さ、デッサンの取り方など細かい調整をしております。次の工程でモーション制作を行うので細かいパーツ分けなどもこの段階でアニメーション制作班と確認しながら行っています。確認会 26

Slide 27

Slide 27 text

アニメーション制作絵コンテ制作 Vコンテ制作アニメーション制作シーン制作リソース制作サウンド制作/調整ここは主に「リソース制作」の工程で制作した「キャラクター作画」にSPINEというツールでモーションをつけていきます。特にボイスに合わせた専用演技をするので状況や立ち位置、セリフ、呼吸も拾ってフェイシャルの演技にこだわっています。また、各シーン前後のリズム感を意識したアニメ作り動画ではなく実装するデータであることを大事にしています。確認会 27

Slide 28

Slide 28 text

シーン制作絵コンテ制作 Vコンテ制作アニメーション制作シーン制作リソース制作サウンド制作/調整ここではunityのタイムライン上で各工程で制作したリソースをまとめてVコンに合わせたシーン制作を行っています。また、この工程でエフェクトの制作なども行っています。特に素材それぞれ色の発色や、雰囲気に合わせた撮影処理を入れるため画面全体に対して「単色合成」「グラデーション合成」など細かく重ねがけしてなじませています。エフェクト制作では、単発エフェクトとループエフェクトをつなげて再生し「TAP待ち」で画が止まらないようにしています。確認会 28

Slide 29

Slide 29 text

サウンド制作絵コンテ制作 Vコンテ制作アニメーション制作シーン制作リソース制作サウンド制作/調整社内のサウンドクリエイターと協力し、シネマティックシーンで必要になる音の制作を行ってます。 Vコンの時点で基本的に精査できるのですが、「シーン制作」工程で若干テンポやリズムの変化があった場合に必要になる効果音であったり、「TAP待ち中」の音や TAPをして得られる体験には音も重要だと考えているのでサウンドクリエイターに完成したシーンを確認してもらいながら最終的なアレンジも行っています。また、「シーン制作」の段階でもこだわっている点として複数の音を重ねて音に厚みを持たせています。連続して同じ音が再生されると違和感にもつながるので、同系統で異なる音の体験ができるようにしています。確認会 29

Slide 30

Slide 30 text

確認会絵コンテ制作 Vコンテ制作アニメーション制作シーン制作リソース制作サウンド制作/調整確認会は主に下記３つを実施しております。・版元への確認会・ADV班の確認会・シネマ班の確認会「版元への確認会」では、IP案件のためキャラの表現において齟齬がないかなどを主に確認しています。「ADV班の確認会」では、ADV本編とシネマティックシーン導入へのリズム感や導入前後のつながりを確認しています。「シネマ班の確認会」では、上記確認会を終えてから成果物に対してシネマ班全員が当事者意識を持ち各位でフィードバックを出し合い、より良い表現や演出を取り入れながらブラッシュアップを行い完成させていきます。確認会 30

Slide 31

Slide 31 text

魅力的なシーン作りの工夫とこだわり 31

Slide 32

Slide 32 text

こだわりポイント　１キャラクターの表情の演技 SPINEによるアニメーション技術でよりなめらかで豊かな感情表現 32

Slide 33

Slide 33 text

こだわりポイント　2 カラーグレーディングによるポスプロシーンそれぞれの雰囲気に合わせたポスプロを設定・適応しＡＤＶ本編とシネマティックシーン共に臨場感を演出しています。 33

Slide 34

Slide 34 text

こだわりポイント　3 インタラクティブなADVの演出今作で用いたシネマティックシーンは動画ではなく「TAP待ち」という仕様に合わせたインタラクティブなADV表現です。「TAP待ち」の箇所も、最終的なADV体験を確認するために Vコンテやシーン制作工程で必ず「TAP待ち」の体験も確認しながら制作しております。 34

Slide 35

Slide 35 text

まとめ 35

Slide 36

Slide 36 text

◆ 動画ではないインタラクティブで『ゲームライズされた』　新たなADV体験「シネマティックシーン」 ◆ リソースを最大限活用することでADVと親和性の高い表現が可能 ◆ ノウハウ蓄積と妥協しないこだわりによって完成した技術表現まとめ 36