Live2Dのチュートリアルをさわってみたその１

CG開発室の牛丸です。

遠藤が行方不明になってしまったので代打牛丸です！

どなたか遠藤をご存知ありませんか！？

今回は！Live2DさんのLive2Dのチュートリアル？tips？さわってみた？

http://www.live2d.com/ja/

体験版をインストールしてグリグリしてみました。

チュートリアルともtipsにもならない感じでざっくり説明していきます。

それでは張り切ってどうぞ。

■PSD制作時の注意

・カラーモードはRGB、カラープロファイルはsRGBに。

・レイヤーモードは通常のみ

・不透明度と塗りはどちらも全て100%

・レイヤーマスクはつかわない

・1部品1レイヤーに統合する（スクリプトでグループの統合ができる）

・まぶたや口など動かすパーツはぼかしで塗るのではなくがっつりと塗らないとうまく動かせないので注意（まぶたの塗りが薄いと目玉が隠れない）

・絵は基本的に正面向きが好ましい

・耳、髪、首などの部品が重なる部分（のりしろ部分）は塗り足してちゃんと描く（動いたときに見えてしまうおそれがあるため）

！つまり見本データをみながらつくると良いね

■スクリプトについて

１、グループ統合—Preprocess

２、ゴミ取り—Cleaning

１－注意：右目のグループに、まつげ、まぶたなどのまた別のグループが入っていて、右目グループは統合したくないという場合など、レイヤーグループ名の一番最初に「*」（半角米印）をつけておくと統合されない（まつげ、まぶたのグループはちゃんと統合される）

２－注意：軽いゴミをとってくれるだけではなく場合によって目がきえたりすることもあるのでなくなっているパーツがないかチェックの必要あり

■Live2Dの構成

・Modeler：イラストモデルをいじる

・Animator：そのモデルにアニメーションをつける

・Viewer：つけたアニメーションを見てみる（デスクトップマスコットにできる）

■Modelerの構成

【描画オブジェクト】元絵を切り出した素材で、これを三角ポリゴンで割っていく

【デフォーマ】動きの器のことで、その器に2Dの切り出した素材（描画オブジェクト）をいれて動きを付けるという考え方をするとわかりやすい

＜曲面デフォーマ＞ベジェ曲線みたいなグリッドで出来た四角形のデフォーマ（フォトショでいうワープ変形っぽい）曲面のようにパーツの変形が出来る

――顔、髪などの面の変形、移動、X軸、Y軸、Z軸の回転表現が可能

＜回転デフォーマ＞回転する支点と角度が設定できるデフォーマで、パーツを回転させることができる（スパインのボーンみたいなかんじ？）

――首、腕などの関節系のZ軸回転を専門に扱う

→応用として、それらに親子関係を付け、より複雑な動きを制御する

【パラメータ】この動きはこの値、というのを記憶させるもの

このパラメータで、特定の動きの程合いを数値化する

各オブジェクトと動きを結びつけてパラメータをいじって変形させる（これがAnimatorに反映されるよ）

（パラメータはキーが打たれてる点に右クリックするとその点にすいつく）

＜左0――1 右＞で、たとえば目の開閉だったら0が閉じたとき、1が開いたときになる

オブジェクトを選択した状態でパラメータ名をクリックすることで二点挿入と三点挿入ボタンのワンクリックで点を打つことが出来るが、勿論任意の位置に自分で点を挿入できる

＜左0―0.5―1右＞たとえば体を左向きにしたい場合は0、右向きにしたい場合は1、前を向かせたい（通常）場合は0.5となる

目玉などスムーズに全体をみまわすようにする場合、点を三点打ち、XとYを統合することによって全体がスムーズにみわたせるようになる

→この結合によって便利になるのは口の開閉、目玉の動き

！まるまる一からつくれるけど面倒なので、ドラゴンとかモンスター系のテンプレートのきかないもの意外はテンプレを使って作業すると便利ね

■Modelerの使い方

＜テンプレートを使ってざっと動かしてみる＞

１、起動しよう

２、ファイルから「PSDファイルをインポート」

３、ポリゴンが自動生成されたプレビュー画面がでてくるので、ゴミがないか確認してOK

(ポリゴンの割り方が気に入らない場合はオブジェクトをダブルクリックで割り方をかえる)

４、ファイルが無事とりこまれたら、ファイルから「テンプレートを適用」

５、あてはめたいテンプレをえらぶ（基本はEpsilonがおすすめ）

６、レイアウトパラメータ調整画面がでてくるので、パラメーターをできるだけ精密にテンプレにそうように設定する（頭の位置は調整できるので肩であわせるといいかも）

【ポイント】パラメータの丸にスライダをあわせるのは右クリック一発でいく

７、あわせたら「テンプレート適用プレビュー」をクリックする

８、動いてるところをみながら、おかしい部分がないかチェックする

【ポイント】パーツにカーソルをのせると、テンプレのどことリンクしてるかわかるので、もしおかしいところがあったら、まずテンプレのパーツを選択して、合致させたい自分のイラストのパーツを選択し、「選択要素を対応付け」をクリックする

！これで大体いいかんじに動くようになってるぞい

＞＞＞＞＞＞とりあえずこれを読もうhttp://sites.cybernoids.jp/cubism2/＜＜＜＜＜＜

あとチュートリアル動画：https://www.youtube.com/watch?v=e9BjxY_-D2Q

＜テンプレをはめたモデルを微調整する＞

！おかしいところがきっとあるので（主に目と口のメッシュ部分）そこをなおしていく

目と口の開閉の考え方は基本的に、[まつげ]→[まぶた]→[目玉]→[白目]という順番になっていて、目を閉じたときにまぶたの肌色部分のメッシュをのばして対応しているかたちになる

口は[上唇]→[下唇]→[口の中]という構成

＜目をとじさせる＞

【ポイント】一番左のパーツパレットのところの一番上のロックボタン（鍵アイコン）を押すと全部ロックされて選択できなくなるので、一度全部ロックしてから、いじりたいパーツのロックを解除して、いじりたい分だけ選択されるようにすると便利

【例】

パラメータの[右目　開閉]もしくは[左目　開閉]スライダーを一番左にもっていく
目とじの表現がおかしいのでなおしたいと感じる
なのでまつげを選択した状態で、上のバーの一番右にあるペンからなんか出てるみたいなアイコンを選択し、まつげの上にパスを描く
パスを描いたら矢印のアイコンを選択しなおしてなめらかな曲線にする
【ポイント】パスで作業するとメッシュが変にかさなったりするので、変形させたあとは必ずメッシュを確認してきれいにととのえ、変形後のパスはとくに必要ない上邪魔なので消す

まつげの形をととのえたら、まぶた（肌色のやつ）のメッシュをいじって目玉がみえないように調整する
反対の目もがんばる
＜口をとじさせる＞

先ほどのように口の線の上にパスを描きながらメッシュの調整をする

【ポイント】メッシュを増やしたい場合、パーツを選んでダブルクリックするとポリゴンの編集ウィンドウがひらくので、点の挿入（クリックする）か点を増やす（ドラッグする）でメッシュを調節する

参考：p://sites.cybernoids.jp/cubism2/lets-do-it/quick-modeling/04

＜キーを色々打つ＞

テンプレートで動く部分以外（目のハイライトとか）にもキーを打ちたい場合は、描画オブジェクトを選択した状態で、パラメータパレットの割り当てたいパラメータ名をクリックする

パラメータ編集ウィンドウがひらくので、パラメータのキー値を設定する（何点でも）

【ポイント】テンプレート外で動かしたい描画オブジェクトがある場合は、パラメータ設定の「新規値」をクリックし、名前とIDと説明を入力する（制服のリボンとかツインテそれぞれとか足とか。。。ツインテの場合描画オブジェクトを選択し回転デフォーマを作成して、ctrlキーを押しながら中心になる点とAltキーを押しながらデフォーマの長さ（棒）をそれぞれ設定する）

＜テクスチャをさしかえる＞

テクスチャの差し替えがうまくいかない場合、ファイルからPSDファイルをインポートから、差し替え先のインポート済みPSDファイルを選択し、「既存レイヤーの配置を保ち、新規レイヤーを新規テクスチャに挿入」でOKをおす、

ここから少し面倒だけど、差し替える描画オブジェクトを選択していくときれいにうまくさしかわってくれる(地道作業)

＜レイヤーの表示順をかえたい＞

たとえば動いたときに、きちんとスカートの下に手がいくようになっているのに足の下には手がいってないなどのレイヤー順狂ってる事案が発生したときは、描画オブジェクトを選択し、編集パレットから描画順を変更する

この場合描画順がスカート＞手＞足となっているのでスカート＞足＞手といったかたちにする

数が少なければ少ないほどレイヤーが裏にいくので、手よりも足の描画順の数が大きいよう設定する

＜同時選択を防ぎたい＞

非表示にする：非表示にしたいオブジェクトを選んでctrl+3を押すと非表示になる

表示したい場合はctrl+3+altで表示される

ロックをかける：ctrl+2

＜360度回転にしたい＞

回転デフォーマだけだと綺麗な回転はできないので、曲面デフォーマの中に回転デフォーマを入れその中に回したい画像をぶちこむ

（つまり親子関係を画像→回転デフォーマ→曲面デフォーマとする）とうまく360度回転しているようにみせることができる

参考：http://kw-nmnm.hatenablog.com/entry/2015/12/18/000000

＜パーツをきれいに割りたい＞

http://sites.cybernoids.jp/cubism/modeler/basic/texture/edit
このサイトに綺麗な割り方がそれぞれのっている

＜顔を上下左右に滑らかに動かしたい＞

まず上下左右をがんばって調整し、パラメータから４隅の形状を自動生成をクリックすると、斜め上や斜め下が自動でつくられる

pro版ではブレンド機能という、手付けでなくても簡単に制作できる機能がある

＜一点一点選択して動かすのはめんどくさい＞

上部のツール部（テクスチャ編集、デフォーマを作成、頂点選択アイコン(矢印)、デフォーマ選択アイコンなどがある部分）の投げ縄選択ツールをクリックした状態で動かしたい部分をドラッグすると動かしたいところだけ動かすことが出来る

選択部分の頂点をもっと滑らかに動かしたい場合はその隣のト音記号のようなアイコンをクリックし、ブラシで塗るようにドラッグし、頂点選択アイコンに切り替えて動かす

また、ソフト選択のときはTab＋ドラッグでサイズが変更できる

＜テクスチャの編集画面でゴミを見つけるのが難しい＞

編集画面の下のバーから表示倍率と書いてある右のマスをクリックすると背景色がかえられる

■Live2D Viewerの使い方

＜デスクトップマスコット風にしたい＞

Live2D Viewerの表示から、「キャンバスウィンドウの表示」のチェックを外す

モデルをドラッグで移動できるようになる

＜動きを確認する＞

Cubism Modelerの一番上のバーのツールから「Live2D Viewerでモデルをプレビュー」をクリックすると自動的にLive2D Viewerが開くので、[プロジェクト]→[サンプル]→[モーション：サンプル全て]や[アニメーション]→[目パチ][呼吸]などを選んでサンプルモーションを確かめる

[motions]フォルダから[sample]をあてはめてみるとわかりやすい

↓↓↓それぞれのイメージ↓↓↓

[sample idle]待機モーション

[sample 0]うんっ！

[sample 1]いやいや

[sample 2]なに？

[sample 3]にこっ

[sample 4]おこだよ！

[sample 5]かなしみ・・

！！！マイクがあればリップシンクもためせるよ！！！

いつものフーモアのやつ