『呪術廻戦ファントムパレード』ADV制作事例～会話シーンを「飽きさせない」画作り術～【CAGC2024】

Slide 1

Slide 1 text

『呪術廻戦ファントムパレード』ADV制作事例　～会話シーンを「飽きさせない」画作り術～ 1 呪術廻戦ファントムパレード中山祐治アートディレクター安部裕香 Live2Dアニメーター

Slide 2

Slide 2 text

自己紹介 2

Slide 3

Slide 3 text

自己紹介 3 ❖ 中山祐治　Nakayama Yuji 株式会社サムザップ　アートディレクター 2020年サムザップ入社。デザイナー、イラストレーターを経てアートディレクターを努めています。『ロンドン迷宮譚』のリリースや『呪術廻戦ファントムパレード』などに立ち上げから参画。クリエイティブ全般の技術向上やディレクションを担当。

Slide 4

Slide 4 text

自己紹介 4 ❖ 安部裕香　Abe Yukari 株式会社サムザップ　Live2Dアニメーター 2012年サムザップ入社。イラストレーター、アートディレクターを経て Live2Dアニメーターに転身。『このすばらしき世界に祝福を！ファンタスティックデイズ』『呪術廻戦ファントムパレード』などに立ち上げから参画。 Live2D制作とちびキャラアニメーションを担当。

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

『ファンパレ』開発指針 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

本日のアジェンダ 9

Slide 10

Slide 10 text

本日のアジェンダ 10 1. 制作フローのご紹介 2. Live2Dキャラクターの魅力的な仕草の再現について 3. ノーマルマップとライティングについて 4. ADVでのアニメ再現の工夫と演出効果 5. まとめ

Slide 11

Slide 11 text

🚩Attention 11 ● 本スライドで使用している画像及び動画については一部本セッション用に用意したものもありますので、ゲーム本編で使用しているものとは異なる場合がございます。 ● 開発中のものや意図しない状態のものが含まれているため、本来のキャラクター設定や見た目と異なる部分があるかと思いますが、ご了承ください。

Slide 12

Slide 12 text

制作フローのご紹介 12

Slide 13

Slide 13 text

13 ADVパート（ストーリーパート）の制作フローは以下の通りです。制作フローのご紹介シナリオ制作発注書作成スクリプト組み込み確認会リソース制作

Slide 14

Slide 14 text

ADVパート（ストーリーパート）の制作フローは以下の通りです。まずはじめに、シナリオ班が作成したストーリーから必要なリソースを洗い出し、 Live2D、シネマティックシーン、背景、SE等の様々な発注書を作成します。 14 制作フローのご紹介シナリオ制作発注書作成スクリプト組み込み確認会リソース制作

Slide 15

Slide 15 text

15 そして各セクションごとに必要なリソースを期間内に作成し、納品を行います。制作フローのご紹介シナリオ制作発注書作成スクリプト組み込み確認会リソース制作

Slide 16

Slide 16 text

16 その後、納品された様々なリソースを使用してスクリプト班がUnityへ組み込みを行います。サムザップではポスプロの設定やライティングもスクリプト班が設定しています。制作フローのご紹介シナリオ制作発注書作成スクリプト組み込み確認会リソース制作

Slide 17

Slide 17 text

17 確認会はADVチーム全体で行います。・読みやすさやテンポ、流れに違和感がないか・表現としてもっと工夫できる箇所はないか・画作りのクオリティチェック細部までチェックした上で、必要に応じてさらなるブラッシュアップを徹底して行います。制作フローのご紹介シナリオ制作発注書作成スクリプト組み込み確認会リソース制作

Slide 18

Slide 18 text

Live2Dキャラクターの魅力的な仕草の再現について 18

Slide 19

Slide 19 text

19 今作のLive2Dでは用途を分けた多種多様なモーションを作成し様々な感情の表現を可能にしています。モーションの組み合わせ汎用固有表情自動（まばたき、呼吸）ベース上書き最終フレームを維持したまま

Slide 20

Slide 20 text

20 今作のLive2Dでは用途を分けた多種多様なモーションを作成し様々な感情の表現を可能にしています。また、一部のパーツの表示切替え等細かな表現にも対応するため、付け足し用のカスタムモーションも作成しスクリプト側でバリエーション豊かな設定ができるような仕組みにしております。モーションの組み合わせベース上書き付け足し汎用固有表情自動（まばたき、呼吸）最終フレームを維持したまま必要に応じてカスタムの追加

Slide 21

Slide 21 text

21 具体的な内容はこちらになります。設定時に判別し易いよう、モーション名の頭に種類番号をつけています。モーションの種類モーションの種類モーション名内容ベースモーション 00_〇〇 05_〇〇目線、頭、体の動きが入るモーション 00はタイプ別の汎用モーション 05はキャラ固有のモーション

Slide 22

Slide 22 text

22 具体的な内容はこちらになります。設定時に判別し易いよう、モーション名の頭に種類番号をつけています。モーションの種類モーションの種類モーション名内容ベースモーション 00_〇〇 05_〇〇目線、頭、体の動きが入るモーション 00はタイプ別の汎用モーション 05はキャラ固有のモーション自動 10〜15_Auto_〇〇 40～45_Auto_Mouse まばたき、呼吸等自動で繰り返し動くものや音声に連動するリップシンクの設定 [10_Auto_Eye_○○] [15_Auto_Breath] [40_Auto_Mouse_○○]

Slide 23

Slide 23 text

23 具体的な内容はこちらになります。設定時に判別し易いよう、モーション名の頭に種類番号をつけています。モーションの種類モーションの種類モーション名内容ベースモーション 00_〇〇 05_〇〇目線、頭、体の動きが入るモーション 00はタイプ別の汎用モーション 05はキャラ固有のモーション自動 10〜15_Auto_〇〇 40～45_Auto_Mouse まばたき、呼吸等自動で繰り返し動くものや音声に連動するリップシンクの設定 [10_Auto_Eye_○○] [15_Auto_Breath] [40_Auto_Mouse_○○] 表情 20_Ex_〇〇 25_Ex_〇〇表情を1fのみ設定した物、上書きして使うもの 25はキャラ固有の表情

Slide 24

Slide 24 text

24 具体的な内容はこちらになります。設定時に判別し易いよう、モーション名の頭に種類番号をつけています。モーションの種類モーションの種類モーション名内容ベースモーション 00_〇〇 05_〇〇目線、頭、体の動きが入るモーション 00はタイプ別の汎用モーション 05はキャラ固有のモーション自動 10〜15_Auto_〇〇 40～45_Auto_Mouse まばたき、呼吸等自動で繰り返し動くものや音声に連動するリップシンクの設定 [10_Auto_Eye_○○] [15_Auto_Breath] [40_Auto_Mouse_○○] 表情 20_Ex_〇〇 25_Ex_〇〇表情を1fのみ設定した物、上書きして使うもの 25はキャラ固有の表情カスタム 30_Cus_〇〇・顔影のオンオフ・目を開ける閉じる・汗、頬染・傷、負傷ON、OFF ・特定のパーツの ON、OFF

Slide 25

Slide 25 text

25 汎用的な動きについてはタイプを分けてモーションを作成し、流用しています。そこから更に微妙な性格の差を出すためにキャラごとに動きの幅を調整します。右図は一例となります。キャラクターのベースタイプの振り分け pop wild cool 虎杖、パンダ東堂、夜蛾伏黒、七海 smart ﬂesh 釘崎、西宮真希、冥冥

Slide 26

Slide 26 text

26 キャラクターのベースタイプの振り分け「尋ねる」の動きを、タイプごとでこのように差別化しています。 Pop Cool Wild

Slide 27

Slide 27 text

27 「否定する」「頷く」等を同タイプで流用できるよう汎用として作成しています。（ポージングや細かなタイミングは、キャラの性格に合わせて調整しています）ベースモーション例否定する頷く

Slide 28

Slide 28 text

28 「拳を合わせる」「頭をかく」等、印象的なキャラの動きを固有としています。固有モーション例拳を合わせる頭をかく

Slide 29

Slide 29 text

ベースモーションに様々な表情を組み合わせることで、限りあるリソースからシリアスからギャグまで様々な感情を表現しています。 29 表情モーションの組み合わせ例

Slide 30

Slide 30 text

30 ADVではよりリアルな会話を再現するため、母音や音声波形に応じて口の形状も変化をする仕様になっております。口の開閉について ※開発当時はLive2D Cubismにリップシンク機能がなかったため、このような設定で対応しております。あえいおう閉じ（デフォルト）

Slide 31

Slide 31 text

31 この開閉については、キャラごとに細かく口の形状を調整し、こだわって作成しています。口の開閉について【あ】縦にも横にも一番大きい口【お】「あ」よりも横に少し窄めた口【え】「あ」よりも縦に少し閉じた口【う】「お」よりもさらに窄めた口【い】歯を軽く閉じた口　　【閉じ】口と歯が閉じている状態

Slide 32

Slide 32 text

ノーマルマップとライティングについて 32

Slide 33

Slide 33 text

ノーマルマップを利用した画作り 33 ADVパートにおいて、従来のADV及び2D表現のクオリティーを超えるような画作りができないかという課題がありました。その中で、背景の環境の光などを２Dの素材に影響を受けさせ疑似的にライティングを当てるような仕組みにできれば、より２D特有の平面感をなくすことができるのではないかと考えました。そこで今回採用したのが「ノーマルマップ」です。「ノーマルマップ」とは法線マップとも言い、法線のベクトル情報を使って３Dモデルの凸凹表現をするのに用いられています。その仕組みを２Dに適応させ、疑似的に２D素材にも凹凸の情報を持たせることでライティングの影響を受けさせることに成功しました。このセクションではこの「ノーマルマップ」を採用するのに工夫した点や新たに生まれた課題や効果を実例を元に説明させていただきます。

Slide 34

Slide 34 text

34 ノーマルの制作手順は右図のようなフローで制作しております。 Live2Dで生成したアトラステクスチャを「lagher」というノーマルマップを自動生成できるツールにて書き出し今作で使用しているLive2Dの仕様に合わせて余計な凹凸表現をなくすように生成されたノーマルマップをレタッチ最終的な見た目、ライトの当たり具合を確認し最終調整を行い完成ノーマルマップ制作方法レタッチ完成 Lagher Photoshop unityで見た目のチェック自動生成 unity

Slide 35

Slide 35 text

ノーマルマップの効果 35 動画のように背景に合わせた光の影響がLive2Dのキャラに適応されている状態になりより背景と馴染み臨場感のある効果になりました。

Slide 36

Slide 36 text

検証段階での課題 36 今作はLive2Dを先行して制作し、ブラッシュアップの段階で取り入れた手法のため現在の仕様の中でのノーマルマップの仕様・ライトの設定が課題でした。主な課題は２点・Live2Dの仕様に合わせたノーマルマップ制作・理想とするライティング表現にならないこの課題の解決事例を紹介させていただきます。

Slide 37

Slide 37 text

課題「Live2Dの仕様に合わせたノーマルマップ制作」 37 自動生成したノーマルマップだと、アトラステクスチャにあるパーツごとに法線が描かれるため下図のような見え方になり余計な凹凸が多い画になってしまう

Slide 38

Slide 38 text

課題「Live2Dの仕様に合わせたノーマルマップ制作」 38 課題解決として、Live2Dのパーツごとに反応させたいところだけ法線情報を残しつつ基本的にシルエットの外側を主に反応させるように調整を行うことで少し立体感を残しつつ理想に近い表現にすることができました

Slide 39

Slide 39 text

課題「Live2Dの仕様に合わせたノーマルマップ制作」 39 調整前調整後

Slide 40

Slide 40 text

課題「理想とするライティング表現にならない」 40 まずこの課題の「理想」としては、左図のような背景に対してキャラの一部だけが反応しキャラの立ち位置に合わせて色味や光の当たり方も変わるというものでした。右図は開発途中のもので、なかなか左図のような表現に近づけることが困難でした。

Slide 41

Slide 41 text

課題「理想とするライティング表現にならない」 41 そこで発光(加算)の仕組みをエンジニアさんと細かく見直し、キャラへの反応を確認しながら調整を行い、左図のようにライトを複数設置することで細かい色の変化と環境に適した色味の変化を可能にすることができました。

Slide 42

Slide 42 text

ADVでのアニメ再現の工夫と演出効果 42

Slide 43

Slide 43 text

43 従来のリソースが限られたシンプルなADVだと、テキストの情報が多くなり、迫力のある原作漫画やアニメに比べ紙芝居のような印象になりがちに… 開発初期の課題

Slide 44

Slide 44 text

44 そこで、アニメ演出経験のあるシナリオライターを主軸に構成。原作やアニメの迫力のあるシーンをADVでどのように表現するかを日々検討しシナリオ＆演出のクオリティアップに注力しました。開発初期の課題

Slide 45

Slide 45 text

ADVチェック時はスクリプターの他、シナリオライター、アートディレクター、アニメーターなど制作に関わるメンバーを集めて確認を行いました。これによりより細やかなチェックと相談が可能となり、テンポを良くするための台詞の追加・カットが即座に判断できるのは非常に効果的でした。 45 ADVのチェック体制についてシナリオライターアートディレクターアニメーター音の付け方、間の撮り方、カメラワーク等、全体の演出をチェック。場合によってはシナリオ調整も行う。主に「画面全体のライティング」と「シネマティックシーン」をチェック。ポスプロ、エフェクトなどの調整を行う。主に「Live2D表現」をチェック。モーションや表情確認を行い、演出や立ち位置に合わせて調整なども担当。スクリプター ADV制作や演出レギュレーションの作成、演出要望に対して技術的な面での提案、エンジニアとの連携を行う。

Slide 46

Slide 46 text

46 台詞のカットについては、気持ちの良いテンポ感を重視して判断をしていきました。 ADVの演出により省ける台詞やト書き部分も大幅にカットしています。 ADVのテンポ感について

Slide 47

Slide 47 text

47 演出についてもアニメ演出をもとに研究を重ね、エンジニアを交えてADVチーム一丸となり表現方法を工夫しました。ここからは、アニメ演出をADVならではの手法で反映した例を紹介させていただきます。 ADVならではの演出

Slide 48

Slide 48 text

Unityでポストエフェクトを導入することで、アニメの撮影処理に近づけました。【1番目：プレーン】 Live2D、背景、エフェクトをそれぞれ配置した状態です。【2番目：ポストエフェクトON】コントラストや彩度、リフトガンマゲインで全体の色味をアニメに近づけています。（特に呪術は色味が独特なのでかなり効果的）また、下が暗くなるようなスクリーンを乗せることで顔周りに視線誘導しています。【3番目：ライトON】背景の環境光をLive2Dモデルに反映するためのライトです。ノーマルマップはこのライトで反応しています。 48 具体的な演出例：撮影処理

Slide 49

Slide 49 text

Unityでポストエフェクトを導入することで、アニメの撮影処理に近づけました。 49 具体的な演出例：撮影処理【1番目：プレーン】 Live2D、背景、エフェクトをそれぞれ配置した状態です。【2番目：ポストエフェクトON】コントラストや彩度、リフトガンマゲインで全体の色味をアニメに近づけています。（特に呪術は色味が独特なのでかなり効果的）また、下が暗くなるようなスクリーンを乗せることで顔周りに視線誘導しています。【3番目：ライトON】背景の環境光をLive2Dモデルに反映するためのライトです。ノーマルマップはこのライトで反応しています。

Slide 50

Slide 50 text

ダイナミックなカメラの動きと被写界深度を工夫することで、より迫力のあるADVを目指しました。 50 具体的な演出例：カメラの工夫ここぞというシーンでは、通常時のアップより更にLive2Dの顔周りにぐっとカメラを寄せ、被写界深度で背景をぼかすことで没入感が出るよう工夫しています。

Slide 51

Slide 51 text

ダイナミックなカメラの動きと被写界深度を工夫することで、より迫力のあるADVを目指しました。 51 具体的な演出例：カメラの工夫戦闘シーンではダイナミックかつ多めにカメラを動かすことで、ADVだと表現しづらい臨場感、スピード感を出すように工夫しています。

Slide 52

Slide 52 text

原作の雰囲気を壊さぬよう、 ADVでもエモーショナルな余韻を感じる表現に挑戦しました。 52 具体的な演出例：あえて表情を見せない、感情を読ませない演出アニメでは八十八橋での特級との戦いで傷つき血を流し倒れ、ぼーっとしている伏黒が描写されていました。 ADVでは伏黒が倒れる表現が難しく、そのまま棒立ちでチープな演出になることを避けるため、あえて口元のみ→空を表示させ、エモさを出すようにしました。

Slide 53

Slide 53 text

原作の雰囲気を壊さぬよう、 ADVでもエモーショナルな余韻を感じる表現に挑戦しました。 53 具体的な演出例：あえて表情を見せない、感情を読ませない演出アニメでは悔しそうな口元を見せた後で座った状態で顔ふせる演出がありますが、 ADVでは暗転させあえてまったく真依の顔を見せないことでエモさをだしています。

Slide 54

Slide 54 text

原作の雰囲気を壊さぬよう、 ADVでもエモーショナルな余韻を感じる表現に挑戦しました。 54 具体的な演出例：あえて表情を見せない、感情を読ませない演出アニメでは虎杖の苦しそうな顔を見せていますが、 ADVでの表現が難しかったため下手に表現するよりも一切顔を見せず、虎杖の環境（相手の強攻撃エフェクトや回想シーン）を詳細に見せることで、今の虎杖の心情を想像してもらうようにしています。

Slide 55

Slide 55 text

原作の雰囲気を壊さぬよう、 ADVでもエモーショナルな余韻を感じる表現に挑戦しました。 55 具体的な演出例：あえて表情を見せない、感情を読ませない演出こちらはアニメに合わせた演出ですが、虎杖の台詞途中でカメラを吉野順平に写しています。虎杖よりも、「虎杖の意見を聞いて吉野の考えが変わる」ことがポイントのシーンなので、話者ではなくあえて順平の反応を見せています。ここに限らず、ADVでは話者よりも「その発言で表情を変える人」や「その発言で言及されている人」にフォーカスを当てて、映像ならではの手法で情報量に厚みが出るよう意識しています。

Slide 56

Slide 56 text

「ストーリーの山場」、「キャラクターの見せ場」この２つが重なり、かつ『スチルで表現するだけでは物足りないシーン』だった時にシネマティックシーンを使用しています。　【例】キャラクターが初登場した時、戦闘中に技を使用する時、強大なボスが現れた時など山場が連続するストーリーもありますが、その際は全体を通して読者が飽きないタイミングを探り、シネマティックシーンの使用箇所を制限することも多いです。詳しくは別セッションのにてご紹介しておりますので、ご興味がある方はぜひアーカイブをご覧いただけますと幸いです。『呪術廻戦ファントムパレード』ゲームライズしたADV表現〜「シネマティックシーン」制作のこだわりと実現への道のり〜 56 具体的な演出例：シネマティックシーンを使う判断について

Slide 57

Slide 57 text

まとめ 57

Slide 58

Slide 58 text

● Live2Dキャラクターの魅力的な仕草の再現について ○ 組み合わせし易いモーション構造で様々な感情の表現を可能に ○ 母音や音声波形に応じた口形状の変化でリアルさを再現 ● ノーマルマップとライティングについて ○ 背景の環境光の影響を受けた臨場感のある表現が可能に ○ ノーマルマップの適応でよりリッチ感のあるテイストを再現 ● ADVでのアニメ再現の工夫と演出効果 ○ シナリオは「気持ちの良いテンポ感」を重視 ○ ポスプロを使った撮影処理でリッチな画作りを実現 ○ ADVならではの手法で原作のエモーショナルな「余韻」を再現まとめ 58