概要

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

インストール

まずLive2Dをインストールします。下記のリンクからダウンロードしました。
Live2D cubism
以下の二つのアプリがインストールされました。

素材を用意する

素材のファイル形式は、レイヤーを利用するためにPSDにしておきます。
拙い絵ではありますが、描いてみました。細部がかなり雑ですが、動かすことが目標なのでこのまま使用します。

パーツごとに分けるとこんな感じ

エディターを起動する

「Live2D Cubism Editor」を開きます。

続いて、「ファイルを開く」から作成したPSDファイルを指定して、インポートします。

メッシュを作る

メッシュというものを作る必要があるそうです。
下の画像のように、動的に線を加工するために設定するようです。

左のパーツ一覧からパーツを選択し、イラスト上部の「AUTO」をクリックするとメッシュを自動で作ることができます。

全パーツにメッシュを設定しました。

まばたきを実装する

左目からやっていきます。
まず作業のために眼球と白目部分を非表示にします。
目のアイコンをクリックすれば、表示/非表示を設定できます。↓

左目の上まぶたと下まぶたの二つを選択した状態で、「パラメータ」の「左目　開閉」を選択。そして、「パラメータ」上部の「キーの2点追加」をクリックする。↓

緑の点が二つ表示されました。この「左目　開閉」の値を 0.0 にしておきます。
ここで、目を開けた状態と、閉じた状態を管理するようです。↓

次に「左目_上まぶた」を選択し、「変形パスツール」をクリック。

メッシュの点をクリックすると下の画像のように、選択した点を通る軸ができます。この軸に沿って変形させることができます。↓

矢印ツールを使って選択した点をドラッグすると、「変形パスツール」で作った軸に沿って変形します。↓

この時点で、パラメータ「左目　開閉」の値を操作してみると、まばたきを手動で操作できるようになっています。↓

このままでは目を閉じても白目や眼球が隠れないので、その設定をしていきます。
まず、非表示になっている白目と眼球を表示させます。
そして、白目を選択した状態で「インスペクタ」のID欄にある文字列をコピーします。

次に、眼球を選択し、同じく「インスペクタ」の「クリッピング」欄にペーストします。こうすることで、眼球は白目が表示されている範囲内でしか表示されなくなります。

白目の設定をしていきます。まず、「左目　開閉」のパラメータを操作して、目を閉じた状態にし、「キーの2点追加」をクリック。次に、白目を選択して、メッシュを利用しぺちゃんこにします。↓
「変形パスツール」を使って、ぺちゃんこの白目を閉じたまぶたに合わせます。↓

これで完成です！右目も同じ手順で作れました。