7/13(土)-15(月) J-WAVE presents INSPIRE TOKYO(@代々木第一体育館)で自動運転車に試乗できます☆彡

19-22. Live2Dでゆるキャラにまばたきと口パクをつける

やること

Live2Dを使って、海津市のマスコットキャラクター「かいづっち」を動かします。今回初めてLie2Dを使うので細かいことはよく分かりませんが、とにかく口パクとまばたきだけ頑張ります。

Photoshopデータの用意

まずは、かいづっちのPhotoshopデータを用意します。かいづっちの画像をPhotoshopで開き、動かしたい部分を切り取ってレイヤー分けしていきます。足りないものは新規作成します。今回は、眉、目、口を動かすために次のようにレイヤー分けしました。

  • 目:開いた目、閉じた目、ハイライト
  • 口:口上の黒い線、口下の黒い線、口内の赤い部分

Live2Dモデル作成

メッシュとパラメータの設定

PhotoshopデータをLive2D Cubism Editorに読み込み、眉、目、口にメッシュとパラメータを設定します。公式のチュートリアルがとても分かりやすいので、言われるままに真似して設定していきます。

10分でわかる!Live2Dが楽しいと感じる瞬間No.1『まばたき』を作ってみよう!
20分でわかる!Live2Dで「あいうえお」の口を作ってみよう!(Japanese vowels)

まばたき・リップシンク設定

「モデリング」>「パラメータ」>「まばたき・リップシンク設定」を開きます。「左目_開閉」と「右目_開閉」は「まばたき」にチェック、「口_変形」と「口_開閉」は「リップシンク」にチェックを入れます。

設定が終わったら保存して、モデル作りは完了です。

アニメーション作成

Live2D Cubism Editorで新しいファイルを作成し、「アニメーション」モードに切り替え、「タイムライン」ウィンドウにLive2Dのモデルデータをドロップします。Live2Dのファイルには、モデルファイル(.cmo3)とアニメーションファイル(.can3)があるようです。

「アニメーションのターゲットバージョン選択」ウィンドウでは、今回は「Video」を選択しました。

口パク

予め音声のwavファイルを作っておきます。今回はこちらのサイトを使用して、ずんだもんの声(あまあま)でかいづっちの自己紹介音声を作成しました。

▼WEB版VOICEVOX
https://www.voicevox.su-shiki.com/

まず、wavファイルを「タイムライン」ウィンドウにドロップします。
次に、「アニメーション」>「シーン」>「音声ファイルから自動的にシーンを生成」を選択し、現れたウィンドウのOKボタンを押します。
以上で、音声に合わせた口パクのアニメーションが自動で作成されます。

まばたき

「タイムライン」ウィンドウの「まばたき」にキーフレームを挿入し、1ループ分のまばたきアニメーションを作成します。これをタイムライン上にコピペしてもOKですが、テンプレートとして登録すると便利です。

▼まばたきのキーフレーム挿入
https://docs.live2d.com/cubism-editor-manual/eye-blink-settings/

▼テンプレート登録
https://docs.live2d.com/cubism-editor-manual/template-making-and-management/

まばたきさせたい位置にカーソルを合わせ、テンプレートの「まばたき」を選択、を繰り返して適当な間隔でまばたきを配置したら完成です。

結果

Live2Dでゆるキャラにまばたきと口パクをつける

まとめ

かいづっちに口パクとまばたきを付けることができました。音声から自動で口パクアニメーションを作ってくれる機能は素晴らしいです!公式のチュートリアル動画とマニュアルが充実しているので動かすこと自体は割と簡単でしたが、”かわいく”動かすというのはなかなか難しいですね。

タイトルとURLをコピーしました