[Live2D 初心者] インストールから簡単なアニメーション作成まで

# 概要
本記事は STECH / 愛知工業大学 システム工学研究会 共同企画 Advent Calendar 2022 の20日目の記事です。
絵描き初心者が無謀にもLive2Dに挑戦しました。
目標は、まばたきをするアニメーションの作成です。

# インストール
まずLive2Dをインストールします。下記のリンクからダウンロードしました。
[Live2D cubism](https://www.live2d.com/)
以下の二つのアプリがインストールされました。
![スクリーンショット 2022-12-18 12.51.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/e5c79798-ffa7-3d76-c587-3f9a65c9e7b1.png)

# 素材を用意する
素材のファイル形式は、レイヤーを利用するためにPSDにしておきます。
拙い絵ではありますが、描いてみました。細部がかなり雑ですが、動かすことが目標なのでこのまま使用します。
![1号＿パーツ分け.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/f79b82ec-9755-06d6-9b52-44a242cf11a7.jpeg)

パーツごとに分けるとこんな感じ
![スクリーンショット 2022-12-18 14.13.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/b41ec813-001a-ea5b-c045-0ffc3ef2f03a.png)



# エディターを起動する
「Live2D Cubism Editor」を開きます。
![スクリーンショット 2022-12-18 12.58.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/1cc92525-2672-2c6e-abf0-297436e0f804.png)


続いて、「ファイルを開く」から作成したPSDファイルを指定して、インポートします。
![スクリーンショット 2022-12-18 15.11.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/d5358dab-a28a-9514-5ee0-31f9b6fd2511.png)

# メッシュを作る
メッシュというものを作る必要があるそうです。
下の画像のように、動的に線を加工するために設定するようです。
![スクリーンショット 2022-12-18 15.46.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/fabef0f2-2ad2-05f1-c474-972090403d69.png)
左のパーツ一覧からパーツを選択し、イラスト上部の「AUTO」をクリックするとメッシュを自動で作ることができます。
![スクリーンショット 2022-12-18 15.19.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/cf9aa117-4303-5417-bd4b-83319d0fccb6.png)
全パーツにメッシュを設定しました。
![スクリーンショット 2022-12-18 15.28.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/23022553-d76f-f2c1-7c38-6eeaac30f9ba.png)

# まばたきを実装する
左目からやっていきます。
まず作業のために眼球と白目部分を非表示にします。
目のアイコンをクリックすれば、表示/非表示を設定できます。↓
![スクリーンショット 2022-12-18 16.04.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/285348dd-c880-420f-38d6-c53321865bed.png)
左目の上まぶたと下まぶたの二つを選択した状態で、「パラメータ」の「左目　開閉」を選択。そして、「パラメータ」上部の「キーの2点追加」をクリックする。↓
![スクリーンショット 2022-12-18 16.12.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/ad80fce0-42c7-c228-6bde-ebd9b916e327.png)
緑の点が二つ表示されました。この「左目　開閉」の値を 0.0 にしておきます。
ここで、目を開けた状態と、閉じた状態を管理するようです。↓
![スクリーンショット 2022-12-18 16.18.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/7a1444c6-f596-8dab-7132-04be6f268533.png)
次に「左目_上まぶた」を選択し、「変形パスツール」をクリック。
![スクリーンショット 2022-12-18 16.23.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/9238e20e-dc75-d634-b13a-7536f014a4e5.png)
メッシュの点をクリックすると下の画像のように、選択した点を通る軸ができます。この軸に沿って変形させることができます。↓
![スクリーンショット 2022-12-18 16.26.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/4f30e504-ff10-96f7-d830-64b15a576a23.png)
矢印ツールを使って選択した点をドラッグすると、「変形パスツール」で作った軸に沿って変形します。↓
![スクリーンショット 2022-12-18 16.29.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/62b80973-21ab-1622-a8a1-d27fe238791a.png)
![スクリーンショット 2022-12-18 16.35.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/3d432d91-fcce-ff16-14dc-69f7be4e5f51.png)
この時点で、パラメータ「左目　開閉」の値を操作してみると、まばたきを手動で操作できるようになっています。↓
![スクリーンショット 2022-12-18 16.35.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/142fca41-dc61-3ead-36dc-42f695ec18f9.png)
このままでは目を閉じても白目や眼球が隠れないので、その設定をしていきます。
まず、非表示になっている白目と眼球を表示させます。
そして、白目を選択した状態で「インスペクタ」のID欄にある文字列をコピーします。
![スクリーンショット 2022-12-18 16.47.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/d604f143-214f-f871-8380-7a4743cbe865.png)
次に、眼球を選択し、同じく「インスペクタ」の「クリッピング」欄にペーストします。こうすることで、眼球は白目が表示されている範囲内でしか表示されなくなります。
![スクリーンショット 2022-12-18 16.50.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/63b38d92-1df6-f8da-faec-8c8366d74c11.png)
白目の設定をしていきます。まず、「左目　開閉」のパラメータを操作して、目を閉じた状態にし、「キーの2点追加」をクリック。次に、白目を選択して、メッシュを利用しぺちゃんこにします。↓![スクリーンショット 2022-12-18 17.05.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/5070e889-4fc5-eec8-7d0d-85bd125f254e.png)
「変形パスツール」を使って、ぺちゃんこの白目を閉じたまぶたに合わせます。↓
![スクリーンショット 2022-12-18 17.08.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/b443c9d3-b3ec-d9c2-c1d1-0468525fe31e.png)
これで完成です！右目も同じ手順で作れました。
# アニメーション作成
まばたきをするだけのアニメーションを作成してみます。
「モデリング」→「パラメータ」→「まばたき・リップシンク」から、まばたきを設定したパラメータにチェックをいれます。
![スクリーンショット 2022-12-18 17.38.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/8272aaec-9488-94ff-3f57-8c1bc430ae9b.png)
![スクリーンショット 2022-12-18 17.41.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/e94e89d1-450e-3c6f-2140-6360516945c4.png)


「ファイル」→「新規作成」→「アニメーション」と選択し、エディターを開きます。↓
![スクリーンショット 2022-12-18 17.32.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/415334fd-4b69-832d-7ed7-214407d938b2.png)
先ほど作成したモデルデータを、ドラッグ&ドロップすると、エディターに表示されます。
![スクリーンショット 2022-12-18 17.35.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/1fba32ae-7df3-4311-c65e-c09a8b23e56a.png)
タイムラインにパラメータの値を設定していくだけで、アニメーションになりました。
![スクリーンショット 2022-12-18 18.11.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/370598f9-2087-71e3-d575-07caa2b8d024.png)
![Hello Live2D.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2533532/a963d375-5b46-27da-9733-dcc9a2830a94.gif)

# まとめ
想像していたよりも簡単に作ることができました。
次は、表情の変化や体や髪などの動きをつけてみたいですね。


# 参考にしたページ
[live2dの無料版の作り方～まずはさわってみよう！編～](https://redeyerui.work/2497) //モデル作成部分で参考にしました
[cubism 公式マニュアル」](https://docs.live2d.com/cubism-editor-manual/eye-blink-settings/) //アニメーション作成部分で参考にしました