Live2DとAfter Effectsでアニメーションを作っている、さらえみ(@saraemiii)です。
Live2Dで作成したモデルはAdobe After Effectsでも操作できるようになります。
映像制作に使われるAfter Effectsに組み込むことで、キャラクターアニメーションとして様々な表現が可能になります。
Adobe After EffectsでLive2Dモデルを操作する手順
CGやアニメーションなど映像制作のプロが使う代表的なソフトがAdobe After Effectsです。
操作するまでの手順
- 専用プラグインをAfter Effectsへインストール
- Live2Dで組み込み用ファイルの書き出し
- After Effectsへ組み込み用ファイルを読み込み
- 専用コントローラーで操作可能に
Adobe After Effectsを使ったこと無い人はこちら
After Effectsの基本的な操作方法を簡単に解説しています。
Live2Dモデルの作り方はこちら
私が1からLive2Dモデルを作成した手順をまとめています。
作らずにLive2DモデルをGETしたい方は…
Live2Dモデルは、下記のようなサービスなら個人でも気軽にクリエイターから購入できます。
TVCM放映でおなじみ★ココナラ｜Live2Dモデル作りも安心して取引できる！
専用プラグインをダウンロード
After Effects用プラグインをダウンロードし、After Effectsにインストールします。
Live2D公式からAfter Effectsプラグインをダウンロード
PRO版ライセンスは個人・企業の規模により料金が異なります。
月額・年額を選べるので使いたい時だけ購入することも可能です。
ライセンス取得はこちらの公式サイトへ
PRO版の試用期間でもAfter Effects用プラグインを利用できます。
ライセンス取得したら「Live2D Cubism Editor」を起動しライセンス認証へ進みます。
Vtuberを作る方法は3Dだったり色々とありますが、イラストの良さや雰囲気を壊さず動かしたいならLive2D。イラストが描ける人には扱いやすいソフトです。
Live2Dモデルの「組込み用ファイル」を書き出し
After Effects組み込みに必要なファイルを書き出します。
購入するなどしてLive2Dモデルの組み込み用ファイル（moc3ファイル等一式）を持っている方は下にある次の工程へお進みください。
テクスチャアトラスを整理
「Live2D Cubism Editor」を起動し、モデルを読み込みます。
「Live2D Cubism Editor」モデリング画面の上部にある「テクスチャアトラス」作成ボタンを押します。
新規作成用ダイアログが出るので、名称・サイズ等入力します。
使用している全パーツが並んだものが表示されます。
右端は未配置パーツが表示されます。
モデリングに使用しているのに未配置に表示されていたら、ドラッグしてテクスチャ上に持っていきます。(プルダウンから他の表示も選べます)
パーツが上図のように、くっつきすぎて重なっていると不具合に繋がります。
「自動レイアウト」の隣にある「マージン」pxを大きい値に設定して「自動レイアウト」ボタンを押します。
↑これでマージンを広げた状態になりました。
重なりが無く、使用パーツが揃ってる状態が出来たら、OKを押してテクスチャアトラスを書き出します。
ダイアログで設定した名称で「○○○.2048」(.数値部分はテクスチャサイズによって変わります)というフォルダに「○○○.png」が書き出されます。
moc3データを書き出す
「ファイル」→「組込み用ファイル書き出し」→「moc3ファイル書き出し」を選択します。
書き出しバージョンは4.0、3.3、3.0のどれでも問題ないです。
ただし、アップデートされた直後の最新バージョンはエラーが出るケースがあります。
エラーが出て読み込めない場合には旧バージョンで書き出し直しましょう。
書き出し設定は「表示補助ファイル(cdi3.json)を書き出す」にチェックを入れてOKを押します。
- 「○○○.2048」(「.数値」部分はテクスチャサイズによって変わります)フォルダ…テクスチャアトラスデータ(png)が入っている
- 「○○○.cdi3.json」
- 「○○○.moc3」
- 「○○○.model3.json」
以上のようなデータが用意できました。(○○○は共通した任意の名前)
After Effectsへ「組込み用ファイル（○○○.model3.json）」を読み込み
専用プラグインをインストールしたAfter Effectsを起動します。
「○○○.model3.json」データを、After Effectsのプロジェクトパネルにドラッグして読み込ませます。
プロジェクトパネルには、自動的に「○○○.model3.json.cae」データに変換されます。
この場合上手くいかなくなるので、After Effectsを再起動させるなどで「○○○.model3.json.cae」に読めるよう対応します。
変換された「○○○.model3.json.cae」をプロジェクトパネルからタイムラインへドラッグします。
タイムラインに出現したレイヤーを選択して、「エフェクト」→「Live2D」→「Live2D Cubism Renderer」を選択。
すると、Live2Dキャラクターがコンポジションパネルに出現します。
「組込み用ファイル（○○○.model3.json）」が読み込めない場合
- After Effectsを再起動する
- 「組込み用ファイル（○○○.model3.json）」を書き出す時の「書き出しバージョン」を4.0以前に設定する
だいたいこのどちらかで解決します。
Cubism Controllerを使ってLive2Dキャラを操作
After Effects上のLive2D専用コントローラーを呼び出して、キャラクターを動かします。
上図のようにタイムラインのレイヤー→エフェクトを開くと「Open」ボタンが出現します。
「Open」ボタンを押すと「Cubism Controller」ウィンドウが開きます。
Live2Dで設定したパラメータ/パーツが表示されます。
さらえみLive2Dから組込み用ファイル「moc3ファイル書き出し」の際に「表示補助ファイル(cdi3.json)を書き出す」にチェックしていないと、このように英語名で崩れた表記になってしまうので注意が必要です。
ここから動画を作るには「Cubism Controller」内か、タイムラインのエフェクト内の「パラメータ」「パーツ」にある、時計マークを押すと、タイムライン上の青いバーのあるタイミングにキーポイントが打たれます。
青いバーを好きなタイミングに移動させ「Cubism Controller」のコントロールを動かすと、新たに◆四角が打たれて動きを作ることができます。
これを繰り返してLive2Dキャラクターのアニメーションを付けていきます。
「Live2D Cubism Editor」内で作成したアニメーションも、「○○○.motion3.json」をLive2Dで書き出し、After Effectsのエフェクトコントロール内にある「Motion」→「Import」から読み込む事で再現できます。
Live2D内でアニメーションを作る方法はこちらのページに記載しています
これでLive2DとAfter Effectsを使って他では出来ないような表現もできるようになります。
Live2Dモデルを他の方法で動かすには？
VTuberのように動かす「トラッキングソフト」比較
Vtuberのようにカメラ連動で動かすために必要な「トラッキングソフト」を紹介。
それぞれ特徴があるので、自分の目的や環境にあったソフトを比較して選べます。
Live2Dソフト内でアニメーションを作る方法
Live2Dモデルを作成する「Live2D Cubism Editor」内でアニメーションを作ることができます。
ここで作ったキャラクターアニメは、映像制作用にはもちろんVTuberのリアクション設定にも使えます。
