[Live2D]イラストの目と口を動かしてみる

Live2D

初夏ぐらいに興味を持ってトライアル版をインストールしてあったLive2D

暑さにやられて放置してる間にトライアル期間終わっちゃってましたが、やっと涼しくなってきたので再開。

フリー版はいろいろ機能が制限されているようですが基本的な仕組みや操作を学ぶには十分!ということで製品版に移行する前にまずは慣れてみることにしました。

スポンサーリンク

作業工程

今回はチュートリアル冒頭に記載されている部分の一部「イラストの目と口」のみ動かしてみることにしたのでその大まかな流れを記録。

動かしたいイラストを準備する

Live2DはPSD形式(Adobe Photoshopのデータ形式)で下絵を作って読み込むことが可能なので、高品質なアナログ絵やアナログ風のデジタル絵を素材として扱うことができるのですが、私自身はイラレ使いなのでイラレで作ったデータをPSD形式に書き出して下絵ファイルを作成。

その際、それぞれひとまとまりのパーツをレイヤーごとに分けておく方が無難。

PSDファイルをLive2Dのキャンバスに配置

Live2Dを起動してモデルのワークスペース内にあるキャンバスにPSDファイルをドラッグして読み込み。

配置された下絵のパーツ情報やパラメータなどもパネル内に展開。

アートメッシュ内の頂点を実用レベルに細分化

柔軟な変形を行うためのアートメッシュが初期状態ではそれぞれ矩形の状態、つまるところ4つしか頂点を持っていない状況なのでこちらを必要な範囲で増殖。

まずはキャンバス上で全部のアートメッシュを選択して①(ショートカットCtrl + AでOK)メニューからメッシュの自動生成を選択

出てきたダイアログボックス内の数値を変更ないし、変更する必要がなくても数値入力の項目にてEnterキーを押すと数値に応じたメッシュが自動生成されるので、あとはそれぞれを適宜微調整。

パーツのパラメータの設定とメッシュでの変形処理

目の開閉処理を行うためにそれぞれのパーツに対応するパラメータを設定。

この場合左目のパーツを選択した状態で「左目 開閉」のパラメータを選択①してキーの2点追加を②クリック

アートメッシュの頂点を動かして左右ともに目を閉じた状態のパラメータを設定。

口も同様にパラメータ設定と閉じた状態を作ったらひとまずモデルの設定は完了。

アニメーションを作製

アニメーションモードに切り替えてモデルデータをタイムラインにドラッグ。

先ほど作ったモデルのデータがキャンバスに表示&全体に展開されるので、キャンバスサイズやモデルサイズを適切なサイズに変更。

タイムラインにキーフレームを打ってパラメータ周りを操作しつつ必要な動きを付けて、最終的に動画や場合によっては静止画の形式で出力するのが一連の流れのようですね。

まとめ

ちなみに目と口の動きだけを付けてGIF形式で出力した今回の成果物がこちら。

ほとばしる取ってつけた感w

モデル製作のフェーズでまだ飲み込めてないことが多いのでその辺は時間がかかりそうですが、アニメーションフェーズに関してはかつてのFlashを彷彿とさせるっつーか。
大体合ってる感じなので普通に動きを付けてる間はまだ楽そう。

とはいっても。
製品版に移行してSDKやらのスクリプトを使うようになると、ある程度のテンプレ構成や多用するスクリプトを覚えこむまではかなり難儀しそうですが。

一朝一夕でできるもんじゃなし、いずれにせよ余裕ですんごく楽しい。

次は体にもいくつか動きを付けてみよう。

Live2D

ちょこちょこポチっていただけるようになりました。
いつもありがとうございます♪
ミケハナノートをフォローする
スポンサーリンク
著作権表記

このブログで利用しているスクリーンショットは株式会社スクウェア・エニックスを代表とする共同著作者が権利を所有する著作物です。転載・配布はご遠慮ください。
(C) ARMOR PROJECT/BIRD STUDIO/SQUARE ENIX All Rights Reserved.

コメント