
2019年11月25日にLive2Dのクリエイター向けイベントである「alive2019」が開催されました。今回のイベントではLive2Dが擁する映像制作チーム「Live2D Creative Studio」による最新映像作品「ヒーローベータ」の技術的な解説が行われました。

「ヒーローベータ」は、イラストレーターである南野あき氏の原画の作風を活かし、そのままのタッチで映像化したものです。架空の映画予告風CMとして制作された作品ですので本編は存在していませんが、その世界設定やキャラクターの背景などは丁寧に用意されています。ちなみに、インサイドでは本作に関わるインタビューを掲載しています。こちらも合わせてどうぞ。
インタビュー:Live2Dの次なる挑戦「ヒーローベータ」は如何にして作られたか
解説では、制作手法の解説として監督の雲井聖司氏が登壇。Live2D Creative Studioが過去に公開した「The LampMan」「Beyond Creation」両作にも関わられています。

まずは南野あき氏のイラストを映像として再解釈する、という工程からはじまります。特徴的な「もやもやしたテクスチャ」にはどのような効果があるのかを分析し、これらは質感とハイライトの両側面を持つものと解釈したそうです。

映像として表現する上で、この「もやもやしたテクスチャ」をどのように動かすべきなのかは、イラストだけでは判断できません。そこで、テクスチャを固定(キャラが動いても追従しない)にするか、キャラクターに沿わせるかでそれぞれ叩き台を作って比較しています。

要素の分析と動かし方を決定した後は、Live2D上で作業を行うための分割を定義していきます。質感のベースとなるテクスチャや、陰影の役割を担うテクスチャなど、それぞれが部品となっていくわけです。

そうした分割や名付け方などがマニュアル化されスタッフの間で共有されます。これらを組み合わせてモデルが出来上がることになりますが、ここで新たな機能である「マスクオブジェクト」が紹介されました。

「マスクオブジェクト」は、Live2D Creative Studioが映画制作を目指して将来的に導入する予定である開発中の機能です。指定した複数のパーツを組み合わせシルエットを作り、その範囲に対するマスクを掛けられるというもの。

シルエットの組み合わせには複数の方法が用意されており、これによって複雑な形状のマスクにも対応できるようになりました。この機能はマスクそのものをオブジェクトとして扱えるため、管理が容易になります。
この他にも、アートパスの内側領域にメッシュを生成できる「フィルメッシュ」、エディタ内で直接色替えを行える「グラデーションマップ」、連番画像をパラメータに割り当てアニメーションさせる「動画アートメッシュ」といった新機能が紹介されました。
シーン毎のこだわりを紹介

つづけて「ヒーローベータ」をシーン毎に切り分けて、どのような工夫が盛り込まれたのかが解説されました。最初のシーンは主人公が画面奥の方へ吸い込まれていくような表現となります。
主人公モデルが素早く縮小するので目立たなくなってしまいます。ここではモデルの周囲に光るハイライトを太く設定し、シルエットを強調することで解消したそうです。

次のシーンでは(ほぼ)同一人物であるパラレルワールドのヒロインふたりが互い違いに映し出されます。それぞれ異なるテクスチャをマスクオブジェクトで適用させることで、イラストレーターのタッチを再現しつつ映像化しています。

また、マントの内側に動画アートメッシュを適用し、ハニカム構造の模様がきらめく表現を実現させていました。

パラレルワールドの主人公ふたりが重なり合う表現のシーンで使われているモデルは、見えない部分も丁寧に作成されていました。

ヒロインが高速で駆け抜けるシーンでは、明暗の強い背景が特徴となっています。背景の明るさに対応する「暗い状態のモデル」と「明るい状態のモデル」をそれぞれ用意し、適宜切り替えて対応したそうです。

遠くから手前に飛び込んでくるようなシーンでは、距離によるサイズ感に応じて情報量をコントロールしています。こういったシーンの場合、単純な拡大縮小だけでは不自然なものとなってしまいますが、Live2Dにおいては変形を行うことで、同じモデルから対応が可能であるようです。

公開された作品ではカットされている場面とのことでしたが、口や指の細かい動きもこだわって制作されているとのこと。映像では極めて短いシーンですので、非常に丁寧に作られていたことがわかります。

不思議な背景の中にある橋、駆け抜ける主人公のシーンではUnity上に様々なパーツを配置して、まさに空間を演出していました。キャラクターの「焦って走っている感じ」も、とても丁寧な工程が組まれています。

両手両足を単純に分割するだけではなく、状況に応じたパーツ分けが行われています。脚だけでも腰から足首まで関節ごとに分割し、複雑な動きに対応していました。

強い光が射し込むシーンでは「影の中の色」「光の中の色」のモデルをそれぞれ用意し、マスク処理を掛けて表現されていました。マスクのシルエットを編集するだけで、光の差し込み具合を調整可能となります。

ヒロインが涙を見せるシーンでは、南野あき氏の原画を基にした場面として、最もプレッシャーを感じた部分とのことです。涙そのものも原画から取り込んだモデルとして作成されています。

Live2Dでは鬼門とされる「重なり合い」の表現として、主人公とヒロインが手を握るシーンが挙げられました。作業工程としてはとても地道なものではありますが「アートパス」と「フィルメッシュ」を駆使することであらゆる場面に対応できるモデルが作成可能なのだそうです。

「アートパス」を活用すれば、線をきれいな状態に維持しつつ大きな変形が可能となります。映像シーンでは手を握るというパターンでしか見ることは叶いませんが、このモデルから様々なシーンを制作できそうですね。

電車内でこちらに向かって微笑みかけるヒロインのシーンは、僅かな動きでありながら強い印象を与えるものとなっています。光が射し込む表現のため、やはり「影の中」と「光の中」でそれぞれモデルを用意されていました。

圧巻という他はありませんが、このシーンにおけるヒロインの髪パーツの分割は20房以上にもわたっています。微笑みかける時、わずかに顔を揺らす程度ではありますが、こうした徹底的な分割により、繊細な表現を可能としているのです。

主人公とヒロインが大きな武器を持ち上げて発射するシーンでは、大きな動作と配色の変更など、複数のモデルが絡み合う中での難しい作業となっています。作業量に対応するため、モデルをしっかりと分けて進められたようです。

アップ時とロング(引き)時でもそれぞれモデルが用意されています。ロング時は主人公とヒロインをひとつのモデルとして作成し、動きを合わせられることを優先したそうです。

更に、武器を発射した状態のモデルも作成されています。「グラデーションマップ」機能によって直接的に色替えを行った例として示されました。

美しく広い空間に佇む二人が、様々な昆虫を見渡すシーンでは遠近感の強い表現となっています。昆虫たちは3Dモデルを作成して配置しているそうです。

空間の表現のため、こちらもUnity上にそれぞれのモデルを配置して作成されています。昆虫のデザイン自体も南野あき氏によるものなのだとか。

ヒロインが振り向く最後のシーンでは「マスクオブジェクト」の効果的な例が紹介されました。顔の動きに応じて髪が揺れる時、毛先の分かれを「マスクオブジェクト」で簡単に表現できるそうです。毛先を分かれさせるように作成するというよりは、毛の一部を削るマスク用のシルエットを用意するというアプローチになっています。
制作体制にも工夫を

制作体制の構築にあたって行われた工夫は「カラースクリプトの作成」「作業のマニュアル化」「ウォークスルー制度の実施」の3点が紹介されました。
編集部注:カラースクリプトとは、シーン毎にライティングや配色などを設定することを指す。プログラミング言語的な意味でのスクリプトではなく、あくまでも本格的な映像制作の前に行われる取り決めのようなもの。カラースクリプトはシーン毎に作成されるが、その上で各シーンの感情表現などと関連付けしつつ調整を行っていく。ピクサーなどでも取り入れられている手法。

カラースクリプトを作成したことで、作業者による齟齬を解消し意識統一を進められたようです。これがベースとなることで、コミュニケーションも円滑になるわけですね。

クオリティの水準を保つ目的でマニュアルの作成にも取り組まれました。過去の作品に比べて作業量やモデル数が膨大となり必要性が高まったようです。

ブラシの指定だけに留まらず、レイヤーのタグ管理についてもマニュアルを用意しています。スプレッドシートからプルダウンメニューを選択してタグを生成できる仕組みを構築することで、スペルミスや表記ゆれを防止できたそうです。

「ウォークスルー制度」とは、監修者の側から作業者のデスクを個々に巡回する制度です。作業者と監修者で相談できる場を設けるという要望を受け開始されました。

監修者にとって「ウォークスルー制度」のメリットは、全体の進行ペースを直接確認できること、問題へ素早く対応できる、制作中の軌道修正を行える、エディタの改善に役立てられるといった点が挙げられました。
特に全体の進行ペースについては、報告を待つ仕組みのままでは「0か1か」となりやすく、どうしても後手に回ってしまいがちになるのだそうです。

また作業者にとってもメリットは大きく、問題点の解決が早い、監修者との齟齬を解消できる、まとめていくつかの問題を解決できる、といった点が挙げられました。
「聞きに来てくれる」からこそ質問しやすい、というのは想像しやすいですね。カラースクリプト等の整備が進んだとしても、感覚的な差を完全になくすことはできません。そうした差が大きくなってしまう前にこまかく確認できる体制が整っているというのは、作業者にとっても有益なものと言えるでしょう。

Live2Dにとってのフラグシップ的な作品とも言える「ヒーローベータ」は、更に進化したLive2Dの最先端が詰まっています。作品はテレビCMや劇場広告としても公開されました。公式サイトでも作品が公開されていますので、最先端のLive2Dアニメーション表現をチェックしましょう!