パッケージ
呪術廻戦 ファントムパレード公式サイトへ
  • サムザップ
  • 発売日:2023/11/21
  • 価格:基本プレイ無料+アイテム課金
レビューを書く
準備中
お気に入りタイトル/ワード

タイトル/ワード名(記事数)

最近記事を読んだタイトル/ワード

タイトル/ワード名(記事数)

LINEで4Gamerアカウントを登録
「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート
特集記事一覧
注目のレビュー
注目のムービー

メディアパートナー

印刷2024/03/14 12:09

イベント

「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 サイバーエージェントは2024年3月7日,ゲーム・エンターテイメント事業部の技術やノウハウを紹介する開発者向けカンファレンス「CyberAgent Game Conference 2024」を開催した。本稿では,サムザップにてアニメーション統括を務める和田雄介氏と,アートディレクターの辻本健太郎氏によるセッション「『呪術廻戦 ファントムパレード』 2Dと3Dを融合させたバトルシーン表現事例 〜呪術廻戦らしいドラマチックなバトル体験を実現するために〜」をレポートする。

画像集 No.001のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 セッションの冒頭では,「呪術廻戦 ファントムパレード」iOS / Android)開発チーム全体で定めた指針が以下のように紹介された。

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

 さらにそれらの指針を実現するため,バトルの制作にあたって定めたディレクションのコンセプトは,以下のとおりとなっている。

・2Dグラフィックのバトルで最高峰の表現
・原作,アニメファンに刺さるドラマチックな演出
・テンポの良さと演出の強弱による,メリハリある飽きさせない手触り
・細部まで作り込まれたリッチなゲーム体験

 本作のバトルには2D表現が用いられているが,その理由として,過去のタイトル開発により,社内に蓄積したSPINEやLive2Dといった2Dグラフィックス技術の知見があった点が挙げられた。それらの応用により,ほかのタイトルではまだ行われていないような技術を,本作の強みとして発揮できると考えたという。

画像集 No.002のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 とくに等身の高いキャラクターは,2D表現においてキャラクターモーションの難度が高く,アニメーターの高いスキルが求められるとのこと。イラストチームとアニメチームの厳密な連携が必要となるため,社内に技術があったことにより可能になった表現だったそうだ。また,これらの技術はバトルだけでなく,本作のクリエイティブ全体で生かされている。

 バトルの表現として,キャラクターを2Dと3Dのどちらのグラフィックスで表現するかという選択では,それぞれにメリット・デメリットがあるという。
 3Dのメリットとしては,モデルやモーションの取り回しがよく,ダイナミックなカメラアングルが可能という点を挙げている。
 一方,2Dのメリットとしては,セルルックとの親和性の高さ,崩しや髪の毛などとか細かいニュアンスや表情の描画など,モデルの正確性にとらわれない自由な描画が挙げられた。

 とはいえ近年では,例えばセルルックにかなり近い3D表現や,2Dを立体的に見せるようなメッシュアニメーションなどの技術が発達しており,表現面における境界は薄まりつつあることも示された。

 そんな中,前述した社内の技術面での強みに加えて,よりアニメを動かしているような体感に近づけられるという点や,キャラクターのグラフィックスを2Dに統一することにより,没入感がより一層高まるという点において,技術改善との相性がよいと考え,本作のバトルは2Dグラフィックス表現に特化したそうだ。

画像集 No.003のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 本作のバトルシーンの背景には,3Dグラフィックスを採用している。その理由は,3DCGによって画面に奥行きが生まれることで,2Dでは出せないリッチな印象になることを狙ったという。開発初期はキャラクターが2Dということもあり,背景も擬似3D的な2Dで表現したが,アニメの臨場感を表現するためには物足りなさを感じたため,3Dですべての背景を作り直した。テクスチャをセルアニメ調に書き込み,作り込むことによって,さまざまな演出が可能になったとのこと。

画像集 No.004のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 また本作では,すべてのステージにおいてバトル開始時にドローンカメラで撮影したようなカットを挿入しているが,これは臨場感を演出し,プレイヤーを一気にバトルの世界に引き込むための仕掛けである。さらに,フィールドがどういった場所なのかというロケーションを補完するとともに,バトルフィールド外の空間を見せることによって,開かれた世界であるような印象を与えることを狙っている。

画像集 No.005のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 これらのカットは,ロケーションに合った演出を1つひとつ考えて制作しているそうだ。いずれも3秒程度の短い尺であり,制作には少なくないコストがかかっている。コストパフォーマンス面で釣り合いが取れないと思われがちだが,この演出があるかないかでバトルの印象が大きく変わるという。

 背景を3Dにした恩恵も紹介され,まずキャラクターのスキルの発動時に,多種多様なカメラワークをつけることが可能になったことが挙げられた。本作では,アニメ同様のドラマチックなバトルを再現するために,ロングショットだけでは表現できない,キャラクターの心情にグッと入り込むような演出が必要だと考えたとのこと。

画像集 No.006のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 例えばボス出現の演出は,カメラワークを駆使して迫力を出したことが示された。このように,さまざまなカメラワークを入れたことにより,メリハリがつきオートプレイを見ているだけでも楽しさを感じられる表現ができたと捉えているそうだ。

画像集 No.007のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 そうしたカメラワークが最も生きたのは,必殺技の演出である。キャラクターのアクションに合わせて,さまざまなアングルの背景を表示できるため,アニメのような演出を実現できたという。加えて,どの背景もその空間に実在するように演出できるため,バトルへの没入感の向上につながっていることや,キャラクターと背景を別のものに変えて表示できることも示された。

画像集 No.008のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 本作のバトルはコマンド制だが,コマンド選択画面はキャラとの距離感を意識したという。まず,キャラクターが人気のコンテンツなので,キャラクターをしっかりと大きく表示し,細かい表情や息遣いを見せたいという発想から,キャラクターに近い画角の画面を用意した。またこの画角には,プレイヤーとしてコマンドの意志決定をする際に,キャラクターに近い視点で操作することにより,バトルに没入しやすくなるメリットもあるそうだ。

画像集 No.009のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 そうしたコマンド選択画面から,客観的な側面視点となるコマンド実行画面へとカットが切り替わることにより,バトルにメリハリが出ることも示された。ゲーム的には,バトル中に敵味方全体の情報を表示する画面が必要となるので,うまく役割を切り分けられているという。

細かいこだわりとして,キャラクターへのダメージが蓄積すると,顔に傷がつくなどのダメージ表現がなされることも示された
画像集 No.010のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート
画像集 No.011のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 アニメライクな絵作りのためのポストエフェクトについても言及された。本作において,アニメの雰囲気を表現することと,3Dと2Dを1つの画面に馴染ませることは,重要な課題だったとのこと。したがってバトルの絵作りにおいても,アニメ本編の撮影処理を研究したところ,主線の滲み表現や自然なブルーム表現など,Unityのデフォルトでは不可能な表現も多かったという。そのため足りない表現については,クライアントエンジニアに相談し,新たに制作してもらったそうだ。

画像集 No.012のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 その結果,2Dのキャラクターと3Dの背景が馴染み,絵としての一体感が成立するとともに,アニメの空気感に近づけることが可能となったという。またポストエフェクトは,ステージごとにアニメの印象に近づくように調整しているとのこと。スマートフォンの小さい画面でプレイすることが前提となっているため,ゲームとしての視認のしやすさと,“呪術廻戦らしさ”の両立を狙ったという。

 本作では,2Dで表現されるキャラクターの存在に説得力を持たせるため,2Dゲームにて一般的に用いられる丸影ではなく,そのキャラクターのシルエットの落ち影を使っていることも紹介された。影の向きを背景の光源の方向に合わせるなど,リアリティの向上に努めたそうだ。

画像集 No.013のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 また,毎日プレイしてもらうことを目指しているため,繰り返し遊んでも苦にならないよう「テンポのよいバトル」を目指したとのこと。具体的には,バトル中に繰り返し見ることになるコストの低いスキルを発動する場合,前のキャラクターの行動終了を待たずに,後続のキャラクターの行動が始まるように調整し,アニメのスピード感を表現している。ほかにも,単なるパンチやキックであっても,キャラクターが入れ替わり立ち替わり繰り出すことでハイスピードな印象を与えられるという。これらにより,待たされるストレスが極力排除され,繰り返しプレイしやすいバトルが実現されている。

画像集 No.014のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 本作は,「廻想残滓」を装備することでキャラクターを強化できる。廻想残滓のコンセプトは「想いの力がキャラクターを強化する」で,バトル中に任意のスキルおよび,必殺技にて効果を発動できる。廻想残滓の演出は,ほかの行動演出の合間に馴染むようにして,バトルのテンポを崩さないようにするとともに,ドラマチックさを向上していることも示された。

画像集 No.015のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 本作のバトルで最大の見せ場となるのが,必殺技のカットイン演出である。前述のとおり,本作ではキャラクターを2D,背景は3Dで表現しているため,キャラクター部分はアニメのようなセルルックの描画を実現しつつ,2Dではやや難度の高い自由な画角でアクションを取れることが強みとなっている。

画像集 No.016のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 必殺技を表現するにあたっては,キャラクターのフェティッシュな部分をしっかりと切り取ることや,アニメと同じ技であっても新鮮な印象が感じられるように,レイアウトを工夫したことが挙げられた。

 また,必殺技の中でも最大の見どころとなる「領域展開」では,アニメの表現のように,背景を上書きして領域を展開していく過程をリアルタイムで描画していることも紹介された。キャラクターごとに領域のビジュアルや性質が異なるため,すべてワンオフで制作しているとのこと。

画像集 No.017のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 バトル中の表現は,イラスト班とアニメーション班が密に連携して制作したという。そのワークフローの例として,必殺技カットインアニメーションの工程が紹介された。

 カットインアニメーションは,3秒という尺の中でキャラクターの魅力を凝縮することが必須となるため,時間の感覚を含めた体感で演出の気持ちよさを確認できるよう,絵コンテは起こさず,最初からビデオコンテを作ったそうだ。

画像集 No.018のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 次に,作画を行うイラスト班に出す指示書を作る。最終的にAfter Effectsにてアニメーションを実装するため,キャラクターのパーツ分けなどもここで指定する。演出をアニメーター,作画をイラストレーターといったように分業することで,1枚1枚のカットのクオリティを高く保つことができるという。また,双方のチーム間でデータ的な要件や,表現のクオリティラインに共通認識を持っているからこそ実現できるフローであることも示された。

画像集 No.019のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 イラスト班の作画作業やパーツ分け作業などは,アニメーション班から受け取った作画指示書をもとに行う。アクションによって作画枚数は大きく変化するとのこと。また,アニメーション制作時に必要となる描画なども出てくる場合があるため,アニメーション班との密な連携が必要になるそうだ。

画像集 No.020のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 そうやって仕上がった作画を,After Effectsを使ってゲームに実装する。どのタイミングでスクリーンショットを撮っても違和感のないよう,細かくパーツを制御してディテールまで破綻なくアニメーションさせるという。呪術廻戦ならではの呪力などのエフェクトはアニメーターが作画で表現していることや,アニメの撮影処理にあたるエフェクトもこの工程で入れることも示された。

画像集 No.021のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 背景と合成する必要がある演出は,最終的にUnityのタイムラインエディタ上でカメラワークを実装していく。その際,背景のトーンを調整したり,適切なブラー効果を加えたりして,キャラクターと背景をなじませるそうだ。また極端なカメラワークの場合は,3D背景が破綻してしまうことがあるため,入念にチェックして破綻が見つかった場合は適宜修正を加えていくという。

画像集 No.022のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

 2人のキャラクターが同時に必殺技を発動した際には,「連携必殺演出」がなされる。キャラクターが連携することの多い呪術廻戦らしい演出であるため,あらゆる組み合わせで成立するようにポーズや位置などを工夫して制作しているとのこと。また,特定のキャラクターが連携することによって,ユニークな掛け合いなどが発生することにも言及された。

画像集 No.023のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート
画像集 No.024のサムネイル画像 / 「呪術廻戦 ファントムパレード」におけるドラマチックなバトル体験を実現させるためのノウハウが明かされた,サムザップのセッションをレポート

「CyberAgent Game Conference 2024」公式サイト


4Gamer「CyberAgent Game Conference 2024」記事一覧


「呪術廻戦 ファントムパレード」公式サイト

「呪術廻戦 ファントムパレード」ダウンロードページ

「呪術廻戦 ファントムパレード」ダウンロードページ

  • 関連タイトル:

    呪術廻戦 ファントムパレード

  • 関連タイトル:

    呪術廻戦 ファントムパレード

  • この記事のURL:
4Gamer.net最新情報
プラットフォーム別新着記事
総合新着記事
企画記事
スペシャルコンテンツ
注目記事ランキング
集計:04月27日〜04月28日