Live2Dでどうやって絵を動かすのかを説明します!!

皆さん、本日も閲覧ありがとうございます。
山本電卓と申します。

アニメーション制作ソフトLive2D Cubism(ライブツーディー キュービズム)の説明文として

「2Dイラストをシームレスに動かして立体的なアニメーションにする」

というような文面が使われていますが、正直これだけではよく分からないですよね。

そこで今回はLive2Dでどのように絵(イラスト)を立体的に動かすことができるのかを説明させていただきますのでよろしくお願いいたします
( `・∀・´)ノ!

※こちらはLive2Dでのキャラクターモデル制作方法を紹介するのではなく、絵を動かす仕組みを紹介するものです。


▼イラストを動かせるアニメーションソフト【Live2D Cubism】

お得なクーポン付きで販売中【Live2D】

参考記事:Live2Dを銀行振込で購入する方法!全手順を紹介します!

Live2Dは絵を変形させてアニメーションを制作するソフト!

Live2Dは読み込みしたパーツ別の絵(画像)を変形・回転・移動といった編集を行い、その形状を登録することで「編集前と編集後の間の形状」を自動で繋げてくれて動いているように表示するソフトになります。

以下から実際の手順を述べていきますね。

まずはペイントソフトで描くパーツを制作

まず最初に、CLIP STUDIO PAINTなどのペイントソフトでキャラクターモデルなど動かしたい絵を制作していきます。

クリスタでLive2Dモデルのパーツを制作


この時、動かすパーツを細かく分けて制作します。

例えば目だけでも「上まつ毛」「横まつ毛」「下まつ毛」「白目」「黒目」「ハイライト」など細かくパーツ分けしていきます。

Live2Dモデルの目のパーツ分け
ポイント

このパーツ分けは必ずしなければならないものでもありませんが、パーツを細かく分けるほどよりスムーズな動きを付けることができます。


各パーツの制作時には線画用と色塗り用などレイヤーを分けてもいいですが、最終的には結合して1パーツにつき1枚のレイヤーにまとめておきます。

Live2Dモデルパーツとレイヤー
注意

制作するパーツは本来見えない部分や他の絵が重なっている部分もしっかり描いておきます

Live2Dモデルのパーツ制作(黒目・歯)


これはキャラクターを動かした時に見えてなかった部分も見えるようになるからですね。

Live2Dモデルのパーツ(全体図)


各パーツのレイヤーが出来上がりましたらその制作データを1つのPSDデータでレイヤー構成が残る形で書き出ししましょう。

※各パーツごとにPSDデータを作成するわけではありません。

Live2Dの「パラメータ」に読み込んだパーツの変形を登録するとアニメーションになる!

制作したPSDデータをLive2Dに読み込みさせ、パーツごとのメッシュの作成やテクスチャアトラス編集といった準備作業を行ってから各パーツを変形・回転・移動の作業を行っていきます。

※「メッシュ」や「テクスチャアトラス編集」はほぼ自動で行うことができます。

Live2D「メッシュ」「テクスチャアトラス編集」


Live2Dの編集画面には「パラメータ」パレットがあり、ここに目の開閉や全体の角度といった項目が並んでいます。

※自分で新規作成も可能

Live2Dのパラメータパレット


この各パラメータにパーツと連携させた「キー」を作成し、この「キー」にカーソルを合わせてパーツを変形させるとその場所に変形させたパーツの形状を登録することができます。

※後から何回でも修正可能です。

Live2Dのパラメータキー(3点)
画像は3点キー
ポイント

「キー」への登録は各パーツごとに行います。

例えば目の動きを登録する場合、「上まつ毛」「横まつ毛」「下まつ毛」「白目」「黒目」「ハイライト」それぞれで「キー」へ形状を登録させます。


パーツの変形は主に以下の3つの方法で行います。


●変形パス
パーツ上に「変形パス」を設置し、それを動かすことでパーツを変形させます。

Live2Dの変形パス


●ワープデフォーマー
パーツをゆがみ変形させることができます。
ワープデフォーマーを使用する際はこのワープデフォーマーをパラメータのキーと連携します。

Live2Dのワープデフォーマー


●回転デフォーマー
パーツを傾けることができます。
回転でフォーマーを使用する際はこの回転でフォーマーをパラメータのキーと連携します。

※画像のように、回転時には角度も表示されます。

Live2Dの回転デフォーマー


キーに形状を登録しますとキーとキーの間の形状をLive2Dが自動で生成してくれ、アニメーション表現をできるようになるわけです。

※「シームレス」=「つなぎ目のない」とはこういう意味を指していたわけです。

Live2Dのパラメータとキー
Live2Dのパラメータとモデルの動き


ではもう少し具体的な例で説明しましょう。

【Live2D制作例①】目の開閉

まずはLive2Dで「左目の上まつ毛」パーツを選択し、パラメータの「左目の開閉」に2点(もしくは3点)キーを作成して連携させます。

※目の「開」と「閉」だけを作成したい場合は2点で、中間の形状も作成したい場合は3点を追加します。

Live2Dのパラメータ「左目開閉」
画像は2点追加


そして左端のキーにカーソルを合わせている状態で「左目の上まつ毛」パーツに変形パスを設置して目を閉じた形状に変形させます。

Live2Dで目の開閉を作成
MEMO

変形途中の形状が動きとして表示されるわけではないので納得いく形状になるまでじっくり変形させて大丈夫です◎


これで「左目の開閉」パラメータの左端のキーに「上まつ毛の目を閉じた形状」を登録することができました。

Live2Dで目の開閉を作成


こういった作業を他の左目のパーツでも繰り返し行います。

ポイント

Live2Dには「クリッピング」機能があります。

例えば黒目パーツに白目パーツへのクリッピングを設定しますと、黒目パーツは白目パーツの範囲内しか表示されなくなります。

※手順としては白目パーツのID(Live2Dが自動で作成)を黒目の「クリッピング」の欄に入力するだけです。


このクリッピング機能を利用することで白目だけ変形させれば黒目の表示範囲も同時に定めることができますので黒目の変形作業は不要になります。


「左目の開閉」パラメータの左端のキーに全ての左目パーツの閉じた形状を登録させますと、パラメータのカーソルを右に移動させれば目が開き、左に移動させれば目が閉じた状態になります。

Live2Dで「左目の開閉」


この時、左右のキーとキーの間の形状、つまり開いている目から閉じている目の間の形状をLive2Dが自動で生成してくれますので、目を閉じるアニメーションを表現できるようになるわけですね。

MEMO

片方の目の動きを作成してからコピー・反転して反対側の目に配置するという方法もありますが、それはLive2Dの仕様をしっかり把握していないとなかなか難しいかと思います。

Live2Dの制作画面ではグリッド(格子状のガイド線)を表示させることができますので、操作・仕様に慣れるまではそのグリッドを目安に左右対象になるようにそれぞれ別で動きを作成する方がやりやすいかと思います。

【Live2D制作例②】顔の向き

顔のパーツも「輪郭」「前髪」「横髪」「後ろ髪」「目」「眉」「鼻」「口」と分けていることで各パーツの配置・バランスを工夫すれば顔を左右や上下、さらに斜め方向にまで向ける表現も可能になります。

※「目」や「口」はそれぞれでパーツ分けされていますが、まとめて操作することもできます。

Live2Dでモデルを斜め横に向かせる
顔を向かって右に向ける場合
ポイント

この時に違和感のない配置ができるかどうかで作品の出来が変わってきます。


こちらも同様にLive2Dの機能で「各方向を向いている顔」と「正面を向いている顔」の間の形状も自動生成してくれますので実際にキャラクターが顔を動かしているような立体的な表現もできるわけです。

Live2Dの物理演算でさらにリアルな表現ができる

Live2Dの凄いところは、「物理演算」という機能でキャラクターモデルの動きをリアルに表現することができるところです。

他の動きを作成するのと同じように「呼吸の上下運動」や「髪・服の揺れ」の動きもパラメータに登録します。

Live2Dのパラメータ「髪揺れ 横」


そして物理演算設定にて揺れの内容を設定することで、じっとしていても常に呼吸しているように動き、キャラクターが向きを変えるとそれに合わせて髪や服が揺れるようになります。

Live2D「物理演算」(横髪揺れ)

Live2Dの物理演算(呼吸・髪揺れ)

Live2D形式のアニメーションデータが完成

上記のようにキャラクターモデルに各動きを作成して保存しますとLive2D形式(.cmo3)のデータが作成されます。

Live2D形式ファイル(.cmo3)


このデータに作成した動きが保存されていますのでここから他のソフトで使用できるデータ形式に書き出しして使用するといった形になります。

今回制作したキャラクターモデル

私もまだまだ初心者ですが、今回制作したキャラクターモデルがこちらになります。

Live2Dキャラクターモデル


※こちらはLive2Dで自動再生させたものを録画したものです。


(出来はともかく)ちゃんとキャラクターが動いてくれて、さらに物理演算機能で呼吸の揺れや動いた時の髪の揺れも表現できているのが分かるかと思います。

Live2Dで絵に動きを付けた後にできること

Live2Dでキャラクターモデルを制作してVtuberに

Live2Dで動くキャラクターモデルを制作しましたら、そのデータを利用してVtuber活動を行えます。


実際、Live2D利用者の7割以上がVtuberとしての動画配信用モデルを制作するために使用しているようです。

Live2Dの利用割合
Live2D公式ページより
MEMO


Live2Dは「パラメータ」パレットに初めから目や口、体などの動きを登録する項目が用意されていることからも分かるように、キャラクターモデルが作成しやすい構成になっています。

※もちろんキャラクターモデル以外も制作できます。

Vtuber活動に必要なその他のソフト・機材

Live2Dはキャラクターを制作するソフトですので、Vtuberとして配信を行うには身体の動きに合わせてモデルを動かすためのソフトが必要です。

有名なのがVTube Studioですね。

VTube Studioはゲーム配信プラットフォームのSteamにて無料で利用できるLive2Dモデル専用のソフトです。

キャラクターモデルを身体の動きに合わせるためには身体の動きを読み込むWEBカメラも必要ですが、このVTube Studioはスマホのカメラを利用することもできます。

Live2Dでアニメーションを制作する

Live2Dは基本的にキャラクターモデルを制作するソフトなのですが、制作したモデルを使用してアニメーションを制作することもできます。

Live2D「Model」「Animation」


Live2Dのアニメーション制作画面にも「パラメータ」が表示されており、タイムライン上(キーフレーム)に任意の動きを記録させていくことでモデルを動かしていくというアニメーションを制作していくことができます。

Live2Dでアニメーション制作


記録したキーフレームとキーフレームの間の動きもモデル制作時と同じようにLive2Dが自動で生成してくれます。


本来、アニメーションを制作する場合、少しずつ動いていく絵を1枚1枚作成し、それを並べていくことで動きを表現するのですが、Live2Dではモデルを1つ制作しておけば(制作した範囲内の動きですが)パラメータを操作するだけで簡単にモデルを動かすアニメーションを制作することができるのです。

MEMO

Live2Dはパラメータを利用する通常の「Animation」と、モデルを直接「変形・回転・移動」といった編集を行ってキーフレームに動きを記録させる「From Animation」の2種類があります。

Live2Dでキャラクターモデルを制作する際の注意点

Live2Dに読み込んだパーツに描かれていない部分は作れない

Live2Dでは先述の通り、各パーツを変形・回転・移動させて前後左右の立体的な動きを表現することができます。

これは読み込んだ各パーツをうまく編集・操作して表現させています。

例えば顔の向きでは正面を向いた輪郭と各顔のパーツの形状・位置で斜め方向を向いているように表現させることができるのですが、このパーツでは真横の顔は表現できません

なぜなら読み込んだパーツの中に横顔の絵が描かれたものがないからです。

同様に正面の胴体パーツでは胴体の側面は描かれていないため、真横を向いた胴体も表現できません。


真横の絵のパーツも制作してうまく組み合わせれば真横を向いた表現も可能かもしれませんが、より複雑な制作工程が必要になるかと思います。

まずはLive2Dの無料トライアル版を利用しよう!

Live2Dは有料ソフトですが、購入前に動作や使い心地を試せる「無料トライアル版」があります。

Live2D無料トライアル版のダウンロード方法と始め方!!


まずはこちらで実際にLive2Dを操作してみましょう◎


Live2Dの使い方に関してはYouTubeでも様々なクリエイター様が紹介動画を上げてますので参考にしてみてください。

※Live2D公式のマニュアルもありますが、個人的にはYouTubeの方が分かりやすかったです。


それではここまで閲覧ありがとうございました!
お疲れ様でした!!


▼イラストを動かせるアニメーションソフト【Live2D Cubism】

お得なクーポン付きで販売中【Live2D】

参考記事:Live2Dを銀行振込で購入する方法!全手順を紹介します!


▼動画視聴型お絵描き講座【Palmie(パルミー)

パルミー「Live2D入門講座」

▶講座について詳しく見る