Creative Blog #9 Live2Dの習得セットアップ編

こんにちは。ポケラボクリエイティブ部です。

クリエイティブ部の若手メンバーがスキルアップに励む姿をお送りしているCreative Blog。
今回から複数回にわたって、Live2D未経験の若手メンバーがLive2Dの習得にチャレンジする姿をお送りいたします。
Spineでアニメーション作成経験がある若手メンバーが、Live2Dでパーツ分け、セットアップ、アニメーション作成まで一通り行い、SpineとLive2Dの操作性や学習コストを比較しながらLive2Dの習得にチャレンジしました。

SpineやLive2Dに関しては下記のサイトをご参照ください。
どちらも2Dアニメーションを制作するソフトウェアになります。
http://ja.esotericsoftware.com/
https://www.live2d.com/ja/about/whats_live2d

今回は「セットアップ編」です！
以前掲載した「Creative Blog #3 初めてのLive2D」と内容が重複する箇所もありますが、最後までご覧頂けますと幸いです。

こちらのキャラクターの正面図を使ってLive2Dでアニメーションを作成します。

「最終的には会話演出とかで使えるようになるといいなぁ～」というオーダーを頭に入れつつ作業していきます。

まずはパーツ分け。
Photoshopで作業を行い、このようになりました。

公式のチュートリアル動画を参考にしつつ、基本的に体や頭などはSpineと同じようにパーツ分けを行いました。
Live2Dは基本的に回転デフォーマよりもワープデフォーマで動かす頻度が多いようなので、Spineほど回転させたときの破綻を気にせずにパーツを分けました。
（公式のチュートリアル動画の16:00あたりをを見ると大丈夫な筈！）

歯車のような立体的で複雑な形状のものは、正面と側面で分けておくと後々調整が効くので、このようにパーツを分けました。

顔まわりに関しては、Live2D経験者からアドバイスをもらい、細かめにパーツを分けました。

目は「まぶた」「上まつ毛」「下まつ毛」「眼球」「白目」の５つにパーツを分けました。
口は「上唇」「下唇」「口の中」の３つにパーツを分け、鼻と頬もパーツ化しました。

また、このキャラクターはまつ毛が特徴的なので、参考サイトにある「描き目」を追加し、ニッコリ閉じ目のまつ毛が綺麗に表示されるようにしました。
追加した描き目は、「描き目（ニッコリ）」と「描き目（とじ）」の２つなので、目のパーツは全部で７つになります。

以上でパーツ分けは完了です。

パーツ分けをした画像をLive2Dに読み込みセットアップを行っていきます！

上図はパーツを読み込んだLive2Dの画面です。

公式のチュートリアル動画を参考にメッシュを割っていきます。

画面上部にある「メッシュの自動生成」ボタンを押してメッシュを生成し、細かいところは手で調整していきます。
自動生成には「標準」「変化度合い(小)」「変化度合い(大)」の３つのプリセットが用意されています。
表情がメインで体の動きが少ないなら「変化度(小)」か「標準」、表情と体をゴリゴリ動かすなら「変化度合い(大)」が良いようです。

動かす度合いによって自動生成のプリセットを選択します。
今回は、会話演出に使う想定で比較的動きが少なめなので「標準」で行います。

メッシュを割りすぎると実装した際に予想以上の負荷が掛かる場合もあるようなので注意が必要です。
https://www.live2d.com/ja/interviews/raramagi（ Live2Dを利用していて感じた課題点）

余談ですが、顔など手で割り直すようなところに「変化度合い(大)」を一部分かけたらうまくいくかな？と思って試してみましたが、全くうまくいきませんでした……。

それでは、眉毛や目など、細かな変形をするところを公式のチュートリアル動画を参考にメッシュを調整していきます。

左半分の顔パーツの調整が終わったら簡単な目パチのアニメーションを設定して動作を確かめてみます。

いい感じ！
と思いきや、目を閉じる際に一瞬消えている……。

こんな時は、キーフォーム編集（任意の場所にキーを打てるモード）の「目盛りに合わせる」のチェックを外し、細かくキーを打てるようにして、目を閉じる際に非表示にならないよう調整します。

解決しました！

ついでに、縦横しか動かせなかった目玉を斜めにも動かせるように調整しました。

更に、顔のZ軸を動かすと髪もついてくるようにしました。
会話演出用なのでそこまでやらなくてもいいかなぁ～とも思いましたが、ちょっとこだわりました！

続いて体と腕をセットアップしていきます。

肩や腕は細かくパーツ分けしているので、回転デフォーマとワープデフォーマの両方を駆使して作成します。この工程で使用するのはグルー機能です。
（グルー機能に関してはコチラを参照下さい）

パーツを動かしたときに破綻しないよう、パーツとパーツの境目を繋げたまま保ってくれる機能との事で、「便利～！設定だけしちゃえば後のウェイト調整結構楽になりそう！」と思ったのですが、この機能が結構難しかったです……。

グルー機能の難しいところ　～その１～「アートメッシュの割り方」

公式サイトの図解通りに割れば何の問題もないのですが、メッシュで囲った部分以外の場所の画像が消えるといったLive2D基礎知識が頭に入ってないと、うっかり画像が欠けたメッシュを生成してしまいます。

欠けた画像を生成しないようグルーでくっけたいメッシュを作成した後は、選択ツールで一つずつ画像を選択して画像がちゃんと囲えているか確認する必要があります。
欠けてしまった部分はメッシュを付け足して、しっかり画像をメッシュで囲えるようにします。

グルー機能の難しいところ　～その２～「グルーのウェイト」

ウェイトを振って動かしたときに、がたつかないようにする機能があるものの、ウェイトを整えるブラシの癖が強く、ブラシでなぞるとウェイトがどっちへ行くかなどは、初めてという事もあり全くわからなかったです。

とりあえず、わきの下など激しい動きをするときに離れてほしい部分はウェイト調整で離して、他の部分は手作業で頂点を移動するといった形でセットアップしていきました。

回転デフォーマ、ワープデフォーマ、グルー機能を駆使して左側の腕のセットアップを終えたら、もう片方に反転＆コピーします。

作ったものをフォルダごとコピーして

位置調整デフォーマを反転させて配置

そして、
・位置調整デフォーマとグルー機能保持のためにコピーしてた体パーツを消す
・パラメーターの設定をコピペ
・肩のグルー機能のメッシュを割りなおす
といった感じでコピーします。

フォルダごとコピーしないとグルーがうまく機能せず、もともとあった場所にトリモチみたいに伸びてコピーされてしまうので注意が必要です！

これで両腕のセットアップがひと段落しました。（まだ終わってません！）

次は腕の差分を作ります。
先ほど下した腕のセットアップが出来たので、上げた腕のセットアップしていきます。

ここで腕差分を作る際の注意点！

Spineでは二の腕から先の差分を用意する場合、二の腕は使いまわすことが多いです。

しかし、Live2Dではパラメーターやグルーの設定上、腕差分や手差分一つに対し同じ画像の二の腕をもう一度セットアップしなおす必要があります。
アトラス化したテクスチャを書き出す際にはあまり問題ないのですが（コピペなので）、セットアップ時にまたパラメーターの割り振りやグルーでつなげる作業があるのでとても大変です。
（上の図にも同じ内容のテキストが記載されています。文字が小さく読みづらくてスミマセン！）

当初は「下した腕」「上げた腕（パー手）」「上げた腕（ピース手）」の３つの差分を作ろうとしていましたが、工数的に厳しくなりそうなのと、使い道が限られそうなのでピース手は消すことにしました。

さよなら……。

上記の通り、二の腕のセットアップをもう一度やる必要があるので根気よくやっていきます！

基本的に片方セットアップしてもう片方にコピーするときと手順は同じですが、体や腕にくっついていたグルー機能が取れてしまうのでグルーの設定をし直します。

この時、パラメーターの３点挿入を行った後にボーンの位置を調整したいな～と思って動かしたら、現在選択しているパラメーターキーにしか反映されなかったので、泣く泣くパラメーターキーを全て消してからボーンの位置を修正しました……。いい勉強になりました！
（Live2DにSpineの調整ボタンのようなものがあるといいなぁ）

下した腕の時は中々苦戦したグルー機能ですが、上手の手首ではなぜかウェイト調整するだけでうまくいったので、ウェイト調整に向いている箇所、向いていない箇所があるのかもしれません。