［CEDEC 2020］「プリンセスコネクトRe:Diveが目指した，アニメRPGとしてのゲーム演出制作事例」聴講レポート。アニメとゲームの演出を融合したカットインアニメとは

　ゲーム開発者向けカンファレンス「CEDEC 2020」の3日目となる2020年9月4日，「『プリンセスコネクトRe:Dive』が目指した，アニメRPGとしてのゲーム演出制作事例 〜テレビアニメとゲーム演出，二つの制作手法を融合して生まれたカットインアニメーション〜」と題されたセッションが行われた。

「プリンセスコネクト！Re:Dive」公式サイト

「CEDEC 2020」公式サイト

　このセッションでは，Cygamesインタラクションデザイナーチームの工藤瑛子氏が，スマートフォンゲーム「プリンセスコネクトRe:Dive」（以下，「プリコネR」。iOS / Android）で使われているカットインアニメーションの制作手法を披露した。

アニメとゲームのメディアミックス作品における課題

　「プリコネR」の特徴の1つは，キャラクターが必殺技「ユニオンバースト」を放つときのカットインアニメーションと呼ばれる演出だ。小さなSDキャラクターが入り乱れる中に挟まれるカットインアニメは，バトルにメリハリとインパクトをもたらしている。


　工藤氏によると，「プリコネR」のようなアニメとゲームのメディアミックスタイトルには，アニメとゲームの制作体制の違いが課題としてあるという。アニメは数か月〜半年前からスケジュールを確保したうえで，最初に決めた仕様どおり制作していく。一方で，ゲームは短期かつ断続的に新しい演出が必要になり，またプレイヤーの状況に応じて演出の調整が適宜入るため，仕様の見直しによる作業の後戻りが発生する。

　工藤氏は，「プリコネR」にアニメ演出を取り入れるにあたり，「アニメ演出をゲームに入れ込むときの課題と解決法」「手書きとパーツアニメ，2つの手法をミックスした制作手法とフロー」「アニメ演出とSDキャラの演出（以下，SD演出）に統一感を出すためのノウハウ」という3つのアプローチを取ったと説明した。

「プリコネR」のカットインアニメとは？

　「プリコネR」のカットインアニメは，3つの役割を果たしていると工藤氏は言う。1つめは「キャラクターの魅力を最大限に見せる」ことで，小さなSDキャラクターでは見えない表情やしぐさを画面いっぱいに表示することで，プレイヤーにキャラクターを好きになってもらえるようにしている。


　2つめは「バトルシーンを“2秒”で盛り上げる」ことで，カットインアニメはいずれも約2秒で制作されている。SDキャラクターが動き回る中，カットインアニメがテンポよく差し込まれ，そのキャラクター固有の動きとSD演出でバトルを盛り上げる。そのためカットインアニメは，「2秒間のキャラPVである」という意識のもと，制作されているそうだ。


　3つめは「アニメとゲームをつなぐ」ことで，バトルの最中にもアニメが流れることで，本作のコンセプトである「アニメRPG」であることを強調している。加えて，ストーリーアニメと連動したSD演出は，ストーリー（アニメ）とシステム（ゲーム）という「プリコネR」の世界観をつなぐ役割を果たしているという。


　これら3つの役割を果たすため，「プリコネR」のカットインアニメ制作にはさまざまな工夫が施されているのだが，その1つが「パーツアニメ」。パーツアニメとは，部位ごとにパーツ化したイラストを用意し，ツールでそれぞれを動かすことで，手描きアニメのような見た目にする手法だ。


　当初，「プリコネR」では手描きのカットインアニメを使う予定だったという。しかし試作したカットインアニメとゲームのSD演出を合わせたところ，テンポ感が合わないという課題が生じた。気持ちのいいバトルのテンポ感は「プリコネR」の極めて重要な要素であるため，この課題は絶対に乗り越えなければならない。


　そのとき着目したのが，前作「プリンセスコネクト！」のユニオンバーストだった。「プリンセスコネクト！」はAdobe Flashで開発されたブラウザゲームなので，カットインアニメもSD演出もすべてパーツアニメで動かしており，バトルのテンポ感が崩れない。さらには，少ない作画枚数で済むため，制作スピードとクオリティの向上が見込めるというメリットがあった。
　そこで「プリコネR」のカットインアニメにもパーツアニメを適用したところ，SD演出とテンポ感が良く合い，ゲームの流れを阻害しない気持ちいい演出を作り出せたという。


　また必要な作画枚数が減ったこと，社内にパーツアニメのノウハウと知見が豊富だったことから，制作を内製化することができた。そのため，方向性の共有や意思疎通がしやすくなり，ブラッシュアップや後戻りのリカバリーをすぐに行えるようになった。
　さらに制作体制の変化によってアニメの制作体制に対する理解が深まり，ゲーム制作におけるパーツアニメのノウハウが浸透するというメリットもあったそうだ。

カットインアニメ制作の作業工程とノウハウ

　続いて工藤氏は，カットインアニメ制作の作業工程と使用ツールを紹介した。


　具体的な作業工程は，「プリコネR」のハーフアニバーサリーで登場したキャラクター「ネネカ」の事例で紹介された。
　コンテ作成前の打ち合わせでは，まずプランナーから示された演出プランをもとに，「どこからどこまでをカットインで見せるか」「SD演出とどう関連性を持たせるか」「ユニオンバースト全体を通して，どんな色感・方向性にするか」といった全体の共通イメージを作り出す。

　ネネカの場合，プランナーによる演出プランは「自身のホログラムを生成し，それを実体化させてコピーを作成し戦う」という内容だったので，コピーを作成するまでの過程をカットインアニメにすることになった。さらに，演出プランに沿って「デジタル的な表現」と「コピーを作成」をメインに据え，ネネカ独自の演出を加えた。そして演出からカットインアニメまでの全体的な色味を決めて，イメージが固まったところでコンテの作成に入った。


　カットインアニメのコンテは，ビデオコンテ形式で作成される。こうすることで，実際の尺感や動きといった完成形が想像しやすくなり，演出の方向性がブレなくなる点で優れているとのこと。


　コンテの作成では3つ以上の案を出し，その中からもっともキャラクター性の出ているものを選択した。ネネカの場合，非常に多くの案が出たそうだが，セッションではその中からA案，B案，C案の3つが紹介された。
　最終的には「チート能力を感じさせるデジタル的なエフェクトやモチーフ」「ネネカのイラストにあるクリスタルからヒントを得た，万華鏡のような演出」「SD演出パートへ向けた期待感が高い」という理由で，C案が選ばれた。


　“万華鏡のような演出”は，コンテ作成中にディレクターから提案されたアイデアを膨らませたものとのこと。このように，モチーフや演出のアイデアは，作業者が提出したものに，プランナーやディレクターのフィードバックを反映させて肉付けしていくという。

　さらにSD演出にも万華鏡モチーフを入れ，カットインアニメとの関連性を作っていく。また，「プリコネR」は左から右に向かって進んでいくゲームなので，カットインアニメのラストは基本的に右に流れるようにしている


　工藤氏はこのコンテ工程の役割を，「共通のイメージを確立することで，ユニオンバーストを1つの世界観にまとめる」とした。

　原画の作成では，まずコンテに沿ってカットインアニメの魅力の肝となるキャラクターの作画を行う。上記のとおり，カットインアニメはパーツアニメの手法を用いて制作されるため，原画と原画の間はツールで補完できる。したがって原画は4〜7枚と，通常のテレビアニメより少ない。これにより，細部へのこだわりとスピードの両立を達成できるという。


　原画の作業工程では，1人で仕上げまで担当することもあれば，ほかの人が仕上げだけを担当することもあるそうだ。このように，スタッフが柔軟に動ける環境を作ることは，ゲーム開発のスピード感にもつながっている。


　作画監修では，テレビアニメのノウハウを採用した。「プリコネR」のストーリーアニメの設定資料を参考に，キャラの魅力を損なわないために，「キャラに合った表情をしているか」「デザインに間違いはないか」といったチェックを行っている。
　本作のキャラクターはそれぞれ違う形をしているため，ほんの数ミリの瞼の線の太さやハイライトの入り方にまで，細心の注意を払っているそうだ。


　そして，あとの工程で重要となるパーツ分けを行う。パーツ分けはコンテを参考に原画を10〜20のパーツに分けて，動かしたときに腕に隠れていた胴体が描かれていないといった後戻りが起こらないようチェックする。


　この原画工程の効果は，「原画枚数を節約することで，クオリティを高く保ったまま量産する」ことだという。

　アニメーションの工程では，エフェクトや背景の作成も合わせて行う。そのため「メッシュ機能が優秀で柔軟なアニメーション表現が可能」「撮影作業で使用するため，ツール変更のロスをなくす」という理由から，「Adobe After Effects」が使われているそうだ。

　この工程では，まず完成した原画のパーツを使ってモーション付けを行う。具体的には原画を取り込み，アップや引き，左右移動などの全体のカメラワークを付けて，パーツアニメを追加していく。


　モーション作業中，とくに注意するのが視線誘導だ。カットインアニメはわずか2秒しかないので，動きが速すぎると何をしているのか分からなくなる。そこで，顔や武器など目立つ部分の動きを見やすくするなどの工夫が必要になってくる。
　またパーツが機械的に動いている感じを軽減するため，動きの変化に幅をつけて，よりアニメに近い表現にしているそうだ。


　続いて，エフェクトの制作を行う。ネネカの場合は「デジタルなテクスチャ」や「万華鏡」というモチーフがあったため，それに沿って素材をAdobe After Effectsで制作する。
　キャラクターイラストにクリスタルの破片が散りばめられているのをヒントに，背景がひび割れるような演出にしたり，ホログラムのような演出からコピーを生成させたりと，キキャラクターの特性から考えたエフェクト作りをしていく。


　「プリコネR」のカットインアニメでは，手描きのエフェクトも多く使用されている。これはアニメらしさを表現するためで，メインのエフェクトはできるだけ手描きで制作するようにしており，3D的なパーティクル表現は，あくまでもエッセンスとして取り入れているそうだ。
　とくに武器のエフェクトは，長く目に留まるような作画で視認性を高めている。エフェクトの消え方も，ただ透明になるのではなく，細かく散らす，ちぎれて細くなるなどの表現で見栄えを良くしている。


　工藤氏は以上をまとめて，アニメーション工程で大切なこととして「分かりやすさとつながりを重視する」「よりテレビアニメのような見た目の演出をする」「キャラクター性を重視した演出をする」の3つを挙げた。

　最後に行うのが撮影だ。この工程で色味や画面全体のエフェクトの調整，キャラクター線画のブラッシュアップを行い，テレビアニメのような映像感を作り出す。また，撮影で特殊な表現を加えることもある。例えば，海のシーンで逆光表現とレンズフレアを加えたり，キャラクターの動きに合わせて丸や三角などの図形が動くモーショングラフィックと呼ばれる手法を使ったりしている。

カットイン表現における新たな試み

　「プリコネR」では，「プリンセスフォーム」でのユニオンバースト発動時に特殊なカットインアニメが入る。プリンセスフォームの演出を企画するにあたっては，「従来のカットインよりも豪華に！　よりアニメらしく！」というコンセプトが掲げられた，そのため，システム面からカットインアニメを大きく見直すことになったそうだ。

　プリンセスフォームのカットインアニメを従来のそれと差別化するためとして，まずSD演出とカットインアニメの境界をなくすことが提案された。両者がシームレスに切り替わることで，従来よりも特別感が増し，さらに没入できるようになる。


　一方で課題もあり，従来のシステムのままSD演出とカットインアニメを次々に切り替えると，端末の負荷が大きくなり，ゲームの進行にも影響を与えてしまう。そこで，演出をすべて1つの動画にまとめることになり，これにより，従来の演出にあった制限もなくなったという。


　加えて，従来のカットインアニメよりも豪華さを出すため，背景を含めて大きく動かしてスケールの大きさを表現した。カメラも空間を縦横無尽に動き回り，今までにないアクション性を生み出した。


　さらにカットインアニメとストーリーアニメに一体感をもたらすため，演出や撮影効果をストーリーアニメと同じものにした。これによって，両者に結びつきが生まれ，ゲームはストーリーアニメの再現，ストーリーアニメはゲームの再現と思える環境を作り出した。


　こうした新たな試みの影響は社内の制作体制にもおよんだ。それまではSD演出とカットインアニメはそれぞれ別にコンテを作っていたが，プリンセスフォームでは同じコンテを元に，ほぼ同時に制作が進行したという。


　制作で従来と最も異なるのは，SDのモーションとカットインアニメのモーションをAdobe After Effectsでつなぎ，2つの演出が違和感なくつながるように手描きエフェクトを加えて編集している点だという。


　ただし，この新しい試みには「バトルのスピード感と尺の長さの折り合い」「システムや仕様面での障害」といった課題もあった。
　前者は，テンポ感を重視してカットチェンジをAdobe After Effectsで細かく調整することで解決した。例えばプリンセスコッコロの演出では，SD演出とカットインアニメのつなぎに木を横切るシーンを入れることで自然なカットチェンジを実現した。


　システムや仕様面での障害は，カットインオフ機能が使えない，シャドウと呼ばれる敵のカットインをどうするかといったものだった。これらは，演出の中でキリのいい，盛り上がる部分から再生する，シャドウ用の動画を別途用意する，といったことで解決したそうだ。


　まとめとして工藤氏は，冒頭で述べたカットインアニメの3つの役割に改めて言及し，「『プリコネR』のカットインアニメの目標は，キャラクターの魅力をプレイヤーに届けること」と語って，セッションを締めくくった。

4Gamer「CEDEC 2020」掲載記事一覧

「プリンセスコネクト！Re:Dive」公式サイト

「プリンセスコネクト！Re:Dive」ダウンロードページ

「プリンセスコネクト！Re:Dive」ダウンロードページ