Live2D AfterEffectsプラグインについての色々な話

Live2D_AE連携について
この記事は[AfterEffects Advent Calendar 2016](http://qiita.com/advent-calendar/2016/aftereffects)の20日目の記事です。

# はじめに

“[Live2D After Effects plugin](http://sites.cybernoids.jp/cubism2/tools/ae-plug-in)”とは、公式ページより
> Adobe After Effects でLive2Dモデルを扱うことができるようになるプラグインです。
プラグインが対応するAfter Effectsのバージョンは、CC(2015.3)、CC(2015)、CC(2014)、CC(12.0)、CS6 です。
AMD社グラフィックボード(Radeon,FirePro etc)搭載機器による本プラグイン使用は推奨しておりません。

昨今ゲーム界隈を中心としてLive2Dの使用事例が増えており、自分の2016年はそれなりの数の案件をLive2D pluginと共に行った。ちなみにやった仕事の内容はゲームのCM、web用PV等になる。

この記事では自分がLive2D pluginを使用し、分かった事、AEとの連携、やった事などを提示していく内容になっている。
ただ、自分は「Live2D自体をほぼ知らない」という状態であり、一応Live2Dのチュートリアルを行った程度の知識しかない。なので基本的にAEユーザとしての視点でこの記事を記させてもらう。

また、実際のLive2Dデータを扱った映像制作では、一つのプロジェクトを
**Live2Dデータ作成チーム（以下Live2D班)　→　AE班（自分）**
という流れで映像を制作しており、Live2D班が作成したデータをサーバでやり取りし制作を行った。つまり自分はLive2Dデータの作成には関わっておらず、Live2D班とAE班で明確に作業の内容を分けて制作を行っていた。

その際に思ったのが、このプラグインは「**ワークフローをしっかり構築、理解していないと危ないかもしれない**」という事だった。その点についても書いていきたいと思う。



# 前提として

「**このプラグインを使用する、ということは『映像』を作ること**」という前提を最初に理解したい。
これは「AEからLive2Dへとデータをエクスポートは出来ない」からであり、作業した結果はAVI、QT等の映像データとなって出力され人の目に触れることになる
「そんなの当ったり前ジャーン」な話だが、ワークフローを考慮する上でこれをしっかりと頭に入れておきたい。

![alt](http://live2d.sakura.ne.jp/l2d/wp/wp-content/themes/Live2D/images/products/cubism_about3_jp_2.png)
公式ページのワークフロー概念図
# 最初に結論

**「キャラクターを『演出』した映像を制作したい」ならばプラグインを使用するべき**
そこまで過度な演出しない、凝ったことをしないならばプラグインを使用しない方がスマートなワークフローになる。
Live2DとAEの連携はどこにでも炎上の胞果がある。気をつけたい。

# 基本的なメリット
## ・アニメーションの調整をAEで出来る

このプラグインを使用することでLive2D上で作成されたアニメーションデータ（デフォーム情報）をAE上でエディット出来る。ちなみに制御はキーフレームで、制御値はLive2Dで設定した範囲になる(0.0～1.0など）。
このpluginの基本使用目的でもある。
![live2d_param.jpg](https://qiita-image-store.s3.amazonaws.com/0/150949/d097f584-cff3-5d08-b674-c94eeb4eab39.jpeg)
プラグインを使用しAEへとLive2Dデータを読み込んだ状態


「Live2Dで出来ることをAEでわざわざする必要あるの？」という質問には以下が代表的なメリットとなる


1. カメラの動き、シーンの編集など『タイミング』を扱う作業で、製作者の任意のタイミングへとキャラクターのアニメーションを調整できる（ざっくり言うと「アニメーションのスロー、早回し」が容易に行える）
2. シーンにより適したアニメーションへ調整出来る
3. 思いついた演出をAE上で作成出来る（まばたきの回数を増やす、など）

上記の要求にこのプラグインを使用しない場合は、修正要項としてLive2D班へと戻しが発生することになる。この**戻しをかなり少なくすることが出来る**、というのもこのプラグインを使用するメリットになる。
これらをLive2D上で行う（修正要項に答える）となっても、Live2D上でAEのシーンを確認する方法があまり無く（プレビュー映像を重ねるぐらいか）タイミング、アニメーションの修正コストが増していく。

実際の業務でもかなりアニメーションタイミングをAE上で調整した。
表情、髪の揺れ、指の表情など、キャラクターを魅力的に演出する様々な要素をAE側で調整できるのは素晴らしいことだと思う。
また、クライアントの意向によりアニメーション修正、演出変更など行うことは多々発生するが、軽度の修正ならばLive2D班へと戻さずAE上で行える（実際によくあった）。Live2D班とAE班の修正やり取りの回数を削減出来るので、両者が各々の作業に集中できるので、チームのワークフローが円滑になるのを見て「あぁこの状況は結構いいな」と思った。

大体の映像制作者はわがままであり「自分の望む演出を限りなく行いたい」という渇望があると思う。だがその要求を満たすためにLive2D班への負荷が高まるのは望むところではない。多少自分への負荷が増えてでも望む演出を叶えたい、という映像屋にもオススメしたい。
![L2D_unitychan--A_zoomSmile 2_01.gif](https://qiita-image-store.s3.amazonaws.com/0/150949/bb55b2c7-664b-6670-3956-0718dc1e2745.gif)  ![L2D_unitychan--A_zoomSmile 2_03.gif](https://qiita-image-store.s3.amazonaws.com/0/150949/85744044-e144-93f5-e19b-a0594b912f42.gif)

非常に分かり辛いが腕を曲げる際のタイミングを調整している。２フレの調整をLive2D班に戻すのか戻さないのか


## データ容量の節約

このプラグインを使用するにはLive2Dで作成された「moc」「texture」、またはそれらの情報がまとまった「json」が必要になる。これらのデータをLive2D班からAE班へ提供し、AEでプラグインを使用しキャラクターデータを読み込むことになる。
当たり前だが、Live2Dの「作業データ」はLive2Dから出力する「映像データ」よりもデータサイズが少なくなる。基本、重いより軽い方がいい。また作業データだけならばgit的なバージョン管理も行いやすくなる。

- 映像ソースの場合 : 1～2GB
- 作業データの場合 : 10～20MB

おおよその値だが、このぐらいになると思われる

また、映像データのやり取りでありがちな「あ、ここだけ間違ってる」的な状況も、映像出力（レンダリング）をしないで作業データの更新だけで済むようになる。体験的な話で言うと、これはかなりの時間の節約になった。

実際の業務では、フェイスアップにも耐えられるようにかなりの高解像度で制作を行っていた(8000pxぐらいだった記憶）。この高解像度データを映像ソースでやり取りはかなりストレスになるので、Live2D作業データのやり取りだけで済んだのは、Live2D班、AE班どちらにとってもかなり助かった。



# 基本的なデメリット
## AEオペレータの負担が増える

「Live2Dで行うはずだった作業をAEで行う」というのは単純にAEでの作業が増えることになる。
難しいところで、案件終盤にはよく「こんなことならこのplugin使わなきゃよかった！」と叫んでたレベルで作業が増えた。
でも「この子のアニメーション調整したいのん！表情を俺の思うがままに無表情から笑顔へ片目だけはうっすらと開いてて口はちょい開きをこのタイミングで出したいのん！！」という欲望も自分の中にガッツリとある。

AE班の負荷を増やすか、Live2D班の負荷を増やすか、「**調整、修正をどちらがメインでやるのか**」をしっかりと考えないと即座に炎上する。



## 動作が多少重い


AEで行うLive2Dアニメーションエディットは、やはり通常のLive2Dでオペレートするよりも重くなる。アニメーションを調整しようとするとキーフレーム編集がメインになるが、1/4画質でもキツイ瞬間が多々あった。ネイティブではない環境でデータを扱っているので、これはもうしょうがない。

またAEのUIにLive2DのUIを載せるのはそもそもアンタッチャブルなので、タイムラインがえらいことになる。
Live2D班に軽い思いつきで「髪を制御できるポイント増やしてくれないかなー  :kissing_smiling_eyes:」とか伝えたら、髪だけで制御パラメータが山積みになって「うわぁ　なんだか凄いことになっちゃったぞ:sweat_smile:」となった。
軽い調整ならAEでも行えるが、がっつり「AEでアニメーション作ろう！」というのはちょっと夢語りマンかと。

あと作業が進むに連れ、AEPのファイル保存にかかる時間が長くなっていく。わりと洒落にならない勢いで増える。適当にプロジェクトを作っていくと自動保存のタイミングでコーヒーを入れに行けるかもしれない。

## デメリット3、セットアップの修正はLive2Dオペレータに戻さないとダメ　

**根本的なLive2Dアニメーションの修正はLive2Dへと戻さないと行えない。**
キャラクターを「もっと右を向かせたい」とか「こういう表情が欲しい」などの要求にはAEだけでは厳しい。
この点で躓くと「だったら最初からLive2Dで全部やった方がよくないでしょうか」とワークフローの失敗が見えてくる。
これについては、

- Live2Dでのセットアップ時点で「キャラクターが崩壊するレベル」のパラメータ範囲を設定してもらう
- 実際にシーンで行うアニメーションを事前に共有しておく

などを定めておくと幾らか発生を防げると思う。
特に事前の情報共有はとても大事で、アニメーションの目的、演出意図をしっかりと共有しないといけない。映像演出を行う者が演出意図を伝えられないようだと、そもそものプロジェクト自体が破綻する。

だが、実際の案件中でもこのLive2D班へのセットアップ戻しはそれなりの数で発生してしまった。様々な要因があるが、これを根本的に解決するのは難しい。精進したい。



# AEとの連携について

これより案件で実際にやったテクニックの幾つかをざっくりと書いていく。スーパーざっくり。


## モーションブラー

どうやらLive2D単体ではモーションブラーが出来ないらしいので、AE上で”ReelSmart Motion Blur”でモーションブラーを追加した。
「ジャンプ」や「弓を構える」等のアクションにモーションブラーを適用することで、アニメーションをよりリッチに演出できる

## エクスプレッションを付加
AEでLive2Dパラメータをキーフレームで制御出来る ＝ エクスプレッションで制御できる
実際案件ではガッツリとしたエクスプレッションを使用しなかったが、いくつかのアニメーションでwiggleなどを使用した。
Live2Dにエクスプレッションを使用できる、というのは割と嬉しい人がいるのではないだろうか
![WS000046.JPG](https://qiita-image-store.s3.amazonaws.com/0/150949/2698d182-2746-39c8-4daf-45261276e374.jpeg)
エクスプレッションを追加した図
![L2D_unitychan--A_zoomSmile 6.gif](https://qiita-image-store.s3.amazonaws.com/0/150949/14e42960-01b2-44b8-6d61-85b93a6dce5c.gif)
全エクスプレッション制御ユニティちゃん(wiggle)



## パーツ分けのオススメ

AEに読み込む際、１人のキャラクターを「髪」「腕」「顔」などパーツに分けた複数のファイルを個別に読み込みパーツを分けた（複数レイヤーにした）
現在のLive2D AEプラグイン最新バージョンだと**「パーツの不透明度を設定できる」**ようになっているので、より簡単にパーツを分けられるようになっている。神アップデート。すごい、半年前にあったら僕泣かなかった。

このパーツ分けによって「**顔にかかる髪のシャドウ**」や、「**体にかかる腕のシャドウ**」などを動的にAEで生成出来るようになる（ライトでシャドウを生成したり、パーツを黒で塗りつぶしたりとやり方は色々あると思う）
自分ではかなり満足度が高い演出を制作できた。やはり「光と影」がこの手のアニメーション演出ではキモになる。
![L2D_unitychan--A_zoomSmile 4 [f0050](1).jpg](https://qiita-image-store.s3.amazonaws.com/0/150949/7ab37fc4-6a4b-6655-dd4e-fb6aee8789d6.jpeg)
こういう影などもすぐ作成出来る。しかもLive2Dアニメーションに同期するのでマスクキーフレームなどは必要無い。

他にパーツを分けて行った演出として、

- 腕パーツだけ3DのZ値を変更しパースを利かしたアクションシーン
- パーツごとにZ値を変えてparticular等の3Dプラグインとの組み合わせ

など多々に渡って使用した。

あと、巨大感、奥行き、空気感などを感じさせる演出を行いたい場合もパーツのうまい分け方、配置がキモになる。
現在はプラグインアップデートによりAE上でパーツ分けが行えるようになった。思うままにLive2Dデータを使えるのはやはり神アップデートと言わざるをえない。

## ディストーションエフェクト（パペット、歪み）使用

Live2Dプラグインでは「Live2Dで設定した値以上にはアニメーション出来ない」ので、値をオーバーするアニメーションをしたい場合はLive2D上でセッテイングし直さなければならない。（上記のデメリットでも書いた）

このような修正をLive2D班へとお願いすることはどうしても案件中に発生してしまうのだが、合わせてこの時によく発生したのが「**自分がやりたいアニメーション**」をうまくLive2D班へと伝えきれず、実現したいアニメーションへと近づく修正になり切れなかった、という事だった。複数回の修正を必要としてしまう。
「グアー！とかしたい」などの擬音ではダメなのだ。

というわけでパペット、歪みなどの**ディストーションエフェクト**を使用し、無理やり「こういうのをしたい」というアニメーション理想図を映像として出力しLive2D班へと伝え始めた。
これはイメージの共有にとても役立ったのだが、途中から「はて、待てよ」と実際の映像へと積極的にディストーションエフェクトを使い始めた
例えば、

- 迫力を伝えるアクションシーンなどで腕を無理やりな位置まで歪ませる
- カメラへと振り向くアニメーションで、体のライン、顔のラインを強制的に変化させる
- 巨大なドラゴンの咆哮する口を「より閉じた状態からより大きく開かせる」

など。「それやり過ぎでは？」という絵面でも、モーションブラーや１フレームだけ、などの要素で自然に見える映像になった。

基本的にディストーションを適用した演出は「アクションシーン」が多く、よりキャラクターの「動き、感情を誇張したい」という事を実現するために使用した。ディストーションエフェクトはLive2Dアニメーションを「簡易に」誇張することが出来るのでトライ・アンド・エラーもやりやすく、よりよい演出へと制作する作業を効率的に行えた。


## テクスチャをエディットしてマット作成、ターゲット作成

Live2Dのキャラクターは、パーツごとに分けられたテクスチャデータで構成されている
![texture_00.jpg](https://qiita-image-store.s3.amazonaws.com/0/150949/90469c6c-4889-e911-66b5-b09e51ca9d40.jpeg)
[サンプルデータ ユニティちゃんより](http://sites.cybernoids.jp/cubism2/samples)テクスチャ展開図


このテクスチャを複製、エディットを行いキャラクターの別レイヤーとしてAEに読み込むことで

- 必要な部分のマットデータを作成
- ターゲットトラッカーを作成

などを簡易に作成できるようになる
![texture_03.jpg](https://qiita-image-store.s3.amazonaws.com/0/150949/c4234aa0-9c7f-7a88-7f9a-50d3fc453a40.jpeg)
分かり辛いけど目のマットを用意した図


実際には、キャラクターで必要な箇所（目、服の一部など）と必要ない箇所とを明確に分けたデータを用意することで必要なマットを作成出来る。
作成したマットデータはparticularのlayerEmitterに使用したり、DisplacementMapなどにも利用できるのだが、一番大事なことは、**Live2Dのアニメーションをエディットするのに合わせテクスチャもモーフする**ので「**完璧なマットデータ**」を生成することが出来る

ターゲットトラッカーについても同様で、剣を降るキャラクターがいたとして、剣の先端のみのテクスチャを作成することで、トラッキングが容易になる。
![L2D_unitychan--_mir.gif](https://qiita-image-store.s3.amazonaws.com/0/150949/f8e310b5-b36f-17f5-6954-8630b4a1f5a7.gif)
目の部分のアニメーションに沿ったマットが作成されている

エフェクトやカラコレなど、AEを使用するにあたっての様々なことで応用できると思う。案件でも多用している。


# 最後に

Live2Dの素晴らしいアニメーション作成機能をAEと組み合わせることによって、演出の可能性がかなり広がっている。AE単体ではどうしても出来なかった様々なことが可能になっている。
そこまで聞くと夢のツールだが、書いてきたように「ワークフロー」をしっかりと見据えておかないといとも簡単にバーニング案件と化す。
メリット、デメリットをしっかりと理解し、より人を魅了できる演出を作成していければ、と今年の総括としてまとめたいと思う。

また、中の人が「プラグインについてのフィードバックが少ない」と仰っているというのを風の便りでお聞きしていたこともこの記事を書いた理由の一つとなっている。
素晴らしいプラグインだと思うので利用している者として制作側へフィードバックを少しでも送れたら幸い。でももっと言いたいことがあります。近いうちにどこかでまた発表できれば、と思う。

明日は中条さんの「Stardust考察」になります。
中条さん、今夜もまたoverwatchでお会いしましょう。


###使用したサンプルデータ
・[ユニティちゃん](http://sites.cybernoids.jp/cubism2/samples) ©Unity Technologies Japan/UCL