Live2Dを使ってみた話

 この記事は「実質K高専アイドルマスター同好会 Advent Calendar 2017」の12月17日の記事として書かれています。

adventar.org

 

 タイトルの通りLive2Dを使って自分の描いたイラストを動かしてみましたが、よくよく考えるとアイマスとはほぼ関係ないですね。動かすのはアイマスのキャラクターなので許してください。

 

Ⅰ.Live2Dとは

 公式サイトを見ましょう。→ Live2D ってなんだろう? | Live2D

 簡単に言えば1枚の絵を動かせるやつです。 

Ⅱ.Live2D Cubismの導入

 ここからダウンロードしました。"Download Cubism Editor"をクリックすればダウンロードが始まります。

 無料版ですが、一定期間は有料版を体験できるようです。今回は無料版で使用します。

 

Ⅲ.素材となる絵を描く

 動かすにあたって

  • 髪があまり長くない
  • 髪を結んだり巻いたりしていない

キャラを選んだ結果、乙倉ちゃんに決まりました。上の2つに当てはまると動かすのがめんどくさそうなので……

 パーツごとに分けて描きます。今回は以下のように分割して描きました。1枚絵の状態だと隠れるが、動きによっては見える可能性のあるような部分もしっかり描いておきます。(後ろ髪とかね)

f:id:re1ns:20171211105758p:plainf:id:re1ns:20171211105825p:plain

 この分割の仕方だと結構動かしにくかったのでもう少し細かく分割したほうがよかった。(白目と黒目を分けたり、髪の左右部分を更に2分割したり)

 レイヤーをパーツごとに統合し、psd形式で書きだします。ClipStudioやMedibangPaintもpsd形式での出力に対応してるので安心です。

 

Ⅳ.CubismEditor(Modeler)でモデル作成

 ざっくり言うと作った各パーツがどのような変形や移動、回転をするのかを設定する作業です。

1.モデルを読み込む

 CubismEditorを起動してpsdファイルをドラッグ&ドロップすれば終わりです。楽。

 パーツを選択して、[メッシュの自動生成]ボタンを押せばその名の通りメッシュを作ってくれます。細かく変形させたい場合はやっておきましょう。

2.回転デフォーマの作成

 [パーツ]ウィンドウから回転させたいパーツを選択(複数選択可)し

 [モデリング]→[デフォーマ]→[回転デフォーマを作成]→[作成]

とすることでひとまず完了です。

 次に先程作成した回転デフォーマを選択し、いかにも回転の中心を表してそうな部分(下図参照)をCtrlを押しつつドラッグして移動させます。この部分が回転の中心となります。顔の場合は顎の先端にしておくと良さそうです。

f:id:re1ns:20171212132127p:plain

 尚、上の黒い丸付近でドラッグすると回転することができます。試しに回してちゃんと設定できているか確認しておきましょう。

 回転デフォーマの他にワープデフォーマというものもあります。これは多分パーツを移動させたい時に使います。

3.パラメータの設定

 動かすためのパラメータを設定します。顔を回す(首を傾げる)動作と目の開閉についてのみ説明します。

 3-1.顔のパラメータ設定

 まず回転デフォーマを選択し、[パラメータ]ウィンドウから[角度Z]をダブルクリックします。角度XでもYでも構いません。今回、顔は「左に傾げる」「正面を向く」「右に傾げる」の3パターン作りたいのでパラメータは3つに分割します(下図参照)。

f:id:re1ns:20171211113840p:plain

 次にパラメータを設定していきます。以下の手順で設定します。

  1. パラメータ値が-30.0の部分に、パラメータウィンドウの赤い丸を合わせる。
  2. 回転デフォーマを回転させ、顔を左に傾ける。(不自然な恰好にならない程度に)
  3. パラメータ値0.0(正面)、30.0(右)についても同様に1,2を行う。

 これで角度Zを-30にすれば左、30にすれば右に首を傾げるようになります。パラメータウィンドウの赤い丸をスライドさせることで動作を確認できます。

 3-2.目のパラメータ設定

 目に関するパーツを選択し、[パラメータ]ウィンドウの[左目 開閉]をダブルクリックします。(これから察するに左右の目は別々に設定するようですが、僕は左右まとめて描いていたので左目の開閉に右目の開閉も委ねます。)

 今回は回転ではなくパーツを変形させます。変形させたいパーツを選択していい感じに変形します。(メッシュ変形で綺麗に変形させようとするとなかなか難しかった)

 そして3-1と同様にパラメータを3分割し「開く」「半目」「閉じる」の3つを作成。半目は要らないような気もするけど一応ね。

f:id:re1ns:20171211120819p:plainf:id:re1ns:20171211120833p:plain

半目と目を閉じた状態はこんな感じ。

 3-3.その他のパーツのパラメータ設定

 口の開閉、左右の髪の靡き、眉の上下を設定しました。どれも3-2と同様に設定できます。最後にモデルを保存して終了です。(拡張子は.cmo3)

 

Ⅴ.CubismEditor(Animator)でアニメーション作成

 CubismEditor左上の[Modeler]をクリックすると[Animator]に切り替わります。[タイムライン]ウィンドウに先程出力したcmo3ファイルをドラッグ&ドロップし開きます。

 [Live2D/パラメータ]項目を開くと先程設定したパラメータが表示されます。以下の手順でアニメーションを設定します。

  1. アニメーションを設定したい時間の所にピボットみたいなやつを移動させる。
  2. その時間における各種パラメータを設定する。
  3. ↑を繰り返す。
  4. タイムライン上部の橙色のバーを移動させて再生時間を決定する。

 例えば、目の開閉に関するパラメータを0秒のところで目を閉じた状態、1秒のところで目を開いた状態に設定すれば、1秒かけて目を開くようになります。

f:id:re1ns:20171211124543p:plain

再生ボタンを押すとアニメーションが再生されます。間違いがなければちゃんと動いてくれるはずです。

 

Ⅵ.完成

[ファイル]→[画像/動画書き出し]→[gifアニメ]

でGIFとして出力できます。無料版だと720px*720pxが限度です。

完成したのがこちら

f:id:re1ns:20171211125528g:plain

 すごい。(自画自賛)

 

 所要時間は絵を描くのに1時間、動かすのに2時間の計3時間くらいでした。

 この程度の動きなら慣れればサッと作れそうです。

Ⅶ. 反省点(?)

 最初の方にも言ったように、パーツの分割が雑すぎた。綺麗に動かしたいならもっと細かく分割しておくべきだった。それに加えて、線画が結構太めだったため変形時の線の歪みが気になった。もう少し細くて良さそう。

 どうしても元画像を変形させるのみで目や口を完全に閉じた状態を作り出すのは難しかった。これらに関しては差分パーツを作ってその表情になるときにそのパーツをフェードインさせる等で対応できそう。

 

Ⅷ.後日談

 この記事を描いたのは12/11(火)でした。担当日である17日まではまあまあ時間があったのでもう1つ作ってみました。よしのんです。昨日ツイートしてたやつです。

f:id:re1ns:20171216194357g:plain

 パーツ分けはこんな感じ。前のに比べるとかなり細かい。

f:id:re1ns:20171216194457p:plain

 髪は細かく分割したところで滑らかに動かすのは難しかった。特に後ろの結んでる部分。

 上で述べたように口は開いた状態と閉じた状態でパーツ作っていい感じにしました。

 あと黒目が動くようになったり、若干ながら左右に顔の向きを変えられるようになりました。

 

Ⅸ.まとめ(感想)

 不慣れでもまあそれなりに動いてくれたのですごいなーとなった。

 詳細な使い方は調べたら豊富に出てくるので、デジタルイラストを描ける環境がある人は是非触ってみてください。(Live2D Cubism Editorはwinとmacに対応してます)

 

 

 

 

明日12/18(月)の担当は干柿(@phoshigaki)君です。

 

 

 

 おわり