Live2D を Unity3D で動作させる方法

How to import Live2D models and animations into Unity3D

Live2Dで作成したモデルやアニメーションはゲームエンジンのUnity3Dで動作させることができます。
前回作成した東北ずん子のLive2Dアニメーション で実際に試してみたのでその手順をまとめました。

環境

• Windows 10
• Live2D Cubism 2.1.12
• Unity 5.3.5
• Visual Studio 2015 Community

Live2DとUnity3Dは無料で使える範囲で試しました。

Live2D Cubism SDK をダウンロードしUnity3Dプロジェクトにインポートする

公式サイトからUnity用Live2D Cubism SDKをダウンロードしインストールします。
このブログを書いている時点では2.1が最新バージョンでした。
http://sites.cybernoids.jp/cubism-sdk2/

自作モデルを動作させるにはこのSDK内のサンプルのスクリプトを流用する方法が簡単でした。
今回は自作のモデルとモーションを動作させます。

ダウンロードしたら展開し、sampleフォルダーのMotionフォルダーを丸ごとUnity3Dプロジェクトにインポートします。
このフォルダーには必要なDLLやシェーダーが含まれているのでサブフォルダーごとインポートします。

モデルとモーションを配置するサブフォルダーを作成する

Unity3DのプロジェクトフォルダーにLive2D用モデルを配置するサブフォルダーを作ります。
例として Live2D_Modelsフォルダーを作成

Cubism Modeler でモデルデータを書き出し拡張子を bytes に変更する

Cubism ModelerでUnityアプリ化したいモデルを開き、メニューの
ファイル - mocファイル書き出し
を実行し、Unity3Dプロジェクトの Live2D_Models フォルダーに書き出します。

書き出し後、フォルダーをエクスプローラーで開き(右クリック Show in Explorer)、mocファイルに.bytesという拡張子を追加します。

Cubism Animation でモーションデータを書き出し拡張子を bytes に変更する

Cubism Animationでモデルに適用したいモーションのプロジェクトを開き、
ファイル - モーションデータを出力
を実行し、Unity3Dプロジェクトの Live2D_Models フォルダーに書き出します。

mtnファイルに.bytesという拡張子を追加します。

Spriteにスクリプト・モデル・モーションを適用する

Hierarchyウィンドウに新しいSpriteを追加します。

Hierarchyに追加したSpriteにインポートしたサンプルのフォルダーの
MOtion - Assete Scripts
にある SimpleModel をドラッグ&ドロップします。

SpriteのInspectorウィンドウを操作します。
描画処理はSDKでオーバーライドしているようなのでSprite RendererをオフにするかRemove componentします。
Simple Model(Script)にMoc Filesに自作のモデルデータのファイル、Texture FilesのSizeを1にして、Element 0にLive2D_Modelsフォルダーのサブフォルダーにあるtexutureファイル、Motion Fileに自作のモーションを指定します。

これで実行すると自作のモデルが動作しました。
Spriteのサイズやカメラの視野は要調整です。

トラブルシューティング

一部のテクスチャが表示されない場合

Cubism Editorでコピー反転したテクスチャは手を加えないとUnityで表示されないようです。
Motion - Assets - Live2D Resources - Shader - merged
のフォルダーにある Live2D.shader というファイルを開いて

Cull[_Cull]
を
Cull Off

に置き換えたら、正常に表示されるようになりました。

Androidで動作確認

Android用にビルドし、Xamarin Android Playerで動作させることができました。

関連ブログ

Live2D を使ってみました 2016
[Unity3D] Unity5のプロジェクトをAndroid Studioにインポートする方法
[Unity3D] 透視投影と平行投影を合成するには
VOCALOID SDK for Unity でユニティちゃんをリアルタイムに歌わせる方法
VOCALOID SDK for Unityでユニティちゃんにvsqxを歌わせる方法
[Android] Xamarin でアプリを作ってみました

以上、参考になれば幸いです。

Live2D を使ってみました 2016

Live2D makes it possible to animate pictures

昨年のLive2D alive2015 に続き、Live2D alive2016 を見学してきました。

Live2Dは昨年の7月から1年の間に使いやすくバージョンアップしていたのでおさらいしてみました。

Live2Dとは

2次元の画像を擬似的に立体化して3次元CGのように動かすことが出来るCG作成ソフトです。
Live2Dのエディターは次の2種類があります。

• Live2D Cubism Modeler
  2次元の画像からテクスチャマッピングやポリゴンを自動生成してデフォーマとパラメータを定義するエディター。
  3次元CGで例えると、Live2Dのデフォーマはアーマチュアでパラメータはモーフのような機能です。
  
• Live2D Cubism Animator
  モデルとパラメータを使ってモーションをつけ、動画に書き出したりアプリ用のデータなどを出力するエディター。
  

Live2Dで開発したコンテンツはUnity3Dなどにインポートしてアプリケーションに利用できます。
Unreal Engineへの対応も予定とのことでした。
この他に、首から下を3次元CG(FBXフォーマット)で表現するVR向けソリューションのLive2D Euclidも開発中とのことです。

環境

• Windows 10
• Live2D Modeler Cubism 2.1.12

PSDファイルの取り込みが容易になった

PSDファイルを取り込んだあとの手直しがほとんど不要になりました。
数値指定によりポリゴンを自動で高精度に分割できます。

反転機能が追加された

昨年の時点では目やまゆ毛のデフォーマは左右それぞれ指定する必要がありました。
最新版では左右対称や上下対称のコピー･ペーストができるので工数を減らすことができます。
下の画像は右目をデフォーマごと左目に反転コピーした結果です。変形パスは右目しかありませんが、左目も同じように動かせます。

元の形状に戻す機能が追加された

変形したオブジェクトを元の形状に戻すための機能が追加されました。

以上、特に便利だった三点を挙げました。
この他ポリゴンの分割を細分化して画像変形を滑らかに強化、After Effectesのサポート、オブジェクトの表示範囲を制限するクリッピング機能の追加など多数の点が強化されて今後も進化するとのことです。

ハードルの高さは相変わらず

パーツごとにレイヤーが分かれたモデルの画像が必要な点は変わりません。
目や口は閉じたときは下の絵にかぶせるマスキング用のパーツも必要です。
Live2Dモデル用画像が用意できない開発者にはハードルの高さは相変わらずです。

今回はMMDモデルからLive2D用画像を用意して練習しました。

こちらはポケットクエリーズ( http://pocket-queries.co.jp/) のクエリちゃん。
分割できるパーツが少なかったですが、思った以上に動かせました。

東北ずん子のように長い髪は扱いが難しいです。

Live2Dで開発するメリット

動きのあるキャラクターを表現するなら3次元CGの方が有利に思えますが、alive2016の事例では同じキャラクターに複数の衣装を用意するようなコンテンツはLive2Dでの開発に向いているようでした。

GIMPのPSDファイルをインポートすると文字化けする

今回用意した画像はGIMPでPSDに書き出したのですが、Live2D Cubism Modelerにインポートしたらレイヤーの名称が文字化けしました。

Live2DがサポートするPSDファイルはAdobe Pohotoshopで書き出したもので、GIMPのPSDファイルはサポート外です。
次に挙げる方法で解決できるようです。

• GIMPのレイヤー名に半角英数(ASCII文字)にする
• gimp-for-painters を使う
• CLILP STUDIO PAINT を使う
• Adobe Pohotoshop を使う

関連ブログ

[GIMP] GIFアニメーションの作り方
CLIP STUDIO PAINT を使ってみました
VOCALOID SDK for Unityでユニティちゃんにvsqxを歌わせる方法
VOCALOID SDK for Unity でユニティちゃんをリアルタイムに歌わせる方法
[Unity3D] ユニティちゃんたちのアニメーションを分離するスクリプト
Blenderで作ったアニメーションがUnity3Dで違う動きをする原因と直し方

以上、参考になれば幸いです。

Live2Dを使ってみました

What is Live2D
2015年6月、Live2D alive2015を見学してきました。
場所は品川のソニーコンピューターエンターテイメント。

Live2Dは使ってみたいけど使い方がよく分からないソフトの一つだったのですがこれを機会に使ってみました。
ちなみにalive2015の内容はコンテストの授賞式と既にLive2Dを活用しているCGの専門家向けに新しいバージョンはこうなりますよ、というものでした。

Live2Dとは

2次元の画像を擬似的に立体化して3次元CGのように動かすことが出来るCG作成ソフトです。
Cubism SDKを使うとLive2Dで作成したしたアニメーションデータをUnity、Android、iOSなどのアプリに組み込むことが出来ます。
Live2Dのエディターは次の2種類があります。

• Live2D Cubism Modeler
  2次元の画像から疑似3次元のモデルを作ってデフォーマとパラメータを定義するエディター
  3次元CGで例えると、Live2Dのデフォーマはボーンでパラメータはモーフのような機能です。
  
• Live2D Cubism Animator
  モデルとパラメータを使ってモーションをつけ、動画に書き出したりアプリ用のデータなどを出力するエディター

alive2015では2次元の画像を3次元のfbxデータに貼り付けて前面も背面もCGとして扱えるLive2D Euclidも紹介されてました。Euclidの公開は当分先のようです。(一般ユーザーが使えるのは来年以降？)

モデルの作成

モデルは2次元の画像から作成するのですが、動かしたいパーツ毎に画像が分かれている必要があります。
チュートリアル用のシンプルちゃんでこれだけ分かれてます。

さらに各パーツをデフォーマに合せて擬似的に3次元化する作業が必要です。
画像のパーツ毎に頂点を指定してデフォーマとパラメータで動きを定義していきます。
この作業は3次元CGでボーンやモーフを設定できるくらいのセンスが必要だと思います。
著作権フリーの画像データをLive2Dで動かしてみたい、と気軽に考えていたのですが自分が考えていたほど簡単ではありませんでした。

アニメーションの作成

作成したモデルはAnimatorでアニメーションさせることが出来ます。
こちらはとても使いやすいソフトです。MikuMikuDanceや動画編集ソフトでキーフレームを打ったことがある人ならすぐに使えると思います。

実際に作ってみたのがこちら。GIFアニメーションなのでPCで見ないと動かないかもしれません。

元はほぼ左右対称の平べったい画像ですが、首を曲げているようなアニメーションが簡単に出来ました。

FREE版ユーザーに立ちはだかる制限

Live2Dのエディターは無料で使えるFREE版があります。
Cubism Editor PRO/FREE 機能比較
http://www.live2d.com/download/comparison

Live2Dの公式サイトで公開されている完成済みのモデルデータをCubism Animatorで使うことも出来るのですが、FREE版では扱えるモデルデータに制限があります。
たとえばユニティちゃんモデルを使ってAnimatorで扱おうとすると

FREE版で追加できるパラメータ数の制限30個を超えています。

Modelerでこのユニティちゃんのパラメータを削除して保存しようとすると

FREE版で使用できるデフォーマ数の制限50個を超えています。

デフォーマは3次元CGで言うボーンやモーフのようなもので、これを削除するとアニメーションが破綻してしまいます。
パラメータの削除により使われなくなったデフォーマだけ削除という機能も見当たりません。
FREE版だけで済まそうとするのは無茶な話ですがそれでもFREE版で使いたいならデフォーマを減らしてください。

どんなユーザーなら活用できるのか？

Live2Dはキャラクターの2次元の画像からアニメーションを作成する特化したソフトです。
ただし用意する画像はパーツ毎に分かれている必要があります。そのパーツもただ分かれていればいいわけではなく、Live2Dの仕様にあわせてマスキングも考慮しなければなりません。
さらにデフォーマとパラメータの設定が必要などハードルは高めです。
とはいえ自分は今まで様々な制約の中で紙芝居のようなアプリしか開発できなかったわけですが、Live2Dならスムーズなアニメーションで動くアプリを開発できると考えています。

関連ブログ

[動画編集] MMDとMovie Studioでステレオスコピック3D動画を作る
[GIMP] GIFアニメーションの作り方
[Unity3D] Unityでプロ生ちゃんMMDモデルを扱う
プロ生ちゃんMMDモデルを踊らせよう
[MMD] プロ生ちゃんのスパッツに厚みを付ける

以上、参考になれば幸いです。