Adobe After EffectsでLive2Dモデルを動かしたい時の使い方

2021-09-152025-08-10

Live2DとAfter Effectsでアニメーションを作っている、さらえみ(@saraemiii)です。

Live2Dで作成したモデルはAdobe After Effectsでも操作できるようになります。

映像制作に使われるAfter Effectsに組み込むことで、キャラクターアニメーションとして様々な表現が可能になります。

Adobe After EffectsでLive2Dモデルを操作する手順

After Effectsでコントロールしたサンプル動画

CGやアニメーションなど映像制作のプロが使う代表的なソフトがAdobe After Effectsです。

専用プラグインを使うことでLive2DキャラクターをAfter Effectsでも動かす事ができます。

操作するまでの手順

専用プラグインをAfter Effectsへインストール
Live2Dで組み込み用ファイルの書き出し
After Effectsへ組み込み用ファイルを読み込み
専用コントローラーで操作可能に

Live2Dモデルを購入するなどで取得した場合は、組み込み用ファイルもセットで付属している事もあります。

Adobe After Effectsを使ったこと無い人はこちらへ

After Effectsの基本的な操作方法を簡単に解説しています。

Live2Dモデルの作り方はこちら

私が1からLive2Dモデルを作成した手順をまとめています。

専用プラグインをダウンロード

After Effects用プラグインをダウンロードし、After Effectsにインストールします。

Live2D公式からAfter Effectsプラグインをダウンロード

「Live2D Cubism Editor」のライセンス認証が出来ていないとエラーが出ます。

PRO版ライセンスは個人・企業の規模により料金が異なります。

月額・年額を選べるので使いたい時だけ購入することも可能です。

学生の方には学割もあります。

ライセンス購入は公式サイトへ

Live2D [PR]

2Dイラストの質感を保ったまま動かせるソフトウェア｜Live2D Cubism イラストを立体的に動かせるLive2Dは、Vtuberやゲーム映像など、個人作品から商業作品まで幅広く利用可能。PRO版機能を42日間無料で試せるトライアル版もあります。

PRO版の試用期間 “トライアル版” でもAfter Effects用プラグインを利用できます。

ライセンスが取得できたら「Live2D Cubism Editor」を起動しライセンス認証へ進みます。

Live2Dモデルの「組込み用ファイル」を “After Effects用” に書き出し

モデルを自作した人向けの工程です。

After Effects組み込みに必要なファイルを書き出します。

組み込み用データ（moc3など一式）を持っている方は次の工程へ飛ぶ

テクスチャアトラスを整理

「Live2D Cubism Editor」を起動し、モデルを読み込みます。

「Live2D Cubism Editor」モデリング画面の上部にある「テクスチャアトラス」作成ボタンを押します。

新規作成用ダイアログが出るので、名称・サイズ等入力します。

名称は英数字で、この後も共通の名称を使います。

使用している全パーツが並んだものが表示されます。

右端は未配置パーツが表示されます。

モデリングに使用しているのに未配置に表示されていたら、ドラッグしてテクスチャ上に持っていきます。(プルダウンから他の表示も選べます)

パーツが上図のように、くっつきすぎて重なっていると不具合に繋がります。

「自動レイアウト」の隣にある「マージン」pxを大きい値に設定して「自動レイアウト」ボタンを押します。

↑これでマージンを広げた状態になりました。

重なりが無く、使用パーツが揃ってる状態が出来たら、OKを押してテクスチャアトラスを書き出します。

ダイアログで設定した名称で「○○○.2048」(.数値部分はテクスチャサイズによって変わります)というフォルダに「○○○.png」が書き出されます。

○○○部分は、これ以降でも使用するので半角英数字で付けます。

moc3データを書き出す

「ファイル」→「組込み用ファイル書き出し」→「moc3ファイル書き出し」を選択します。

書き出しバージョンは4.0、3.3、3.0のどれでも問題ないです。

ただし、アップデートされた直後の最新バージョンはエラーが出るケースがあります。

エラーが出て読み込めない場合には旧バージョンで書き出し直しましょう。

書き出し設定は「表示補助ファイル(cdi3.json)を書き出す」にチェックを入れてOKを押します。

このチェックをしないと、After Effects上で日本語表記にならない等の影響が出ます。

「○○○.2048」(「.数値」部分はテクスチャサイズによって変わります)フォルダ…テクスチャアトラスデータ(png)が入っている
「○○○.cdi3.json」
「○○○.moc3」
「○○○.model3.json」

以上のようなデータが用意できました。(○○○は共通した任意の名前)

After Effectsへ「組込み用ファイル（○○○.model3.json）」を読み込み

ここからは「組込み用ファイル」を持っている人共通の工程です。

専用プラグインをインストールしたAfter Effectsを起動します。

「○○○.model3.json」データを、After Effectsのプロジェクトパネルにドラッグして読み込ませます。

プロジェクトパネルには、自動的に「○○○.model3.json.cae」データに変換されます。

稀にプロジェクトパネル上で「○○○.model3.json」になる場合もあります。

この場合上手くいかなくなるので、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」内か、タイムラインのエフェクト内の「パラメータ」「パーツ」にある、時計マークを押すと、タイムライン上の青いバーのあるタイミングにキーポイントが打たれます。

キーポイントを作るとタイムラインの編集ができるようになります。

青いバーを好きなタイミングに移動させ「Cubism Controller」のコントロールを動かすと、新たに◆四角が打たれて動きを作ることができます。

タイムライン左端の◆四角を押してから「Cubism Controller」のコントロールを動かしても同様にできます。

これを繰り返してLive2Dキャラクターのアニメーションを付けていきます。

「Live2D Cubism Editor」内で作成したアニメーションも、「○○○.motion3.json」をLive2Dで書き出し、After Effectsのエフェクトコントロール内にある「Motion」→「Import」から読み込む事で再現できます。

Live2D内でアニメーションを作る方法はこちらのページに記載しています

「○○○.model3.json.cae」レイヤーはコピーも出来るので、一部表示・非表示してAfter Effects特有のエフェクトをかけることも出来ます。

Adobe After EffectsでLive2Dが使えると表現の幅がグッと広がる！

これでLive2DとAfter Effectsを使って他では出来ないような表現もできるようになり、OPやMVなどに使える機能だと思います。

ぜひいろんな場面で活用してください！