Top

[Live2D]喜怒哀楽、表情差分の作り方

初心者さん
初心者さん

Live2Dモデルで表情を切り替えられるようにしたいです

アニメ塗りマン
アニメ塗りマン

表情差分の切り替えは簡単に行えます

キーバインドすることで表情を切り替えるLive2dモデルは人気があります。

表情切り替えは難しいイメージがありますが簡単に作ることができます。

この記事を読むと・Live2Dモデルの表情差分切り替え方法がわかります。

こんな方におすすめ!・表情差分を作りたい
・いろんな表情があるモデルを作りたい

[Live2D]簡単な表情差分の作り方

 

背景を描くのが苦手な方におすすめの
著作権フリー背景素材集を見る

表情差分のモデルはこちら

次の動画のように表情を切り替えながら顔を動かすモデルを作っていきます。

 

表情差分用のパーツを作る

最初にジト目や悲しいといった表情パーツをクリスタ等で作ります。

よくまぶたパーツをメッシュで動かして表情を切り替えるモデルがありますが、あの方法は難しく、作業時間がかかります。

なので表情パーツを別途つくりそれに切り替える方式をとったほうがミスが少なく作業が楽です。

ペイントソフトでの作業

ジト目パーツ live2d 表情差分
悲しいパーツ live2d 表情差分
笑顔パーツ live2d 表情差分

まず表情パーツをそれぞれ作ります、その後live2dでパーツを読み込みます。

Live2Dでの作業

今から説明するやり方は制限が多いフリー版だとできません、PRO版を用意してください。

pro版はクーポンを利用して安く手に入れることができます。

 

最初、表情差分を作る前にLive2Dモデルの動きを作り終えておくようにします。

最後まで動きを作ってからでないと修正が必要になった時、どこを直せばよいか分からなくなるからです。

live2d 表情差分

最低限このような動きになるまでモデルを作っておきます。

 

ジト目用パラメータを追加する

live2d 表情差分

まずジト目パーツの切り替えを作ります、ジト目用のパラメータを追加します。

 

live2d 表情差分

そしてキーフォーム編集で

  • 0.0
  • 0.45もしくは0.5
  • 0.5もしくは0.55
  • 1.0

の位置にキーを入れます。

0と1だけキーを入力するやり方でも大丈夫ですが、それだとフェードイン、アウトしたみたいに変化してしまいます。

そこでこのように0.45から0.5に変わったときに変化するようにキーを入力することで違和感を少なくしています。

 

live2d 表情差分

キーを入れたら赤い枠の部分の不透明度を0%、青い枠の部分の不透明度を100%にします。

こうすることで赤い枠から青い枠に移動した時、不透明度が0から100になるのでオンオフのように切り替えることができます。(下のGIFのようになります)

live2d 表情差分

 

よくある間違った作り方

live2d 表情差分

ジト目パーツのオンオフはできたので次は目ワープデフォーマをオンオフさせます。

普通に考えると目のワープデフォーマを赤い枠では不透明度100%、青い枠で不透明度0%にすればよいと考えがちですが。

するとこのように顔を動かした時、おかしくなるんですね。

これはジト目パーツの切り替えに目のワープデフォーマを指定したのですが、このワープデフォーマは角度Xと角度Yにもキーを入力しています。

目の不透明度0%は角度Xと角度Yの数値が0の時に設定したので角度X、角度Yの数値が変化すると不透明度が100%になってしまうんです。

要はこのやり方だとバグったようになります、ですが次で説明する方法で簡単にこの問題を解決できるんです。

正しいやり方

live2d 表情差分

ジト目のオンオフ用のワープデフォーマを新規で作れば問題は解決します。

まず、ジト目パーツオンオフ用のワープデフォーマを作ります。

 

live2d 表情差分

このように右目ワープデフォーマの上にジト目用ワープデフォーマを作ります。

 

live2d 表情差分

同じように左目もジト目用ワープデフォーマを作ります。

 

live2d 表情差分

先ほど作ったワープデフォーマを選択してジト目の不透明度を設定します。

こうすることで顔を動かしてもジト目がオンの状態になります。

 

顔を動かしてもジト目が動くようにする

live2d 表情差分

今の状態だとジト目が動かないので、ジト目顔xy用ワープデフォーマを作ります。

 

live2d 表情差分

次にジト目用顔xyワープデフォーマを選んで、角度x角度yに動きを付けます。

こうすることでジト目のワープデフォーマを動かすことができ、顔を動かしてもジト目が動いてくれます。

 

別の表情差分パーツも追加で作れる

新しくワープデフォーマを作れば別の表情差分も設定できます。

 

live2d 表情差分

今度は悲しい目用パラメータを作り、悲しいの不透明度を設定します。

 

live2d 表情差分

その後、悲しい目用ワープデフォーマを作ります。

 

live2d 表情差分

このようになると思います。

 

live2d 表情差分

そして先ほどのジト目と同じように新しく作ったワープデフォーマで不透明度を設定し、悲しい目顔xy用ワープデフォーマを作って角度x角度yに動きをつければ悲しい目の状態で顔を動かすことができます。

ワープデフォーマを追加することで表情差分の切り替えができるので、このやり方を使えば腕パーツや衣装の切り替えもできると思います。

まとめ

  • 表情差分はパーツ切り替え方式が簡単に作れる
  • 新しくワープデフォーマを作り、不透明度を変える