『呪術廻戦 ファントムパレード』の多彩なスキル演出を生み出した制作ツールへのこだわり【CAGC2024】

『呪術廻戦 ファントムパレード』のバトルでは、スキル演出の制作にTimelineを用いています。
本セッションでは、スキル演出がTimelineによってどのように実現されているのか説明し、バトルチームのエンジニアが開発する「スキルTimeline制作ツール」の全体像を話します。
そして後半では、クリエイターとの二人三脚を重視した制作フローに触れ、その中でエンジニアが制作ツールに込めた「こだわり」をいくつかの具体的な事例を挙げながらお見せします。

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

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

Transcript

1. 『呪術廻戦 ファントムパレード』 多彩なスキル演出を生み出した 制作ツールへのこだわり 1 クライアントエンジニア / 呪術廻戦 ファントムパレード 片山 凌　Katayama Ryo
2. 『呪術廻戦 ファントムパレード』について 2
3. 3 『呪術廻戦 ファントムパレード』は、 2018年より「週刊少年ジャンプ」 （集英社）にて連載中の 芥見下々（あくたみげげ）氏による 人気漫画を原作としたTVアニメ『呪術廻戦』 を元にした、作品初のスマートフォンゲーム です。 TVアニメ『呪術廻戦』の第1期の物語を 追体験できるだけでなく、福岡を舞台にした 『ファンパレ』オリジナルの ストーリーが楽しめる コマンドバトルRPGとなっています。
4. 『呪術廻戦 ファントムパレード』のバトルについて - 『呪術廻戦』の世界観を再現したターン制コマンドバトルRPG - 様々なキャラクターを編成してバトルができる - スキルごとに用意された多彩なスキル演出が魅力の1つ 4
5. - 「スキル演出」がどのように作られているのか？ - それを生み出す「制作ツール」がどのようなものなのか？ - エンジニアの視点で、何を考えて何をこだわっているのか？ 本セッションで話すこと 5
6. アジェンダ 1. スキルTimelineについて 2. スキルTimeline制作ツールの全体像 3. スキルTimeline制作ツールへのこだわり 6
7. スキルTimelineについて 7
8. スキルTimelineについて - スキル演出の制作にはTimelineを用いている - 虎杖のスキル「拳打」の演出と、スキルTimelineがこちら 虎杖「拳打」のスキル演出 スキルTimeline 8
9. スキルTimelineについて 相手の位置へ移動 元の位置へ移動 パンチするモーションを再生 Transform制御 Track モーション再生 Track ヒット通知 Track エフェクト生成 Track SE再生 Track ダメージ効果を発生 ヒットエフェクトを生成 ヒットSEを再生 - それぞれの機能を担うTrackの組み合わせによって 1つのスキルTimelineを構築している … … 時間 9
10. スキルTimelineについて - 改めて、虎杖のスキル「拳打」 - いくつものTrackを組み合わせて作っている 虎杖「拳打」のスキル演出 スキルTimeline 10
11. スキルTimelineについて - 必殺スキル, 連携必殺の演出も同じ仕組みで作られている - 動画再生Track, 各種ポストエフェクトTrack　など 虎杖「逕庭拳」のスキル演出 連携必殺演出 11
12. スキルTimeline制作ツールの全体像 12
13. スキルTimeline制作におけるエンジニアの役割 - エンジニアの役割 - Trackの実装や機能追加 - スキル演出を確認するための環境作り　など - クリエイターの役割 - Trackを組み合わせながらTimelineを構築 - リソースの作成（Spineやエフェクトなど）　など スキルTimelineの「制作ツール」の開発が主な役割 13
14. スキルTimeline制作ツール　スキル確認シーン 14
15. スキルTimeline制作ツール　スキル結果パターンごとの確認 15
16. スキルTimeline制作ツール　Previewモード - Timelineをフレーム単位で確認しながら編集するための機能 - ほとんどのTrackがPreviewモードをサポートしている 16 虎杖「逕庭拳」のPreview シークしながら編集できる
17. スキルTimeline制作ツールへのこだわり 17
18. スキルTimeline制作フローについて - 絵コンテ完成後、エンジニアが制作に大きく関わり始める - エンジニアの実装の後、クリエイター作業に引き継ぐ流れ 絵コンテ確認 エンジニア 実装 完成！ 虎杖「拳打」の絵コンテ クリエイター Timeline制作 18
19. スキルTimeline制作フローについて 19 絵コンテ確認 エンジニア 実装 完成！ クリエイター Timeline制作 - 実際は、エンジニアとクリエイターの二人三脚という作り方 - エンジニアの考え - やりたいことができるツールになっているか？ - 使いやすいツールになっているか？ - ということに向き合いながら制作ツールの開発を行っている
20. 事例1：汎用エフェクトの自動生成ON/OFF デバフの汎用エフェクト - スキル効果に対応した汎用エフェクトがある - 例えば、回復効果ならこの緑色のエフェクト 20 回復の汎用エフェクト バフの汎用エフェクト
21. 事例1：汎用エフェクトの自動生成ON/OFF 回復効果を発生 ヒット通知 Track 21 回復の汎用エフェクト ヒット通知ClipのInspector - ヒット通知Trackの中の処理として、 自動生成するようなシステムにしている - ただし、自動生成をOFFにする機能もある 時間 …
22. 事例1：汎用エフェクトの自動生成ON/OFF 22 回復効果を発生 回復エフェクトを生成 ヒット通知 Track エフェクト生成 Track 時間 回復効果を発生 + 回復エフェクトを生成 時間 - 元々はエフェクト生成Trackを並列させていた - エンジニアの考え - システムで自動生成するように改善したい - しかし、汎用エフェクトを出したくない演出もあるのでは？
23. 事例1：汎用エフェクトの自動生成ON/OFF 家入「反転術式（大）」のエフェクト - ON/OFFを選択できるという小さな機能だが クリエイターの表現の幅を狭めない という意図が込められている 23 回復の汎用エフェクト
24. 事例2：キャラクター制御の共通化 - 各Trackの機能要件 - スキル実行キャラ の位置を移動させたい - スキル実行キャラ にモーションを取らせたい - スキル対象キャラ に色乗算をかけたい　　　　　など　 24 - エンジニアの考え - 「キャラクターを制御するTrack」としてインターフェースを作り 参照の渡し方を共通化したい - どのキャラを制御するかは、Track上でタイプ選択する
25. 事例2：キャラクター制御の共通化 - 「スキル対象キャラより手前にいるキャラ」を非表示 25
26. 事例2：キャラクター制御の共通化 26 - 強敵出現演出も同じTimelineの仕組みを使っている - 「ボス」に対してエフェクトをかける　など
27. 事例2：キャラクター制御の共通化 27 - キャラクター制御は徹底して一箇所に集約 - 実装の共通化は、ツールとしての機能の共通化 - クリエイターにとって使いやすいツールか？ 意識しながら開発をしている
28. 事例3：Track単位での演出分岐 - スキル実行時の状況によって細かく演出を変えたい - 対象が1体 or 複数 - 式神がいる or いない - トドメを刺してバトルに勝利する場合　など - パターンごとにTimelineを作るのは無駄が多い 28 Track単位で演出を分岐できる仕組みを実装
29. 事例3：Track単位での演出分岐：ブレイク × 黒閃あり/なし 29
30. 事例3：Track単位での演出分岐：ブレイク × 対象が1体/複数 30
31. 事例3：Track単位での演出分岐 - Trackに対して色々な条件を設定できる - 複数Trackの同時編集もサポートしている - 演出のクオリティを一段引き上げるための 細かい積み重ねが詰まった仕組み 31
32. まとめ - スキルTimelineの仕組みや、その制作ツールについて話した - エンジニアとクリエイターの二人三脚という 作り方を大事にしている - スキルTimeline制作ツールには、演出のクオリティを高めるための エンジニア的な「こだわり」がいくつも込められている - クリエイターがやりたいことができるツールになっているのか？ - 使いやすいツールになっているのか？ 32
33. 33 ご清聴ありがとうございました ©芥見下々／集英社・呪術廻戦製作委員会　 ©Sumzap, Inc.／TOHO CO., LTD.