この記事は、2024年3月7日に開催された「CyberAgent Game Conference 2024（CAGC 2024）」のセッション内容をAIによる自動文字起こしをベースに加筆修正したものになります。

セッション概要

『呪術廻戦 ファントムパレード』のストーリー制作において重要な役割を果たした表現技法について解説します。
陰影の表現、Live2Dに対するライティングによってキャラクターはより魅力的になり、背景にも馴染みやすくなりました。
レイヤー指定ポストエフェクトでは、疑似的な被写界深度や戦闘シーンのアニメ風な効果を作り出しています。
これらの技術がどのように活用されたか具体的な事例を交えてご紹介します。

※セッションのアーカイブ動画

登壇内容

自己紹介

まずは自己紹介です。

株式会社サムザップアートディレクターを担当しています中山です。
2020年サムザップに入社しまして、デザイナー、イラストレーターを経て、アートディレクターを務めさせていただいております。
『ロンドン迷宮譚』や 今作の『呪術廻戦 ファントムパレード』など、立ち上げから参画させていただいております。
クリエイティブ全般の技術向上やディレクションを担当しています。
よろしくお願いします。

安部裕香と申します。
株式会社サムザップでLive2Dアニメーターをしております。
2012年にサムザップに入社後、イラストレーター、アートディレクターを経て、Live2Dアニメーターに転身いたしました。
『この素晴らしい世界に祝福を！ファンタスティックデイズ』のほか、今作の『呪術廻戦 ファントムパレード』などに立ち上げから参画しました。
Live2D制作とちびキャラアニメーションを担当しております。
よろしくお願いします。

 

『呪術廻戦 ファントムパレード』とは

それでは、『呪術廻戦 ファントムパレード』についてご紹介させていただきます。

 

『ファンパレ』開発方針

開発指針についてもご紹介させていただきます。

 

アジェンダ

本日のアジェンダをご紹介させていただきます。

どうぞよろしくお願いいたします。

 

注意事項

次に、注意事項です。

 

制作フローのご紹介

それでは制作フローのご紹介です。
ADVパートの制作フローは以下のとおりです。

まずはじめにシナリオ班が制作したストーリーから、必要なリソースを洗い出し、Live2D、シネマティックシーン、背景、SE等の、さまざまな発注書を作成します。

そして各セクションごとに、必要なリソースを期間内に作成し納品を行います。

その後納品されたさまざまなリソースを使用して、スクリプト班がUnityへ組み込みを行います。
サムザップではポスプロの設定やライティングも、スクリプト班が設定してくれています。
確認会はADVチーム全体で行います。

読みやすさやテンポ、流れに違和感がないか、表現としてもっと工夫できる箇所はないか、絵作りとしてのクオリティチェック、細部までチェックした上で、必要に応じてさらなるブラッシュアップを徹底して行っています。
ここではスクリプター、シナリオライター、クリエイターが一気に集まって確認会を行うことにより、作業巻き戻りの防止やアレンジの相談などができるようになったので大変効果的でした。

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

次にLive2Dキャラクターの魅力的な仕草の表現についてご紹介させていただきます。

モーションの組み合わせ

モーションの組み合わせについてです。
今作のLive2Dでは用途を分けた多種多様なモーションを作成し、様々な感情の表現を可能にしています。
また一部のパーツの表示切り替えなど、細かな表現にも対応するため、付け足し用のカスタムモーションも作成し、スクリプト側でバリエーション豊かな設定ができるような仕組みにしております。
例えばここで言うとカスタムというのは、涙やギャグ顔などが挙げられます。

モーションの種類

具体的な内容はこちらになります。
設定時に判別しやすいよう、モーション名の頭に種類番号を付けています。
ベースモーションですと、00が汎用モーション、05はキャラ固有のモーションになります。

自動モーションについては、このような種類番号を振り分けています。
瞬き、呼吸など、自動で繰り返し動くものや、音声に連動するリップシンクの設定をしています。

表情モーションはこちらです。
表情を1フレームのみ設定したもの、上書きして使うものなどがこちらに挙げられます。

カスタムモーションは、スクリプター側で、ADVを組み込んでいるときに、自由自在に付けられるモーションとなっています。

キャラクターのベースタイプの振り分け

次にキャラクターのベースタイプの振り分けです。
汎用的な動きについてはタイプを分けて、モーションを作成し流用しています。
そこからさらに微妙な性格の差を出すために、キャラごとの動きの幅を調整しています。
実例を見てみましょう。

「尋ねる」という動きは、タイプごとでこのように差別化しています。
例えば虎杖であれば首をかしげる動き、クールタイプの伏黒であれば少し澄ました首をかしげる動き、ワイルドタイプの東堂は手を大きく上げて、体全体でダイナミックな動きをさせています。

ベースモーション例

ベースモーションの例をご紹介させていただきます。
否定するうなずくなど、同じタイプで流用できるよう、汎用として作成しています。
ポージングや細かなタイミングは、キャラの性格に合わせて調整しています。
例えばここで言うと否定するという動き、うなずくという動きは虎杖もパンダも、ポップタイプのため同じ動きをしています。

固有モーション例

固有モーションの例です。
虎杖を例にすると拳を合わせる、頭をかくなど印象的な動きを固有としています。
ゲーム内では固有モーションを多く取り扱っています。

表情モーションの組み合わせ例

表情モーションの組み合わせ例です。
ベースモーションにさまざまな表情を組み合わせることで、限りあるリソースからシリアスからギャグまで、さまざまな感情を表現しています。
ここでは虎杖は同じ動きをしていますが、表情の組み合わせが違うことで、シリアスとギャグをうまく使い分けています。

口の開閉について

口の開閉についてです。
今作のADVではリアルな会話を表現するため、母音や音声波形に応じて、口の形状も変化する仕様にしております。
この開閉についてはキャラごとに細かく口の形状を調整し、こだわって作成しています。
原作でシリアスのシーンだったりとか、バトルシーンで叫ぶシーン、そのような表現に対応できるようになっています。

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

それではノーマルマップとライティングについて、ご紹介させていただきます。
我々ファンパレのADV制作チームの課題として、より先進的で臨場感を持たせる絵作りを目指したいという目標がありました。
いろんな手法がある中でLive2Dのキャラたちを、ADV上の背景に実際に存在するような臨場感を出すため、背景に合わせた環境の光や色味など、Live2Dのキャラたちに影響させる仕組みにすれば、先進的でかつ臨場感も持たせられて、さらに2D特有の平面感もなくし、クオリティアップにつながるのではと考えました。
この仕組みを実現するのに採用したのが「ノーマルマップ」になります。
ノーマルマップは放線マップとも言いまして、3D素材では当たり前のように使われています。
テクスチャに凹凸の高さ情報を持たせる特徴を、今回2D素材に適用して、擬似的に2D素材に凹凸の情報を持たせることで、ライティングの影響を受けさせることに成功しました。
このセクションではこのノーマルマップを採用するのに、工夫したことや成功事例、課題などを、ご紹介させていただきたいと思います。

ノーマルマップ制作方法

ノーマルマップの制作手順は図のような、3つの工程で制作しております。
まずはlagherというLive2Dで生成したAtlasテクスチャから、ノーマルマップを自動生成できるツールで書き出しをしていきます。
次に書き出したノーマルマップに、仕様に合わせたレタッチをUnityで確認しながら行っていきます。
最後に実際のADV上でモーションやライトの当たり具合を確認して完成です。

この最後の工程、各位が一つ一つUnityで細かく確認して、動画で書き出して確認するフローだと、後戻りや対応が遅くなったりするので、キャラごとにモーションや背景の位置を変えてどう見えるか、確認できるスクリプトを作っていただいたので、この工程がとても楽になり確認漏れ防止にもなっております。

ノーマルマップの効果

それでは早速、ノーマルマップの効果を見てみましょう。
動画のように背景に合わせて図を作っていますが、このように合わせた光の影響がLive2Dのキャラに適応されている状態になると、より背景と馴染み臨場感のある効果になります。
今回このノーマルマップを採用するにあたり、課題になった2つ「Live2Dの仕様に合わせたノーマルマップの制作」、「理想とするライティング表現にならない」この2つをご紹介させていただこうと思います。

課題1：Live2Dの仕様に合わせたノーマルマップ制作

課題1つ目としてLive2Dの仕様に合わせたノーマルマップの制作があります。
自動生成したノーマルマップは、パーツごとに凹凸をつけられてしまうので、レタッチをしないとこのような見え方になり、余計な凹凸が多い絵になってしまいます。

この課題を解決するため、自動生成したノーマルマップをライトの当たり具合を実際にunityで確認しながら、レタッチをしてシルエットの外側が主に反応するような、調整を行いました。
若干のリッチさを出したいので、少しだけ凹凸は残しつつ、今の仕様に落ち着きました。
実際に出来上がったものがこちらになります。
調整前と調整後だと凹凸の見え方が異なりますよね。

課題2：理想とするライティング表現にならない

次の課題は理想とするライティング表現にならないということです。

まずこの課題の理想としては左図のように、赤く強いライトがある部分にはエッジに強いハイライト、青い柔らかい光があれば青くほんのり反応するなど、キャラの立ち位置や光の加減に合わせて光の当たり方も変わるというものでした。
開発当初は右の図のように、強いハイライトにならなかったり、全体に光が当たってしまうような、理想の光には近づくことができませんでした。

この課題を解決するためにエンジニアさんと、光の発光の仕組みや計算を見直し、ノーマルマップのレタッチもしながら、キャラの反応を確認して調整を行いました。
結果的に用いた手段として左図のようにライトを複数配置することや光の加減を細かく調整できるようになったことでこちらの動画のように想定していた赤い光がしっかり入り、ライトの位置に合わせて反応できるようになりました。
この課題解決にはエンジニアさんと、この検証に協力してくださったチーム無くしてはできなかったので感謝しております。

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

続いて、ADVでのアニメ再現の工夫と、演出効果についてご説明させていただきます。
開発初期の課題は、従来のリソースが限られたシンプルなADVだとテキストの情報が多くなり、迫力のある漫画やアニメに比べ紙芝居のような印象になりがちでした。
そこでアニメ演出経験のあるシナリオライターを主軸にチームを構成しました。
原作やアニメの迫力のあるシーンを、ADVでどのように表現するかを日々検討し、シナリオ、演出のクオリティアップに注力しました。

ADVのチェック体制について

ADVでのチェック体制については、スクリプターのほか、シナリオライター、アートディレクター、アニメーターなど、制作に関わるメンバーを集めて確認を行いました。
これにより細かなチェックと相談が可能となり、テンポを良くするためのセリフの追加、シーンのカットが、即座に判断できるのは非常に効果的でした。

ADVのテンポ感について

ADVのテンポ感については、セリフのカットについて気持ちの良いテンポ感を重視して判断をしていきました。
実際に上がったシナリオからかなり大幅にカットしている資料をこちらに添付しております。
省けるセリフやト書き部分もカットしています。

具体的な演出例：撮影処理

ここからはアニメ演出をADVならではの手法で、反映した例をご紹介させていただきます。
撮影処理についてです。

Unityでポストエフェクトを導入することで、アニメの撮影処理に近づけました。

【1番目：プレーン】
Live2D、背景、エフェクトをそれぞれ配置した状態です。

【2番目：ポストエフェクトON】
コントラストや彩度、リフトガンマゲインで全体の色味をアニメに近づけています。
（特に呪術は色味が独特なのでかなり効果的）
また、下が暗くなるようなスクリーンを乗せることで顔周りに視線誘導しています。

【3番目：ライトON】
背景の環境光をLive2Dモデルに反映するためのライトです。
ノーマルマップはこのライトで反応しています。

こちらも同じく撮影処理です。
1番目がプレーンな状態、2番目がポストエフェクトがオンの状態、最後にライトがオンの状態です。

具体的な演出例：カメラの工夫

こちらはカメラの工夫です。

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

戦闘シーンではダイナミックかつ多めにカメラを動かすことで、ADVだと表現しづらい臨場感、スピード感を出すように工夫しています。

具体的な演出例：あえて表情を見せない、感情を読ませない演出

 

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

こちらもあえて表情を見せない演出です。
アニメでは悔しそうな口元を見せた後で座った状態で顔ふせる演出がありますが、ADVでは暗転させあえてまったく真依の顔を見せないことでエモさをだしています。

アニメでは虎杖の苦しそうな顔を見せていますが、ADVでの表現が難しかったため、下手に表現するよりも一切顔を見せず、虎杖の環境（相手の強攻撃エフェクトや回想シーン）を詳細に見せることで、今の虎杖の心情を想像してもらうようにしています。

こちらはアニメに合わせた演出ですが、虎杖の台詞途中でカメラを吉野順平に移しています。
虎杖よりも、「虎杖の意見を聞いて吉野の考えが変わる」ことがポイントのシーンなので、話者ではなくあえて順平の反応を見せています。
ここに限らず、ADVでは話者よりも「その発言で表情を変える人」や「その発言で言及されている人」にフォーカスを当てて、映像ならではの手法で情報量に厚みが出るよう意識しています。

具体的な演出例：シネマティックシーンを使う判断について

ストーリーの山場におけるキャラクターの見せ場、この2つが重なりかつスチルで表現するだけでは物足りないシーンだったときに、シネマティックシーンを使用しています。
【例】キャラクターが初登場した時、戦闘中に技を使用する時、強大なボスが現れた時など

山場が連続するストーリーもありますが、その場合は全体を通して読者が飽きないタイミングを探り、シネマティックシーンの使用を制限することも多いです。
こちらに関して詳しくは別セッションの、『呪術廻戦 ファントムパレード』ゲームライズしたADV表現〜「シネマティックシーン」制作のこだわりと実現への道のり〜で詳しく紹介しておりますので、ご興味がある方はぜひアーカイブをご覧ください。

まとめ

それではまとめです。

 

以上となります。ご清聴ありがとうございました。

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