アニメライクでリッチなカットイン映像の制作フロー。After Effectsでイラストにアニメーションをつける
和田氏は『戦国炎舞-KIZNA-』の演出や『この素晴らしい世界に祝福を!ファンタスティックデイズ』のアニメーション制作などに携わったのち、現在はアニメーション統括として『呪術廻戦 ファントムパレード』を中心としたアニメーションのマネジメント・ディレクションを担当するほか、サムザップ社内のクリエイティブ表現の研究・開発スタジオ「S-vision studio」の責任者を兼任している
中山氏は複数のモバイルゲームタイトルにおいて立ち上げ期から参画し、UIデザイン・イラスト・アニメーションなど幅広い領域に携わってきた。現在は『呪術廻戦 ファントムパレード』でシネマティックシーン統括を務めている
講演では、サムザップが開発するスマートフォン向けゲーム『呪術廻戦 ファントムパレード 』の制作事例を題材に、Adobe After Effects(以下、After Effects)による2Dアニメーションを用いた演出手法や、アドベンチャーシーン(以下、ADV)におけるリアルタイムなアニメーション表現について紹介されました。
講演冒頭では、和田氏から本作のバトルシーンにて挿入されるカットイン演出の制作フローが解説されました。本作では、カットイン演出などのアニメーションを動画ファイルで作成し、アセットとしてゲーム内に実装しているケースが多数あるとのこと。
VIDEO
『サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~』サムザップ登壇参考動画①
カットイン映像は、静止画にアニメーションを付与することで作成します。Vコンテをもとにイラストを描き起こし、After Effectsのパペットツール(※)で動かしています。
※ イラストの各部位にピンを刺してアニメーションを設定できる機能
After Effectsで動きを付けることを想定して、顔や手などのパーツを分割して作画する
After Effectsのパペットツールでイラストにピンを刺し、アニメーションさせる様子
アニメーション完成後、After Effects上で撮影処理を行い、AVIファイルで出力。フィールドに合わせた背景を表示させるため、アルファチャンネル付きで出力して透過情報を持たせます。その後、出力したAVIファイルをUnityにインポートし、タイムライン上で背景のカメラワークや色彩を調整します。
VIDEO
『サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~』サムザップ登壇参考動画②
複数の背景を切り替えながら、どの背景でも絵が成立するようにカメラワークを設定する
このカットイン映像の制作フローにおけるメリットとして、イラストを描き起こす段階でキャラクター設定や世界観を固められることや、少数精鋭での作業につき修正対応などの小回りが利きやすいことが挙げられました。
一方、最終的にUnity上でエフェクトをかけられない点や、担当者個人に必要なスキルセットが多い点、メンバーの替えが効かないゆえに増産が難しい点などがデメリットであると語られました。
After Effectsで作った動画ファイルと3Dモデルの街並みを重ね合わせた「ガチャ」演出映像
カットイン作成手法の応用として、ガチャ演出の制作フローが紹介されました。ガチャ演出の映像は、動画ファイルとして作成したアニメーションと3Dモデルによる背景を重ね合わせることで表現しています。
VIDEO
『サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~』サムザップ登壇参考動画③
製品版ではガチャ演出の背景が固定化されていますが、開発段階では背景を動かす可能性も視野に入れ、広域の3Dモデルを用意。軽量化のためライトベイクが施されています。
ガチャ演出の背景は渋谷の街並みを3Dモデル化したもの
演出用動画は、3Dプリビズ(※)をもとにAfter Effectsで作成します。
※ 「プリビズ」は「プリビジュアライゼーション」の略。映像制作に際して、完成形のイメージやシミュレーションなどの目的で作成する仮映像のこと
VIDEO
『サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~』サムザップ登壇参考動画④
VIDEO
『サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~』サムザップ登壇参考動画⑤
撮影処理はカットインと同様にAfter Effects上で実施。ガチャ演出は固定背景となることが決まったため、最終的には背景の色味に合わせた撮影処理がAfter Effectsで完結できるようになりました。
After Effectsで作成した動画と3DモデルをUnity上で統合させ、最後はPost Processing(※)処理を行うことで実際の映像が完成しています。
※ Unityでポストプロセスを行うためのパッケージ
VIDEO
『サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~』サムザップ登壇参考動画⑥
一連のフローについて和田氏は、アニメライクでリッチな映像を作成できたことや、2Dと3Dを組み合わせた演出を実現できたことなど感触を語りました。その反面、個々のスタッフが業務の合間を縫って作業したことにより完成まで時間がかかった点や、背景の3Dモデルを必要以上に作り込み過ぎた点を反省点として挙げていました。
また、当初はリアルタイムな3D表現を目指していたといいますが、カットが切り替わる際にキャラクターの表示にラグが生じたり、背景とキャラクターがズレたりと不具合が発生したため、動画として書き出してから実装する形に変更したと述べていました。
ADVの没入感を向上する、Spineを活用したリアルタイム2Dアニメーション「シネマティックシーン」
続いて中山氏より、ADVにおけるリアルタイムなアニメーション表現「シネマティックシーン」について紹介されました。本作のADVは主にLive2Dを用いた会話シーンで構成されており、TVアニメのシナリオになぞらえた「追体験」のほか、オリジナルストーリーも収録しています。
「追体験」においては、実際に放映されたアニメ映像の一部をADVに組み込むことで没入感や臨場感を生み出しています。対してオリジナルストーリーでは、存在しないTVアニメシーンに代わる映像表現としてシネマティックシーンを導入しています。
シネマティックシーンはタップして読み進めるADVの仕様と親和性が高く、2Dアニメーション制作ソフト「Spine 」を用いたループアニメーションに適合した表現だと中山氏は説明。また、ゲーム内リソースを再利用することにより制作コストも削減できていたとのこと。
講演では、本作の1周年で実装されたストーリーイベントを例に、シネマティックシーン制作ワークフローが紹介されました。
絵コンテの作成 まずはシナリオのどこにシネマティックシーンを挿入するか決定し、描き起こしが必要なプロップやキャラクターを洗い出します。
それらの情報をもとに絵コンテを作成。アニメ作品における絵コンテとは異なり、ADVのタップで読み進める性質を考慮して「このシーンで止まっても大丈夫」「オートでもテンポ良く読める」といったインタラクティブな面を意識して描き進めます。
既存リソースの再利用や、最終的なカラースクリプト(各シーンの配色やライティングをイラストで示したもの)を視野に入れつつ絵コンテを作成する
Vコンテの作成 絵コンテをもとにAdobe Animateを用いてVコンテ(ビデオコンテ)を作成します。この際、タップで進行するインタラクティブな部分や、オート設定時のテンポ感を確認します。
キャラクターイラストの作成 ここまでに作成した絵コンテ・Vコンテを参考に、シネマティックシーンに必要なキャラクターイラストをパーツごとに分割して作成します。アニメーションにはSpineを用いるため、Spine上で操作しやすい適切な形状にすることを重視します。
ネクタイを例に挙げると、イラストの時点で風になびかせた状態にするとSpineで動かしにくいので、扱いやすい形状で描くようにする
Spineでイラストにアニメーションを付与 その後は実際にSpineを用いてアニメーションを制作。アニメーションを作る際は、アニメでいうところの中割り(原画と原画の間を補う絵)を軽減する動きをつけたり、より滑らかな動きに調整したりと工夫を施しています。
素材からシーンを作り上げる&撮影処理 できあがった素材をVコンテをもとに組み上げ、カットごとにシネマティックシーンを作成します。また、この段階で撮影処理も行います。シネマティックシーンは会話劇の間に挟まれることが多いので、シーンの前後における色味のバランスも加味して調整を進めます。
完成したシネマティックシーンは、ADVパートと比較した違和感やデザインの統一感などを確認し、サウンドやリズム感などを調整します。その後、QAを含めて各所からOKが出れば実装に至ります。
こうしたシネマティックシーンによるリアルタイムなアニメーション表現は、ユーザーからも高い評価を得られたといいます。また、スムーズな修正対応やコストカット・容量削減が可能であったほか、Unityでのアニメーション制作における成功事例となったことがメリットとして挙げられました。
一方、After Effectsによるカットイン制作事例と同じく個々に求められるスキルセットが高く、スタッフの替えが効きづらい点や、リソースを再利用できない新キャラクターのシーン作成コストが高くなる点、長い制作期間を必要とすることから約1年前からスケジュールを組まなくてはならない点がデメリットだと語られました。
講演後は勉強会前半に登壇したスタジオクロマトの山下氏を交えてパネルディスカッションが実施されました。和やかな雰囲気の中で、シネマティックシーンを対象とした改善点の検討などについて語られました。
講演内で放映された動画は「これがスマートフォン上で動くソーシャルゲームの映像なのか」と驚くほどのクオリティで、そのハイレベルな映像を実現する表現手法が惜しみなく紹介された有意義な講演となりました。
©芥見下々/集英社・呪術廻戦製作委員会 ©Sumzap, Inc./TOHO CO., LTD.
「サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~」connpass 『呪術廻戦 ファントムパレード』公式サイト
ゲーム会社で16年間、マニュアル・コピー・シナリオとライター職を続けて現在フリーライターとして活動中。 ゲーム以外ではパチスロ・アニメ・麻雀などが好きで、パチスロでは他媒体でも記事を執筆しています。 SEO検定1級(全日本SEO協会)、日本語検定 準1級&2級(日本語検定委員会)、DTPエキスパート・マイスター(JAGAT)など。