こんにちは！
東京開発デザイナーのNです！

今回からは、Live2Dのお話をしたいと思います！

自分のイラストを動かしてみたい！
好きなキャラを動かしてみたい！

そんなときに使えるのがLive2Dです。
ちょっとしたコツなども含めて、Live2Dの使い方をお伝えできたらいいなと思います。

使用するのはLive2D Cubism3です。

【Live2Dで動かそう！～準備編～】

まず、気をつけなければいけないのは、
「普通に描いたイラストをそのまま動かすことはできない。」ということです。

Live2Dで動かすためには、そのための準備が必要になります。
その準備は大きくわけて2つあります！

①パーツの分割＆塗り足しの作成
②読み込み用のPSDの作成

シンプルなものであればそこまで分割は必要ないですが、
色々な場所を色々な形に動かしたければ、たくさん分割が必要になります。

複雑なものだと少し難しいので、簡単なものでやってみたいと思います。
（3Dデザイナーなのでイラストのクォリティに関しては多めに見てください（汗））

体なども作るとややこしくなるので、今回は顔をメインにしたいとおもいます。

①パーツの分割＆塗り足しの作成

動かすためには、動かしたいパーツごとにレイヤーを分割し、
重なっている部分の塗り足しを行います。

例えば、「前髪を揺らしたい」となったら、顔と前髪のパーツを分割し、
前髪で隠れた部分の顔も穴が開かないように塗り足します。

耳や首などのパーツも顔の輪郭の後ろまで大きめに描き足しておくと動かすときに自然です。

塗りが複雑なものは少し難しいですが、スポイトで色を取りつつ、
穴の開いた方向に向かって色を伸ばしていく感じで塗ると綺麗に塗り足すことができます！

複雑な動きをさせたい部分は細かなパーツの分割と塗り足しが必要になります。

例えば、瞬きや目玉の動きなどを作りたい目のパーツは
上まつげ・下まつげ・ハイライト・目玉・白目
（白目・目玉はまつげで隠れた部分に塗り足しが必要になります。）

開閉や変形を行う口のパーツは
上唇・下唇・歯・口内・（舌）
（歯・口内・（舌）は唇に隠れた部分に塗り足しが必要になります。）

というように細かくわけます。
ちょっと面倒と思うかもしれませんが、ここを頑張ると可愛く動かせます！

レイヤーの重なり順＝パーツの描画順になります。
上に来るものから順に並ぶように、レイヤー順を変えておきましょう。
描画順が判断しづらい場合は、パーツを画面全体にぐるぐる動かしてみるとわかりやすいです。

このイラストはこんな感じに分割されました。

②読み込み用のPSDの作成

上記の作成が済んだら、読み込み用PSDの作成です。
Live2Dでは１レイヤーを１パーツとして読み込むので、パーツごとにレイヤーを結合します。
その際には以下のことに気をつけます。

１ レイヤー名が同じものがないか
２ レイヤーモードは通常になっているか
３ 不透明度が100%になっているか
４ 読み込みたいレイヤーが表示状態になっているか（非表示の場合読み込まれません。）

上記に気をつけないと正しく読み込まれないことがあるので注意です！

この結合作業は、Live2D Cubism2のマニュアルにPhotoshopスクリプトが公開されていて、
そちらを読み込むと自動で行ってくれます！
以下からダウンロードできます。

http://sites.cybernoids.jp/cubism2/tools/jsx

ここまでで前準備完了です！
ちょっと大変ですが、Live2Dで動かすためにはとても重要な工程ですので頑張りましょう！

次回は、イラストの読み込み＆モデリング①です！
それでは！