※ドラッグするとマウスに合わせて顔が動きます。

お久しぶりです。広報部の森田です。
今回も前回に引き続き「Live2D」のお話です。


今回は実際にチュートリアルを見ながら動くイラストを作ってみました。
「Live2D」のWEBマニュアルにある「PSD&テンプレ機能で簡単モデリング」を
参考にしながら感想や自分なりの手順や注意点などをまとめておきます。


＜参照＞
・「PSD&テンプレ機能で簡単モデリング」http://sites.cybernoids.jp/cubism2/lets-do-it/quick-modeling


■■必要な物■■
「Photoshopなどイラストが描けるソフト」「Cubism Editor」「Live2D SDK」「Unity」です。
イラストは.png形式で書き出せるソフトであれば出来るようですが、
PSDファイルをインポートするやり方だと準備の工程がかなり省け格段に楽になります。
今回はPhotoshopで行います。


■■下絵を作る■■




【下絵を描く】
基本的には普通にPhotoshopで行くだけで良いのですが、
最後にパーツごとにレイヤー分けする必要があります。
目や口、髪、体と顔などレイヤー分けてして描くと後が楽になります。
ただ、始めから事細かに細かく分けてすぎると何かと描き難いので、
私は普段道理に描いた後にバラバラにした方が良さそうです。


【下絵のレイヤー分け】
描いた下絵を１パーツ１レイヤーに分けて行きます。
レイヤー分けする目安もチュートリアルがあるのでそれを参考にしてください。
かなり細かく解説してくれています。
http://sites.cybernoids.jp/cubism2/lets-do-it/quick-modeling/01

PSDのサンプルもあるので見てみるといいです。
まつげだけで左右３つもあったり、結構細かく分かれていると思います。
こういったサンプルなど参考資料が多いのは嬉しいかぎりですね！


この時注意したいのは、塗り足したなどが必要な場所が出てくる事です。
後ろ髪の隠れている部分や首などを継ぎ足しておきます。
塗り足している部分が少ないと後で動かすときに隙間など出来てしまうので注意が必要です。

また、「まぶた」や「口の中」などのレイヤーを増やします。
注意点として取り込む時にPhotoshopのマスクなどの機能は反映されません。
そのため、まぶたなどは目を閉じたときになど瞳を隠したいときなどに必要になります。
口は上と下、口の中の３つに分けることで口の開閉などにも対応出来ます。
こちらも口の中を隠すため、口の上下に塗りたしをしておきます。

読み込みを行う前に出来るだけゴミの削除をしておきましょう。
後でも出来ますがPhotoshop上でレイヤースタイルの境界線などを使うと見つけ安いです。



■■モデルを作る■■



【下絵の読み込み】
「Live2D」を制作するツールである「Cubism Editor」は2つに分かれています。
「Cubism Modeler」「Cubism Animator」です。
「Cubism Modeler」を使います。こちらがモデルの制作ツールです。
PSDを読み込むには、メニューの「ファイル」⇒「PSDのインポート」⇒読み込むファイルを選ぶだけです。



読み込むとこんな画面に移ります。
ここでポリゴンが上手く置かれているかとゴミがないかチェックして「OK」をクリックすると読み込み完了になります。


【動きを割り当てる】
「テンプレートの適用」を使うと動きを簡単に作る事ができます。
メニューの「ファイル」⇒「テンプレートの適用」を選ぶとウィンドウが開きます。
テンプレートが表示されるのでそれを選びます。


この画面が表示され、テンプレートのモデルが点滅して自分の作った絵に乗っかっていると思います。
大きさや目などパーツの位置や向きおあわせて「OK」をクリックするとテンプレートの動きを当てる事が出来ます。
多少ずれたりしている箇所が出てくるので修正してモデルの完成です。テンプレートのモデルを上手くあわせるとズレを少なくできます。あわせる際に点滅だと会わせ難い方は、不透明度の固定にチェックを入れましょう。
自分はこちらがやりやすいです。


また、デフォーマやパラメータを新たに加える事で別の動きをつけることもできます。
デフォーマやパラメータについての説明は入門チュートリアルに載っています。


＜参照＞
・「デフォーマ」http://sites.cybernoids.jp/cubism2/beginner-tutorial/04
・「パラメータ」http://sites.cybernoids.jp/cubism2/beginner-tutorial/05



これでモデルを書き出して完成です。
メニューの「ファイル」→ 「mocファイルの書き出し」を選びポップアップが出てくるので
新フォルダーをに適当に名前をつけて「OK」をクリックして書き出します。



記事の上部のコンテンツが完成したモデルに簡単に動きをつけてみましたものです！
チュートリアルの「Unityでグリグリ動かしてみよう」を試してます。

割と簡単ですので試してみるといいと思います。
「Unityでグリグリ動かしてみよう」　http://sites.cybernoids.jp/cubism2/lets-do-it/my-first-lapp


モデルに関して応用していろいろ触りたいかたは是非、入門チュートリヤルはやっておくことをお勧めします。
PSDの読み込みでないやり方や「Cubism Animator」についても紹介されています。
こちらのリンク先です。
・入門チュートリヤル　http://sites.cybernoids.jp/cubism2/beginner-tutorial


今回は以上です。またみてください。

<参照>
・Unity
http://japan.unity3d.com/unity/

・Live2D
http://www.live2d.com/