Live2Dでドラゴンを動かす
対応バージョン：Cubism 2.0以降
（解説ではCubism Editor 2.0を使用しているので、最新版ソフトウェアと若干見た目や操作が異なる場合があります。）
チュートリアル作者：のしぷ (URL: http://noshipu.hateblo.jp/)
関西に住んでいるゲームプログラマー
スマートフォンゲーム【うたってベルツノさん】の制作者
iOS:goo.gl/9F8Chx Android:goo.gl/nnNSxI
Live2Dといえば美少女を動かすツールと思われがちですが、実はなんでも動かせます。
モンスターでも、エフェクトでも、背景でも、2D絵で3D的なリッチな表現を作ることができます。
試しに今回はドラゴンを作ってみました。
以下、チュートリアルとなります。
ステップ1. 下準備
【１】ラフ画と動きのイメージ作り
まずキャラクターのラフを描きます。
TIPS：動きのイメージを考えておく
この時点から動かしたいパーツをイメージしておくと、後でやるレイヤー分けの作業や、動きをつける際に楽になります！
【2】レイヤー分け
１枚絵を描いていく際、または１枚絵を描き終わってからでもいいので、パーツごとのレイヤー分けをしましょう。
PSDのインポート機能を使って取り込む際、PSDファイルでの１レイヤー ＝ Live2Dの１オブジェクトとなりますので、
そのつもりで動かしたいパーツの切り分けをしましょう。
ドラゴンのレイヤー分けはこんな感じに(フォルダは無くて大丈夫です。)
TIPS：書き足しは今のうちに
可動範囲を想定し、関節部分や目の裏側等の動かす際に必要な箇所を書き足ししておきましょう。
後での修正はそれなりに手間がかかってしまいます。
TIPS：影や光源を動かすことでよりリッチな表現作り
今回、ドラゴンはお腹の影と首の影を別オブジェクトとして切り分けています。
別で制御してあげることで、よりリアルな動きに近づかせることができます。
※ 影のレイヤーについて
今回のドラゴンの場合、乗算レイヤーを使って影を塗っていたのですが、
Live2Dでの乗算レイヤーはまだ安定していない機能(2014/2/16)であることから、
今回は画像の透明度指定する手法で対応しております。
準備完了！
ステップ2. Cubism Modelerで動きをつけよう
【1】PSD読み込み
Live2D Cubism Modelerを起動して、[ファイル]->[PSDファイルをインポート]を選択。
インポート後に、影の不透明度を設定しましょう。
【2】パーツ分けをしよう
オブジェクトの管理がしやすい用にCubism Modeler上でパーツ分けをしていきましょう。
人物以外を作る場合、デフォルトのパーツ設定とは異なることが多いので、自前でパーツの設定を作ります。
[モデル]->[パーツ設定]から変更させることが可能です。
ドラゴンの場合こんな感じに
TIPS：オブジェクトの名前を変えておこう
PSDのレイヤー名がオブジェクトの名前となっているので、修正したい場合はここで修正しておきましょう。
【3】デフォーマの設定
用意したパーツを簡単に動かせるようにする設定をしていきます。
☆ 動きの種類は3種類
TIPS：親子関係
Live2Dの勉強を始めるとちょっと躓きやすい親子関係ですが、一緒に動くパーツという認識でOKです。
「首が動くなら頭とか目も一緒に動かさないといけないから、首の子供だよね〜」という感覚で親子関係をつけていきましょう。
TIPS：ロック機能
間違えてパーツを動かすことがたまにあるので、ロック機能を使い、修正するパーツだけロック解除させるとやりやすいです。
【4】パラメータの設定
パラメータにそった動きを、デフォーマや、不透明度等で設定していきます。
(例)
顔・左向き
顔・正面向き
TIPS：ポリゴン分割で微調整
PSD読み込みでインポートした場合、ポリゴンが自動で割り振られますが、動かしている最中に線が荒くなるだったり、
もっと細かく動かしたいという場合は、テクスチャ編集からポリゴン数を増やすことで対応することができます。
TIPS：ポリゴン直いじり
デフォーマを調整でだいたいのことはできますが、特定の箇所を微修正したい等あれば、
描画オブジェクトのポリゴンにパラメータ設定させることで細かい動きを作ることが可能です。
TIPS：パラメータの点は打ちすぎない方がオススメ
基本的には3点以上の点をうたないことをオススメします。思った通りの見え方はするものの、
中割りのモーションがぎこちなくなったりして、後での調整や、管理をするのが結構面倒になります。
ステップ3. Cubism Animatorでモーション作り
モデル作成の段階でSDKからパラメータ制御させてあげることも可能ですが、
プログラムちっくな機械的でないモーションを作るならCubism Animatorでモーションをつけてあげた方がいいです。
【1】cmocファイル読み込み
ステップ2で作成したモデルを保存すると、cmocファイルとして書き出しされます。
そのファイルをLive2D Cubism Animatorにドラッグ&ドロップでもっていくことで、Animatorに取り込むことができます。
【2】モーションを作る
アニメーション作成はタイムラインにModelerで設定したパラメータキーを使って作ります。
TIPS：カーブを使う
アニメーションカーブがとても便利なので使っていきましょう。
TIPS：ワンポイントアクセント
火を吐くモーションに炎を入れたいとなったので、今回はさくっとpng画像を用意し、Animatorの方で制御しています。
もっと演出にこだわりたい場合は炎もCubism Modelerで作成するといいかもしれません。
【3】アニメーションを書き出し
書き出しをすることで、Live2D SDKで扱えるようになり、様々なプラットフォームで表現することが可能になります。
以上、チュートリアルとなります。
Live2Dではモンスターや、背景等もリッチな表現で動かせるというのが伝わればうれしいです！
ありがとうございました。
Aricle copyright © 2015 noshipu