【Live2D 中級者向け】ブレンドシェイプを用いた口パクの作り方


Live2Dでブレンドシェイプについての記事を色々見てきましたが
パラメータの組み合わせによって起こる崩れなどに関してのものが少なかったので
口パクの作成方法を例にまとめてみました。



:::note info
[ブレンドシェイプの重みの制限設定](https://docs.live2d.com/cubism-editor-manual/limit-settings-for-blend-shape-weights/?locale=ja")
公式のマニュアルはこちらから
:::


# 目次
[1.ブレンドシェイプとは](#1-ブレンドシェイプとは)

[2.メッシュをつくる](#2-メッシュをつくる)

[3.ブレンドシェイプ用パラメータの設定](#3-ブレンドシェイプ用パラメータの設定)

[4.キーフォームの編集](#4-キーフォームの編集)

[5.ブレンドシェイプの重みの制限設定](#5-ブレンドシェイプの重みの制限設定)

[6.まとめ](#6-まとめ)

### 1. ブレンドシェイプとは

そもそもブレンドシェイプってなんやねん、といったところから説明いたしますと
元々ブレンドシェイプとは3Dの畑の言葉です。

ボーンを用いずにメッシュを動かしてアニメーションさせる技法の名称ですが
Live2Dにおいてはとりあえず、簡易差分作成機能 とでも思っておいてください。


### 2. メッシュをつくる
実際に触れてもらったほうがわかりやすい機能かと思うので
口パクの動きをつけるための準備をしていきます。

まずはメッシュの作成から。

※できるだけシンプルなモデルのほうが解説向きかと思いましたので
今回はQiitanにご協力頂きます。

![スクリーンショット 2024-01-12 13.59.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/73daf23b-6cb9-6bb2-6391-d520119f77d7.png)

<br>

口部分のパーツはグルーで線、顔色のベタを張り合わせるような形で作成しています。
ブレンドシェイプについてのまとめにはなりますが、グルーを使ったパーツの接続方法も
GIFで簡単に解説しておきます。

:::note info
[グルー機能とは](https://docs.live2d.com/cubism-editor-manual/glue/")
2つのアートメッシュの頂点同士をバインド（吸着）させる機能になります。
公式のマニュアルはこちらから
:::

<br>
①メッシュ作成
ストロークによるメッシュ割りなど駆使し
メッシュを作成します。

![メッシュの作成.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/95f25bad-493f-4836-9785-9a2c9642ae5d.gif)

<br>

②メッシュのコピー/ペースト
①で作成したメッシュをコピー/ペースト

![メッシュのコピー.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/59be5c08-de1b-f948-d7b2-67b2b9293bd9.gif)

<br>

③メッシュの頂点同士の吸着(バインド)
![バインド.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/d0c4cb2b-2989-472f-4b2a-c639b7ad6c5f.gif)

<br>

④グルーの重みの調整
![グルーツール.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/03dac9f0-c460-cf5c-d692-946f1badb682.gif)
なんだか青ひげみたいになっちゃいました


<br><br><br>



### 3. ブレンドシェイプ用パラメータの設定

準備ができたので、ブレンドシェイプ用のパラメータを作成していきます。
<br><br>

パラメータウィンドウの右下から新規フォルダの作成をクリックします。
![スクリーンショット 2024-01-12 15.46.38-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/98e6c602-6cf7-e22e-3da9-5d937f353d9d.png)


できたフォルダには、口などわかりやすい名前をつけておきましょう。
既存の口パラメータ付近に配置しておくと良いかもです。
![スクリーンショット 2024-01-12 15.46.38-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/53461142-c438-3878-1d68-027ce8e2c0f4.png)

フォルダができたら、ブレンドシェイプを作成していきます。
今回は、『あ、い、う、え、お』の5つの口の形を設定していきます。
<br><br>

パラメータウィンドウ右下(先程フォルダを作成したアイコンの左)にある
＋のマークをクリックします。
<br>
新規パラメータ作成のウィンドウが表示されるので、まずは画像のように
あ　のブレンドシェイプを設定しましょう。
![スクリーンショット 2024-01-12 15.54.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/34ed3a92-4e6a-a5a1-0398-4887fc7079ea.png)


![スクリーンショット 2024-01-12 15.55.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/32b89e38-62b9-37ab-8220-d1ae4c7b3fd9.png)
名前は『あ』、IDは　ParamAとしておきましょう。
<br>
範囲は最小0.0、デフォルト0.0、最大を1.0と設定してください。

<br>
OKをクリックすると、『あ』のブレンドシェイプが作成されます。<br>
同様の手順で、　い、う、え、お　も作成していきます。


![スクリーンショット 2024-01-12 15.46.38-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/d99675ae-208b-9e60-0ee5-720a860a6fe2.png)

:::note warn
IDはそれぞれ、ParamI,ParamU,ParamE,ParamO としてください。
:::


### 4. キーフォームの編集

下準備が完了したので、いよいよブレンドシェイプを用いて
『あ、い、う、え、お』の口の形を作っていきます。

まずは『あ』から。
通常のパラメータ同様、キーの追加をして動きをつけていきます。

変形するパーツを選択したら、

デフォルトの状態▷『あ』の形の口への変形
といった、2点を行き来する動きの設定をしますので、キーの2点追加をクリックします。
![キーの②点追加.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/10ce8ebc-5255-f0de-5533-fead98cf3efe.gif)

![スクリーンショット 2024-01-12 15.46.38-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/3e33410c-392f-6820-70c9-f07f3c0a72dc.png)

『あ』のブレンドシェイプパラメータを1の値へ持っていったときに
画面右下に『ブレンドシェイプを編集可能：あ』の表示があればOKです。
![スクリーンショット 2024-01-12 16.19.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/2ec905a1-37df-b1a4-f5dd-60f5da23814c.png)

<br>
パラメータの設定が完了したら、動きをつけていきます。

『あ』の口なので　大きく開くように動きをつけます。
![あ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/4a0beade-af69-8d02-3e7b-ab458abb4039.gif)

<br><br>

上記の手順で、同じように　『い、う、え、お』も設定していくのですが、ここで注意

:::note alert
編集するブレンドシェイプ以外のパラメータは必ずデフォルト値に戻すこと！
例えば、『う』のブレンドシェイプを編集するとき、それ以外の
『あ、い、え、お』はすべて0の値に置くようにしてください。
複数パラメータがデフォルトから離れた状態で動きをつけると
意図しない変形をしてしまうおそれがあります。
:::

![スクリーンショット 2024-01-15 12.38.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/d7f4b466-f683-eaea-f2da-0aa71e645981.png)

上記のように1項目ずつ編集するようにしてください。
<br><br>
同じ手順ですべてのパラメータを設定します。
複数パラメータを同時に＋値に置いたときに変形の情報が競合して形がおかしくなりますが
そちらの対処方法については次で解説します。


### 5. ブレンドシェイプの重みの制限設定

:::note info
[ブレンドシェイプの重みの制限設定](https://docs.live2d.com/cubism-editor-manual/limit-settings-for-blend-shape-weights/?locale=ja")
ブレンドシェイプ使用時に競合する変形情報を整理するための機能です。
:::

ブレンドシェイプを設定しただけでは、下の画像のように複数パラメータが競合して
形状が崩れてしまいます。
![スクリーンショット 2024-01-15 12.28.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/31b3177a-9018-f789-752d-16a292ac011f.png)

Qiitan...おまえ...前歯が....
<br><br>

というわけで、まずは『あ』のパラメータから調整していきます。
まず上顎の方から。

変形の情報が競合してしまい、形が崩れてしまったパーツたちを選択したら
ブレンドシェイプ『あ』から設定していきます。
選択画面はこのような感じ。
![スクリーンショット 2024-01-15 12.44.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/546e0548-0c59-285e-da8b-83ae0ca5d5e7.png)
上の画像のようにブレンドシェイプで動きをつけたパーツを、まとめて選択することもできます。

:::note warn
口の変形に関わるパーツは念のためすべてまとめて設定しておくと良いでしょう。
:::


パラメータのウィンドウ右上にある三本線のボタンを押すと
メニューが出てくるので、ブレンドシェイプの重みの制限設定
をクリック。
『あ』のブレンドシェイプを選択したら
それ以下『い、う、え、お』のパラメータにそれぞれ重みの制限を追加していきます。

口のブレンドシェイプ作成時は、プリセットから『＼直線3』
を選択し追加してあげましょう。

![あ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/3e80cae7-53c1-96a6-2998-82e44eba8318.gif)
手順は上のgifの通り。

<br>

『あ』のブレンドシェイプの設定が完了したら、次は『い』の設定をしていきます。
![い.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/ca4330a6-fef6-bb9e-8d1e-c6128368a0b4.gif)

『あ』、のときは　あ以下(い、う、え、お)のパラメータに設定しましたので
『い』も同様に、い以下(う、え、お)にパラメータを設定します。

<br>
『う』のブレンドシェイプには、(え、お)<br>
『え』のブレンドシェイプには、(お)　を、それぞれ設定して行きます。
<br><br>
上記の手順により『お』に対応する設定は、すべて完了してしまっているので<br>
ブレンドシェイプ『お』には重みの制限設定が不要となり<br>
すべての調整が完了した状態になります。

<br>
複数パラメータを1にスライドさせても形が崩れることなく<br>
<br>
あ　▷　い　▷　う　▷　え　▷　お<br>
<br>
の順で変形ができるようになっていれば成功です。


![成功の場合.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696723/321123ac-5383-1deb-e0a6-4885bf7baa02.gif)







### 6. まとめ

手順がわかってしまえばなんてことない内容なのですが、
重みの制限設定、という機能にたどり着くことができなかったが故に挫折してしまった
というユーザーは意外と多かったりするのではないでしょうか。

最後までご覧いただきありがとうございました。