『プリコネR』アニメ撮影におけるテクニカルアーティストの役割。作業効率を高めるツール作成の事例

 2021年11月13日(土)から14日(日)までの2日間、Cygames単独の技術カンファレンス「Cygames Tech Conference」が行われた。カンファレンスはCygames公式YouTubeチャンネルでLive配信され、後日アーカイブ化も予定されている。

 本稿では、11月14日(日)に実施されたセッション「『プリンセスコネクト!Re:Dive』アニメ撮影におけるテクニカルアーティストの役割~最高のアニメRPGを作るための自動化制作事例~」をレポートする。

【講演者】

横山 暁 氏
デザイナー部 テクニカルアーティストチーム
2018年、アニメーション制作会社退社後、Cygamesにテクニカルアーティストとして合流。
テクニカルアーティスト本部に所属しTAとして様々なプロジェクトの制作支援を行う。
プリンセスコネクト!Re:Diveでは、ツール開発に関わったあと、自らも撮影業務に参加。

 

 

 

アニメ制作における「撮影」とは

 前提としてスマホ向けRPG『プリンセスコネクト!Re:Dive』(『プリコネR』)は、ゲームのメインストーリーを始めとした各所にアニメーションが挿入されているのが特徴だ。このセッションでは、そんなアニメ制作に関して、“撮影”と呼ばれる工程の自動化について説明が行われた。

 まず、Cygamesにおけるテクニカルアーティストチームの役割を確認。

 テクニカルアーティスト(TA)は、高品質なグラフィックを作成するための環境を提供することを目的とし、「ビジュアル表現の研究/提案」、「パイプライン構築」、そして「効率化」の3つが主な業務となる。

 TAとして在籍しているスタッフは、TA本部所属と各プロジェクト専属の2種類に分類でき、ツールの制作と依頼をやり取りする関係にあるそうだ。

 横山氏はTA本部に所属し、ツール制作依頼に対応している。また、前職での経験を生かし実業務にも参加しているという。『プリコネ』ではアニメ制作に関する「撮影」および、撮影に関係するパイプラインの整備、ツールの制作を担当。

 『プリコネR』では、毎月中旬に更新されるメインストーリー、月末に更新されるストーリーイベントがあり、どちらもショートアニメが挿入される。また、ストーリーイベントは毎回新しいエンディングアニメーションが用意され、スチルイラストもアニメと同様の手法が採られている。

▲メインストーリーなどで挿入されるショートアニメ。
▲ストーリーイベントのエンディング例1。
▲ストーリーイベントのエンディング例2。イベントごとに雰囲気が全く違うのがわかる。
▲アニメ制作と同じ手法で作成された一枚絵。

 上記動画などを視聴すると、「アニメRPG」だけあってアニメーションムービーに力を入れていることが感じ取れる。では、横山氏が担当しているアニメ制作における「撮影」とは、具体的にどの工程になるのだろうか。

 横山氏は、アニメの手法で制作されているスチルイラストを中心に、その工程を説明。

 アニメ制作は主に「ラフ」→「レイアウト」→「原画」→「クリンナップ」→「仕上げ」→「撮影」の順で行われる。本セッションの軸となる「撮影」は工程における最後のセクションになるようだ。ここまでが完了するとアニメ(映像)の場合は編集作業に移るが、スチルイラストの場合はここで完成となる。

▲リテイクなどが発生した場合は、問題の工程から再度進行するため、必然的に「撮影」も再び行うことになる。

 そもそも「撮影」とは、キャラクターのセルや背景をひとつにまとめ、実際にユーザーが観る映像に仕上げる作業のことを指す。素材に大きく手を加え、より魅力的なものにするのがこのセクションの役割だ。

▲撮影処理前のイラストは素材の色のままとなり、キャラクターや料理などがフラットな状態になっている。背景もはっきりと見える。
▲撮影処理後のイラストは光の効果が取り入れられ、背景のぼかしや各種グラデーションによって、立体的な印象となっている。このスチルイラストの場合、料理にも特殊効果が反映されている。

 なおこれらの作業は現在、ソフトウェア上で行うのが一般的となっているが、デジタル化が進む前は背景とセルを重ね合わせ、実際のカメラで撮影していたことから今でも「撮影」と呼ばれているのだとか。

▲『プリコネR』では「Adobe After Effects」で撮影処理が行われている。

 そんな「撮影」だが、すべてが社内制作という訳ではなく、外部パートナーとも協力した制作体制になっているという。現在では、バトル中に再生される必殺技のカットインアニメーションに加え、メインストーリーやストーリーイベントで再生されるショートアニメなどが外部パートナーと共に制作を進めているそうだ。

    

 一方で、まばたき・口パクが表示されるスチルやエンディングアニメーションは社内制作となっている。

 前述の通り、「撮影」セクションはリテイクが発生した際は素材が大幅に変更になることもあり、都度まとめなおす必要のある工程となる。横山氏曰く、1カットあたりに数回リテイクが発生することもあるという。当然スケジュールも限られているため、その中でクオリティを追求するためには、効率化が非常に重要になってくる。

     

4つのツールでキャラ処理の時間が3分の1に

 ここからは『プリコネR』における撮影の自動化についての話に。自動化に着手したのは、サービス開始直後のタイミングとなった。

 自動化を行った経緯には、サービス開始直後、社内で撮影をしようという流れとなったものの、当時の担当者はひとりしかおらず、制作手法も慣れたものではなかったため、ツールによる撮影業務自動化の需要があったという。そこで、撮影作業の「キャラ処理」と「スチル制作」で、時間が掛かっている部分の自動化を図っていったようだ。

 「キャラ処理」は、スムージング処理などキャラクターのセルに適用する処理を行う作業のこと。キャラ処理をどの程度入れるかは作品によるが、『プリコネR』ではキャラクターの立ち絵に寄ったタッチになるように調整されている。

▲キャラ処理によって半透明部分の処理も適用され、全体的にも立体感が増している。
▲ゲーム内で使用されている立ち絵(画像左)。

 そして、キャラ処理の際には処理の対象ごとにマスクで分けて処理を入れていくのだが、これが非常に時間の掛かるものとなっている。キャラ処理のために分けられたマスクの種類だけでも、40以上あるためだ。

▲『プリコネR』ではほぼ全ての色に対して何らかの処理を入れているため、細かいレイヤー分けが行われている。

 これらのマスク分けには、「カラーモデル」と呼ばれる“色の設計図”が使用されている。カラーモデルは設定ごとにあるため、その種類も数多く存在する。

 撮影に入る前のセルには、このカラーモデルをもとにキャラクターの色が塗られていくことになる。

▲実際のカラーモデル。撮影の際には、この画像の中にある四角形の部分から色を取得し、マスクとして分け、各部分に処理を追加している。

 キャラ処理に使われるカラーモデルはイラストごとに異なる。衣装はもちろん、武器や髪飾りなど細かい部分も別のカラーモデルとして存在するため、キャラ処理でも都度異なる処理を行う必要がある。

   

 さらには、登場するシーンによっても異なるカラーモデルになることがある。室内の暗い空間など、シチュエーションに合わせた処理が必要になる。同じく暗いシーンでも、「ギルドハウスランタン受け」と「ギルドハウス夜」のように、カラーモデルが分けられる場合がある。

▲「ギルドハウスランタン受け」が使われるシーンでは、右方向からランタンの光を受け、暗くはありつつも暖かみのある表現になっている。
▲「ギルドハウス夜」のシーンでは、前の例とは異なり暖色はなく、寒色系の処理が施されている。同じようなシーンでも、光などの表現に差異があれば、都度新しい処理を適用する必要がある。

 

 これらのキャラ処理にかかる時間を短縮するにあたって、改善すべき課題は以下の3つ。

  • 1キャラクター辺り約3営業日必要だった
    →1キャラでも大量のマスク。外部パートナーとのやり取りも必要
  • 色を取得する作業が何回も発生した
  • 運営の時期に入り制作量が増加した
    →『プリコネR』には50人以上のキャラクターが登場し、新キャラ・新衣装も毎月追加されるため、運営が続くにつれて制作量が増えていた

 そして、この課題を解決するために制作したツールが以下の4つだ。ここからはツールについて、個別に解説。

  • セル色分けツール
    →カラーモデルの色でセルを色ごとに分離するツール
  • パーツマスクまとめツール
    →色の種類によってマスクを作成するツール
  • セル色変換ツール
    →セル色を異なるシーン色に変換する調整レイヤーを作成するツール
  • カラーモデル重複色チェックツール
    →カラーモデル内の重複色を調べるツール

     

セル色分けツール

 「セル色分けツール」は、カラーモデルから自動で色を取得し、マスクを分けるプログラムを作成し、そのマスク分けプログラムを「Adobe After Effects」で使用することでカラーモデルを色ごとで分けることが可能になるというもの。

 カラーモデルには、パーツごとに塗る色を指定したカラーボックスが存在する。今まではこのカラーボックスから手動でひとつずつ取得してマスク化していたが、1キャラクターあたり100色以上のカラーがあり、非常に大変な作業となっていた。

▲カラーボックス(スライド左)。

 そこで、色を自動で取得するために着目したのが、カラーボックスの性質だという。

 カラーボックスは、色ごとに決まったサイズと色の線で作られたボックスを組み合わせる形で構成されている。ボックスの位置で色の役割が決まっているため、ボックスを認識さえ出来れば、どの色がどの役割を担っているかがわかり、自動で色を取得できるようになる。

 カラーボックスを認識させる方法の一例としては、画像認識の手法としても比較的単純なテンプレートマッチングが挙げられた。

 カラーボックスの形や色は決まっているため、この手法でボックスの位置を調べることができる。画像形式はBMP、プログラミング言語はPythonを選び、テンプレートマッチングで完全一致となるボックスを見つける方法で検索を行っている。

▲カラーボックスに使われている枠の形と色(青・ピンク)のパターン。この条件を用いることで、枠線の色のみをピックアップすると、枠部分の画像が得られる仕組み。
▲枠線のみをピックアップした画像(スライド右)。

    

 しかし、以上の条件だけでは問題がひとつあったという。カラーボックスの多くは組み合わせて構成されているため、ボックスが単一のカラーボックスだった場合、そのほかのカラーボックスも誤認識されてしまうパターンが存在。

 そこでさらに、ボックスから出ている線にも着目。

 実際のカラーボックスには、ボックスからパーツを指し示す線が出ている。複数ボックスで構成されたカラーボックスの場合は、組み合わさったほかのボックスに繋がる線が出ているため、線が2本以上でていると認識できるのに対し、単一ボックスの場合、出ている線はパーツを指し示す一本のみで、2本以上出ることはない。

▲線が出ているポイント(赤丸の部分)。

 そのため、ボックスから出ている線の数を判別するため、テンプレートを1ピクセル分拡張。これにより、はみだした線を認識できるようになり、ボックスの形状を正確に捉えることができるように。

▲単一ボックスには、線が出ていないボックスと、線が出ているボックス8パターンの合計9種をテンプレートに用意。
▲ボックスが2個連結している場合のテンプレート。
▲テンプレートの一覧(スライド右)。3個以上連結したボックスと、上記のボックスを区別することで、正しいボックスを認識できるようになった。

 「セル色分けツール」が一致するボックスを発見すると、該当するボックスに作られたファイル名から含まれる色の種類を計算し、後の処理にも利用しているという。

 ボックスを異なる形にすれば楽に認識をすることも可能だが、今までに使用していたものにも使えるように工夫した結果、この手段が採られているようだ。

▲ボックスは位置によって、どの場面で使用する色かが決まっている。

     

パーツマスクまとめツール

 「パーツマスクまとめツール」は「After Effects」上で、色マスクから部分ごとのパーツをまとめたコンポジションを作成するツール。マスク分けを行った後、ノーマル色のみのマスクを作成したい場合など、特定のニーズに応えたものとなる。

▲左のピンクで囲まれた部分が“服”マスクのノーマル部分。レイヤー名で色の種類を判別できるため、特定の色のみを取得できる。

 マスクレイヤーを複数選択して実行することで、エフェクト名に対応する部分のみを抽出し、別のコンポジションとしてまとめられる。

▲まとめたマスクのコンポジションの中で使用しているエフェクトの状態。

     

セル色変換ツール

 キャラ処理に使うサンプル画像の色を変更する際や、新しく色を変更したいときに使うツールとして、「セル色変換ツール」を用意。

 シーンが変わると使用する色も変わるため、塗り直しの作業が発生するのは前述の通りだが、このツールを使用することで、別のカラーモデルの色に置き換えることができる。

▲スライド左はノーマル色。スライド右はメインストーリー2部OPにおける夜のシーンで使用されている色となる。

 このツールでは、変換前、変換後のカラーモデルを用意して実行することで、セルの色を変換する調整レイヤーが作成される。これにより、色替えのセルが必要になっても、改めて塗り直す手間が省ける。3つ以上のカラーモデルがある場合でも、それぞれ変換することが可能。

   

カラーモデル重複色チェックツール

 カラーモデル内のボックスに同じ色があるかを調べるツール。本来同じ色に設定してはいけない箇所の確認をするために使用するもの。

 カラーモデルの色を取得する手法を応用して生まれたツールで、チェック時間の短縮が可能。また、撮影前に確認できるため、手戻りが発生しにくくなる利点もあり、効率化に成功している。

▲この画像の中にも重複した色が存在するが、一見しただけではどこにあるのかがわかりにくい。
▲同じ色が存在すると、キャラ処理の際に問題が起きる。極端な例だと、「肌」と「服」の中に同じ色が入ってしまった場合、肌用の処理が服にも適用されてしまう。
▲ツールを使用すると、赤い線で繋がれたところが同色となっている。同色になるよう指示された箇所と、同色になってはいけない箇所を一目で判断できるため、非常に効率的。

 ここまでに紹介した4つのツールを導入した結果、キャラ処理1体にかかる制作時間を、なんと従来の3分の1以下の時間に短縮することに成功。

    

自動化とルール整備で「スチル制作」を大幅に効率化

 続いて、「スチル制作」の自動化について。

 まず、スチルとは、ストーリーに挿入される一枚絵のイラストを指す。『プリコネR』では基本的にアニメーション作品と同じ手法で制作され、目パチ・口パクの表現があるものとなっている。

 スチルに登場するキャラクターごとに前述の「キャラ処理」を行うほか、キャラクター以外のセルにもキャラ処理と同じような処理を施す。

▲スライド画像の場合、キャラクター3人と、剣2本が処理の対象となる。

 『プリコネR』のスチル制作には一部、一般的なアニメ制作と異なるところもある。スチルには目パチ・口パクがあるが、その制御は動画としてではなく、ゲームのプログラムで行っている点だ。ただ、このような違いはあるものの、従来のアニメでも行われている自動化フローが可能だったという。

▲連番画像として圧縮されたものが実装される。

 スチル制作の自動化の経緯には、Cygamesに合流した直後の横山氏の働きかけが大きかったという。

 自動化にあたって、主な課題はふたつ。

  • 元々は社内で制作していなかったため、ルールが存在しなかった
  • 既にリリース済の作成方法と作業者の手法が一致せず、作業効率が悪かった

 リリース前はもともと、スチルの制作を外部パートナーと制作していたため、社内で制作することになってからの苦労があったようだ。

 そこでまず、馴染みのアニメ会社と同じ撮影環境を目指していったという。ツール制作も同時に進め、ルールの整備なども並行していったそうだ。また、効率の観点から作業者の手法に合わせた撮影環境を整えることも重要となる。

 ルール統一の例。以前は連番画像の中で目パチ・口パクのコマがバラバラになっていたところを固定化し、ファイルの確認・整理の時間を短縮。

 基本的なルールを定めた後は、「After Effects」周りの自動化へ。「After Effects」では多数のレイヤーを全て読み込み、正しい順番で並べる必要がある。この作業を自動化することで、浮いた時間を撮影作業に充てることができるようになったという。

▲「セル」では、ファイル読み込みを自動で行い、各種素材に必要な処理を載せていく。
▲「背景」ファイルは自動で読み込んだ後、複数のレイヤーを1つにしてグループとして扱うプリコンポーズを行い、bookを順番に並べる。背景処理の際に必要な手順を自動で行うことで時短を図っている。
▲レイアウト・参考ファイルについても、調整しやすい順に並べている。

 納品について、当初はファイル名やフォーマットなど曖昧な部分があったところがあったという。そこで、ツールを経由して保存することで形式を統一。また、レンダリングした画像をSlackの専用チャンネルに自動投稿し、セルのテイクとBGのテイクを記載することで、差し替えミスがないかを確認できるようにしている。

▲保存とレンダリングを同時に行うツール(スライド左)。

    

 これらの取り組みを行ったことで得られた成果は以下の通り。

  • 最新の作業ファイルの確認をすぐに行える体制になった
  • テンプレートの処理の多くをツール化
  • ファイルの命名や納品を自動化

    

日々の実作業からツールの潜在的な需要を探る

 次に、実作業を行うことで作成したツールなど、事例を交えて解説。主に得られたメリットについて、以下のふたつが挙げられるという。

  • 作業者目線で使用を把握することでワークフローの改善点を見つけられる
  • 作業中の雑談に参加することで潜在的なツールの需要がわかる

 実作業を行うことで作業者目線になることができ、効率化可能な部分を発見しやすくなり、アーティストと同じ立場から最新の仕様を把握したり、提案したりできるようになるということだ。当事者としての意識が強まり、良い仕様があれば他のプロジェクトにも応用を利かせやすくなる。

 特に運用型タイトルの場合、日々の作業の中で新しい仕様が生まれるため、ツールを更新する必要がある。その際に把握していることで、スムーズな提案に繋げられるようだ。

 実際に、日々の実作業を行う流れで作成されたツールが以下となる

   

①目パチ口パクプレビュー動画作成ツール
▲目パチ・口パクを表示するタイミングが固定化されたため、そのルールに則って実際のゲーム画面と同様のプレビューが確認できるツールを作成。

    

②表情差分切り取りツール
▲連番画像の出力方法も定まっているため、差分切り取りが可能になった一例。今までは1キャラずつ人間の目で表情を確認し切り取りを行っていたところ、ツールを使用すれば「Photoshop」上で大雑把に表情部分を選択するだけで差分の切り取りを自動で行えるように。
▲最大で作業時間を30分の1にまで短縮できた事例となる。

 また、在宅勤務が増えている昨今ではコミュニケーションの重要性もより増している。横山氏は「実作業を行う際に、同じグループの雑談チャンネルに参加して話し合える環境を整えることでより良い成果を得られる」と語る。

▲『プリコネR』のアニメ撮影チームでは、仕事の話と雑談を同時に行えるチャンネルを用意。
▲TAとしては、ツール作成後のフィードバックが得やすいこともメリットのひとつ。ここでの会話がツール化のきっかけとなった例もあるという。

    

▲全体のまとめ。

 最後に横山氏は「TAはワークフローから細かい部分まで作業者に寄り添ったツール制作を行い、最高のコンテンツを作るための作業時間を確保しています」と語り、「すべては活き活きとしたキャラクターのために行っています」と締めくくった。

 以上、自動化による作業の効率上昇の手法がわかるセッションとなった。

この記事が気に入ったら
いいね ! お願いします

Twitter で
森口 拓海(Takumi Moriguchi)
森口 拓海(Takumi Moriguchi)
雑誌やWEBメディアを中心に記事を執筆。ゲームは雑食で多様なジャンルを好み、業務の延長でアプリ分析も得意。恩のあるゲーム業界に貢献すべく日々情報を発信。

PickUP !

急成長のNextNinjaが全職種積極採用! 代表・山岸氏が本気で求める人材像とは

[AD]飛躍の時を迎えつつあるNextNinjaは今、全力で新たなチャレンジャーを探している。「全職種積極採用」を掲げる組織戦略と、求める人材像とはいかなるものなのか。代表の山岸氏に直接話を聞いた。

Related Articles

リニューアル及び新サイト移行作業につき更新一時停止中

具体的な日時は調整中ですが、リニューアル及び新サイト移行作業が完了した際には、PickUPs!上でもお知らせ致します。またメールマガジンにご登録していただいた方には優先して告知致します。

Stay Connected

TOP STORIES