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

by CyberAgent

Slide 1

Slide 1 text

『呪術廻戦ファントムパレード』多彩なスキル演出を生み出した制作ツールへのこだわり 1 クライアントエンジニア / 呪術廻戦ファントムパレード片山凌　Katayama Ryo

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

『呪術廻戦ファントムパレード』のバトルについて - 『呪術廻戦』の世界観を再現したターン制コマンドバトルRPG - 様々なキャラクターを編成してバトルができる - スキルごとに用意された多彩なスキル演出が魅力の1つ 4

Slide 5

Slide 5 text

- 「スキル演出」がどのように作られているのか？ - それを生み出す「制作ツール」がどのようなものなのか？ - エンジニアの視点で、何を考えて何をこだわっているのか？本セッションで話すこと 5

Slide 6

Slide 6 text

アジェンダ 1. スキルTimelineについて 2. スキルTimeline制作ツールの全体像 3. スキルTimeline制作ツールへのこだわり 6

Slide 7

Slide 7 text

スキルTimelineについて 7

Slide 8

Slide 8 text

スキルTimelineについて - スキル演出の制作にはTimelineを用いている - 虎杖のスキル「拳打」の演出と、スキルTimelineがこちら虎杖「拳打」のスキル演出スキルTimeline 8

Slide 9

Slide 9 text

スキルTimelineについて相手の位置へ移動元の位置へ移動パンチするモーションを再生 Transform制御 Track モーション再生 Track ヒット通知 Track エフェクト生成 Track SE再生 Track ダメージ効果を発生ヒットエフェクトを生成ヒットSEを再生 - それぞれの機能を担うTrackの組み合わせによって 1つのスキルTimelineを構築している … … 時間 9

Slide 10

Slide 10 text

スキルTimelineについて - 改めて、虎杖のスキル「拳打」 - いくつものTrackを組み合わせて作っている虎杖「拳打」のスキル演出スキルTimeline 10

Slide 11

Slide 11 text

スキルTimelineについて - 必殺スキル, 連携必殺の演出も同じ仕組みで作られている - 動画再生Track, 各種ポストエフェクトTrack　など虎杖「逕庭拳」のスキル演出連携必殺演出 11

Slide 12

Slide 12 text

スキルTimeline制作ツールの全体像 12

Slide 13

Slide 13 text

スキルTimeline制作におけるエンジニアの役割 - エンジニアの役割 - Trackの実装や機能追加 - スキル演出を確認するための環境作り　など - クリエイターの役割 - Trackを組み合わせながらTimelineを構築 - リソースの作成（Spineやエフェクトなど）　などスキルTimelineの「制作ツール」の開発が主な役割 13

Slide 14

Slide 14 text

スキルTimeline制作ツール　スキル確認シーン 14

Slide 15

Slide 15 text

スキルTimeline制作ツール　スキル結果パターンごとの確認 15

Slide 16

Slide 16 text

スキルTimeline制作ツール　Previewモード - Timelineをフレーム単位で確認しながら編集するための機能 - ほとんどのTrackがPreviewモードをサポートしている 16 虎杖「逕庭拳」のPreview シークしながら編集できる

Slide 17

Slide 17 text

スキルTimeline制作ツールへのこだわり 17

Slide 18

Slide 18 text

スキルTimeline制作フローについて - 絵コンテ完成後、エンジニアが制作に大きく関わり始める - エンジニアの実装の後、クリエイター作業に引き継ぐ流れ絵コンテ確認エンジニア実装完成！虎杖「拳打」の絵コンテクリエイター Timeline制作 18

Slide 19

Slide 19 text

スキルTimeline制作フローについて 19 絵コンテ確認エンジニア実装完成！クリエイター Timeline制作 - 実際は、エンジニアとクリエイターの二人三脚という作り方 - エンジニアの考え - やりたいことができるツールになっているか？ - 使いやすいツールになっているか？ - ということに向き合いながら制作ツールの開発を行っている

Slide 20

Slide 20 text

事例1：汎用エフェクトの自動生成ON/OFF デバフの汎用エフェクト - スキル効果に対応した汎用エフェクトがある - 例えば、回復効果ならこの緑色のエフェクト 20 回復の汎用エフェクトバフの汎用エフェクト

Slide 21

Slide 21 text

事例1：汎用エフェクトの自動生成ON/OFF 回復効果を発生ヒット通知 Track 21 回復の汎用エフェクトヒット通知ClipのInspector - ヒット通知Trackの中の処理として、自動生成するようなシステムにしている - ただし、自動生成をOFFにする機能もある時間 …

Slide 22

Slide 22 text

事例1：汎用エフェクトの自動生成ON/OFF 22 回復効果を発生回復エフェクトを生成ヒット通知 Track エフェクト生成 Track 時間回復効果を発生 + 回復エフェクトを生成時間 - 元々はエフェクト生成Trackを並列させていた - エンジニアの考え - システムで自動生成するように改善したい - しかし、汎用エフェクトを出したくない演出もあるのでは？

Slide 23

Slide 23 text

事例1：汎用エフェクトの自動生成ON/OFF 家入「反転術式（大）」のエフェクト - ON/OFFを選択できるという小さな機能だがクリエイターの表現の幅を狭めないという意図が込められている 23 回復の汎用エフェクト

Slide 24

Slide 24 text

事例2：キャラクター制御の共通化 - 各Trackの機能要件 - スキル実行キャラの位置を移動させたい - スキル実行キャラにモーションを取らせたい - スキル対象キャラに色乗算をかけたい　　　　　など　 24 - エンジニアの考え - 「キャラクターを制御するTrack」としてインターフェースを作り参照の渡し方を共通化したい - どのキャラを制御するかは、Track上でタイプ選択する

Slide 25

Slide 25 text

事例2：キャラクター制御の共通化 - 「スキル対象キャラより手前にいるキャラ」を非表示 25

Slide 26

Slide 26 text

事例2：キャラクター制御の共通化 26 - 強敵出現演出も同じTimelineの仕組みを使っている - 「ボス」に対してエフェクトをかける　など

Slide 27

Slide 27 text

事例2：キャラクター制御の共通化 27 - キャラクター制御は徹底して一箇所に集約 - 実装の共通化は、ツールとしての機能の共通化 - クリエイターにとって使いやすいツールか？意識しながら開発をしている

Slide 28

Slide 28 text

事例3：Track単位での演出分岐 - スキル実行時の状況によって細かく演出を変えたい - 対象が1体 or 複数 - 式神がいる or いない - トドメを刺してバトルに勝利する場合　など - パターンごとにTimelineを作るのは無駄が多い 28 Track単位で演出を分岐できる仕組みを実装

Slide 29

Slide 29 text

事例3：Track単位での演出分岐：ブレイク × 黒閃あり/なし 29

Slide 30

Slide 30 text

事例3：Track単位での演出分岐：ブレイク × 対象が1体/複数 30

Slide 31

Slide 31 text

事例3：Track単位での演出分岐 - Trackに対して色々な条件を設定できる - 複数Trackの同時編集もサポートしている - 演出のクオリティを一段引き上げるための細かい積み重ねが詰まった仕組み 31

Slide 32

Slide 32 text

まとめ - スキルTimelineの仕組みや、その制作ツールについて話した - エンジニアとクリエイターの二人三脚という作り方を大事にしている - スキルTimeline制作ツールには、演出のクオリティを高めるためのエンジニア的な「こだわり」がいくつも込められている - クリエイターがやりたいことができるツールになっているのか？ - 使いやすいツールになっているのか？ 32