チュートリアル作者：のしぷ　(URL: http://noshipu.hateblo.jp/) 関西に住んでいるゲームプログラマー スマートフォンゲーム【うたってベルツノさん】の制作者 iOS:goo.gl/9F8Chx Android:goo.gl/nnNSxI

【2】レイヤー分け

１枚絵を描いていく際、または１枚絵を描き終わってからでもいいので、パーツごとのレイヤー分けをしましょう。

PSDのインポート機能を使って取り込む際、PSDファイルでの１レイヤー ＝ Live2Dの１オブジェクトとなりますので、

そのつもりで動かしたいパーツの切り分けをしましょう。

ドラゴンのレイヤー分けはこんな感じに(フォルダは無くて大丈夫です。)

TIPS：書き足しは今のうちに

今回、ドラゴンはお腹の影と首の影を別オブジェクトとして切り分けています。

別で制御してあげることで、よりリアルな動きに近づかせることができます。

※ 影のレイヤーについて

今回のドラゴンの場合、乗算レイヤーを使って影を塗っていたのですが、

Live2Dでの乗算レイヤーはまだ安定していない機能(2014/2/16)であることから、

今回は画像の透明度指定する手法で対応しております。

準備完了！

【1】PSD読み込み

Live2D Cubism Modelerを起動して、[ファイル]->[PSDファイルをインポート]を選択。

インポート後に、影の不透明度を設定しましょう。

オブジェクトの管理がしやすい用にCubism Modeler上でパーツ分けをしていきましょう。
人物以外を作る場合、デフォルトのパーツ設定とは異なることが多いので、自前でパーツの設定を作ります。
[モデル]->[パーツ設定]から変更させることが可能です。

ドラゴンの場合こんな感じに

TIPS：オブジェクトの名前を変えておこう

PSDのレイヤー名がオブジェクトの名前となっているので、修正したい場合はここで修正しておきましょう。

用意したパーツを簡単に動かせるようにする設定をしていきます。

☆ 動きの種類は3種類

回転デフォーマ	曲面デフォーマ	ポリゴン直指定
間接レベルで動くものや、変形せず移動しかしないものに使用	変形するパーツ全般に使用 Live2Dの独特な表現はこれで出すことが多い	細かい動きをつけたい時や、細かいパーツに使用。 目の部分等で使う。

TIPS：親子関係
Live2Dの勉強を始めるとちょっと躓きやすい親子関係ですが、一緒に動くパーツという認識でOKです。
「首が動くなら頭とか目も一緒に動かさないといけないから、首の子供だよね〜」という感覚で親子関係をつけていきましょう。

TIPS：ロック機能
間違えてパーツを動かすことがたまにあるので、ロック機能を使い、修正するパーツだけロック解除させるとやりやすいです。

パラメータにそった動きを、デフォーマや、不透明度等で設定していきます。

(例)

TIPS：ポリゴン分割で微調整
PSD読み込みでインポートした場合、ポリゴンが自動で割り振られますが、動かしている最中に線が荒くなるだったり、
もっと細かく動かしたいという場合は、テクスチャ編集からポリゴン数を増やすことで対応することができます。

TIPS：ポリゴン直いじり
デフォーマを調整でだいたいのことはできますが、特定の箇所を微修正したい等あれば、
描画オブジェクトのポリゴンにパラメータ設定させることで細かい動きを作ることが可能です。

TIPS：パラメータの点は打ちすぎない方がオススメ
基本的には3点以上の点をうたないことをオススメします。思った通りの見え方はするものの、
中割りのモーションがぎこちなくなったりして、後での調整や、管理をするのが結構面倒になります。

【1】cmocファイル読み込み

ステップ2で作成したモデルを保存すると、cmocファイルとして書き出しされます。

そのファイルをLive2D  Cubism Animatorにドラッグ&ドロップでもっていくことで、Animatorに取り込むことができます。

【2】モーションを作る

アニメーション作成はタイムラインにModelerで設定したパラメータキーを使って作ります。

TIPS：カーブを使う

アニメーションカーブがとても便利なので使っていきましょう。

【3】アニメーションを書き出し

書き出しをすることで、Live2D SDKで扱えるようになり、様々なプラットフォームで表現することが可能になります。

以上、チュートリアルとなります。

Live2Dではモンスターや、背景等もリッチな表現で動かせるというのが伝わればうれしいです！

ありがとうございました。

Aricle copyright © 2015 noshipu