『呪術廻戦 ファンパレ』Unityで高品質2Dアニメーションを実装。アニメライクなカットイン演出や、ADVに適したリアルタイム映像表現の制作フロー【サムザップテックナイトvol9】

『呪術廻戦 ファンパレ』Unityで高品質2Dアニメーションを実装。アニメライクなカットイン演出や、ADVに適したリアルタイム映像表現の制作フロー【サムザップテックナイトvol9】

2025.04.25
注目記事講演レポートUnity
この記事をシェア!
Twitter Facebook LINE B!
Twitter Facebook LINE B!

2025年2月26日(水)、サムザップが主催する「サムザップテックナイトvol9」が、Abema Towers セミナールーム10階で開催されました。

「サムザップテックナイト」は、テーマに合わせて専門性の高いゲストを招き、実務で活かせる生の情報を発信してゲーム業界の活性化を目的とする勉強会。

第9回となる今回は、サムザップのアニメーション統括 和田 雄介氏と、クリエイティブディレクター 中山 祐治氏が登壇し、「『呪術廻戦 ファントムパレード』に用いた表現技術とドラマティックな演出について」と題した講演が行われました。本記事ではその講演の模様をレポートします。

TEXT / じく
EDIT / 浜井 智史

目次

アニメライクでリッチなカットイン映像の制作フロー。After Effectsでイラストにアニメーションをつける

和田氏は『戦国炎舞-KIZNA-』の演出や『この素晴らしい世界に祝福を!ファンタスティックデイズ』のアニメーション制作などに携わったのち、現在はアニメーション統括として『呪術廻戦 ファントムパレード』を中心としたアニメーションのマネジメント・ディレクションを担当するほか、サムザップ社内のクリエイティブ表現の研究・開発スタジオ「S-vision studio」の責任者を兼任している

中山氏は複数のモバイルゲームタイトルにおいて立ち上げ期から参画し、UIデザイン・イラスト・アニメーションなど幅広い領域に携わってきた。現在は『呪術廻戦 ファントムパレード』でシネマティックシーン統括を務めている

講演では、サムザップが開発するスマートフォン向けゲーム『呪術廻戦 ファントムパレード』の制作事例を題材に、Adobe After Effects(以下、After Effects)による2Dアニメーションを用いた演出手法や、アドベンチャーシーン(以下、ADV)におけるリアルタイムなアニメーション表現について紹介されました。

講演冒頭では、和田氏から本作のバトルシーンにて挿入されるカットイン演出の制作フローが解説されました。本作では、カットイン演出などのアニメーションを動画ファイルで作成し、アセットとしてゲーム内に実装しているケースが多数あるとのこと。

『サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~』サムザップ登壇参考動画①

カットイン映像は、静止画にアニメーションを付与することで作成します。Vコンテをもとにイラストを描き起こし、After Effectsのパペットツール(※)で動かしています。
※ イラストの各部位にピンを刺してアニメーションを設定できる機能

After Effectsで動きを付けることを想定して、顔や手などのパーツを分割して作画する

After Effectsのパペットツールでイラストにピンを刺し、アニメーションさせる様子

アニメーション完成後、After Effects上で撮影処理を行い、AVIファイルで出力。フィールドに合わせた背景を表示させるため、アルファチャンネル付きで出力して透過情報を持たせます。その後、出力したAVIファイルをUnityにインポートし、タイムライン上で背景のカメラワークや色彩を調整します。

『サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~』サムザップ登壇参考動画②

複数の背景を切り替えながら、どの背景でも絵が成立するようにカメラワークを設定する

このカットイン映像の制作フローにおけるメリットとして、イラストを描き起こす段階でキャラクター設定や世界観を固められることや、少数精鋭での作業につき修正対応などの小回りが利きやすいことが挙げられました。

一方、最終的にUnity上でエフェクトをかけられない点や、担当者個人に必要なスキルセットが多い点、メンバーの替えが効かないゆえに増産が難しい点などがデメリットであると語られました。

After Effectsで作った動画ファイルと3Dモデルの街並みを重ね合わせた「ガチャ」演出映像

カットイン作成手法の応用として、ガチャ演出の制作フローが紹介されました。ガチャ演出の映像は、動画ファイルとして作成したアニメーションと3Dモデルによる背景を重ね合わせることで表現しています。

『サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~』サムザップ登壇参考動画③

製品版ではガチャ演出の背景が固定化されていますが、開発段階では背景を動かす可能性も視野に入れ、広域の3Dモデルを用意。軽量化のためライトベイクが施されています。

ガチャ演出の背景は渋谷の街並みを3Dモデル化したもの

演出用動画は、3Dプリビズ(※)をもとにAfter Effectsで作成します。
※ 「プリビズ」は「プリビジュアライゼーション」の略。映像制作に際して、完成形のイメージやシミュレーションなどの目的で作成する仮映像のこと

『サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~』サムザップ登壇参考動画④

『サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~』サムザップ登壇参考動画⑤

撮影処理はカットインと同様にAfter Effects上で実施。ガチャ演出は固定背景となることが決まったため、最終的には背景の色味に合わせた撮影処理がAfter Effectsで完結できるようになりました。

After Effectsで作成した動画と3DモデルをUnity上で統合させ、最後はPost Processing(※)処理を行うことで実際の映像が完成しています。
※ Unityでポストプロセスを行うためのパッケージ

『サムザップテックナイト アニメ監督とゲームクリエイターの演出表現術 ~ドラマティックな技法とは~』サムザップ登壇参考動画⑥

一連のフローについて和田氏は、アニメライクでリッチな映像を作成できたことや、2Dと3Dを組み合わせた演出を実現できたことなど感触を語りました。その反面、個々のスタッフが業務の合間を縫って作業したことにより完成まで時間がかかった点や、背景の3Dモデルを必要以上に作り込み過ぎた点を反省点として挙げていました。

また、当初はリアルタイムな3D表現を目指していたといいますが、カットが切り替わる際にキャラクターの表示にラグが生じたり、背景とキャラクターがズレたりと不具合が発生したため、動画として書き出してから実装する形に変更したと述べていました。

ADVの没入感を向上する、Spineを活用したリアルタイム2Dアニメーション「シネマティックシーン」

続いて中山氏より、ADVにおけるリアルタイムなアニメーション表現「シネマティックシーン」について紹介されました。本作のADVは主にLive2Dを用いた会話シーンで構成されており、TVアニメのシナリオになぞらえた「追体験」のほか、オリジナルストーリーも収録しています。

「追体験」においては、実際に放映されたアニメ映像の一部をADVに組み込むことで没入感や臨場感を生み出しています。対してオリジナルストーリーでは、存在しないTVアニメシーンに代わる映像表現としてシネマティックシーンを導入しています。

シネマティックシーンはタップして読み進めるADVの仕様と親和性が高く、2Dアニメーション制作ソフト「Spine」を用いたループアニメーションに適合した表現だと中山氏は説明。また、ゲーム内リソースを再利用することにより制作コストも削減できていたとのこと。

講演では、本作の1周年で実装されたストーリーイベントを例に、シネマティックシーン制作ワークフローが紹介されました。

絵コンテの作成

まずはシナリオのどこにシネマティックシーンを挿入するか決定し、描き起こしが必要なプロップやキャラクターを洗い出します。

それらの情報をもとに絵コンテを作成。アニメ作品における絵コンテとは異なり、ADVのタップで読み進める性質を考慮して「このシーンで止まっても大丈夫」「オートでもテンポ良く読める」といったインタラクティブな面を意識して描き進めます。

既存リソースの再利用や、最終的なカラースクリプト(各シーンの配色やライティングをイラストで示したもの)を視野に入れつつ絵コンテを作成する

Vコンテの作成

絵コンテをもとにAdobe Animateを用いてVコンテ(ビデオコンテ)を作成します。この際、タップで進行するインタラクティブな部分や、オート設定時のテンポ感を確認します。

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)など。

関連記事

VTuber・VRChat向け3Dキャラモデリング解説書『Blender+Unityで作る、動かす! 3Dキャラクター制作実践ガイド』、マイナビ出版が7/24(木)に発売
2025.07.23
Unityでノードエディタを作成できる公式パッケージ「Graph Toolkit」、実験的機能としてリリース。Unity 6.2 Beta/6.3 Alphaで利用可能
2025.07.19
「Unity 6.3 Alpha」リリース。Render Graphがデフォルトで有効化され、互換モードは近い将来削除される
2025.07.18
オーディオミドルウェア「Wwise 2025.1.0」ベータ版がリリース。オーディオファイル管理ツール「Media Pool」などが追加
2025.07.16
Unity 6のプロファイリング機能を解説した、Unity公式の電子書籍が無料公開。Unity 6.1で正式対応した「Project Auditor」なども紹介
2025.07.15
Unity 6のHDRPを活用した『Into the Dead: Our Darkest Days』開発事例、Unity公式ブログで解説。リアルな色彩表現とパフォーマンス向上を両立した手法を紹介
2025.07.11

注目記事ランキング

2025.07.23 - 2025.07.30
VIEW MORE

連載・特集ピックアップ

イベントカレンダー

VIEW MORE

今日の用語

ビヘイビアツリー(Behavior Tree)
ビヘイビアツリー AIの思考、行動をツリー状の構造図で定義したもの。およびそのシステム。挙動の優先順位や条件を定義していくことにより、複雑なAI挙動をシンプルに実現できる。
VIEW MORE

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