Live2D を使ったアプリ開発Unite2014 2 日目

自己紹介• 嶋崎一成（ 0x14 歳）–学生–サイバーノイズで修行中

–普段はアプリ開発とか

内容– 僕とリンと Live2D– Unity で Live2D を使ったアプリを開発する– まとめ

僕とリンと Live2D全てはここから始まった

ある日スマホでアプリを起動

動いたっ！

早かった？

Live2D って言うらしい…↑ 運命の出会い

• アプリ博で Live2D のブースを見かける• プログラマ募集中だったので応募

• Live2D のアプリとか作ってる　←いまここ

ところで

Q. リンちゃんは好きですか？

好きですよね！！

好きなはずです !!

リンちゃんなう！聴きながら寝たつもりが朝になってた

あのリボンを見ると昼食後の眠気が吹っ飛ぶ

というか

生まれ変わるなら

あのリボンになりたい

好きすぎて rin 言語とか作る

R と I と N だけでいろんなものを表現しようとした結果（一例

職場の方から一言

「リン廃だったのかｗ」

※ リン廃 = 重度の鏡音リン依存症もしくは鏡音リン中毒の人を指す言葉である。　　　　　　　　　　　　　　　　　　　　　　　　　　　（ニコニコ大百科より

最近気づいたけど（ 1 ）

「あ、そうかリンちゃんも　　　動くようになるのか…」

最近気づいたけど（ 1 ）

「動くようになるのか…」

Σ( ﾟД ﾟ )

ktkr!!

最近気づいたけど（ 1 ）

自分の好きなキャラが動く！！

最近気づいたけど（ 2 ）

【悲報】俺氏絵が描けない

最近気づいたけど（ 2 ）

参考に動画サイトとかまわってた

最近気づいたけど（ 3 ）

気づいたらミクも好きになってた

最近気づいたけど（ 3 ）

本屋さんでボカロ専門コーナーへ…

Σ( ﾟД ﾟ )

最近気づいたけど（ 4 ）

「こんな本を　見かけちゃうと　つい手に取ってしまう。

　やるしかないよね !? 」

• モデルを作ったりとかその間に挫折したりとかいろいろ…（略

このスライドには「リン」という単語が多く含まれますが、「自分の嫁」に変換してご覧ください

Unity で Live2D を使ったアプリを開発する

思ったより簡単に作れる

Unity × Live2D– Live2D LIVE を作ってみた– Unity で Live2D を動かしてみる– Unity × Live2D × いろんなデバイス

Live2D LIVE を作ってみた

Live2D LIVE を作ってみた – 概要

• イベントや生放送で使えるリアルタイムコントロールシステム

Live2D LIVE を作ってみた – 概要

• リアルタイムで自分の声と動きをキャラに反映させる

Live2D LIVE を作ってみた – 概要

•自分のなりたいキャラになれる

Live2D LIVE を作ってみた – 概要

DEMOミク（ Kinect ）チトセ（マイク）

Live2D LIVE を作ってみた – 実績

• コードギアス

©SUNRISE／ PROJECT GEASS　 Character Design (c)2006-2008 CLAMP ・ ST

Live2D LIVE を作ってみた – 実績

• GDC （ Game Developers Conference ）

Live2D LIVE を作ってみた – 実績

• AnimeJapan2014

Live2D LIVE を作ってみた – 構成

サーバ

ネットワーク

クライアント A

クライアント B

Unity × Live2D– Live2D LIVE を作ってみた– Unity で Live2D を動かしてみる– Unity × Live2D × いろんなデバイス

Unity で Live2D を動かしてみる

Unity で Live2D を動かしてみる

• 用意するもの– Live2D ライブラリ (.dll)– Live2D のリソース

• モデルファイル (.moc)• モーションファイル (.mtn)• テクスチャ (.png)

Unity で Live2D を動かしてみる

• Live2D モデルを表示するまでの基本的な流れ

– 初期化• インスタンスの作成• テクスチャの関連付け• 表示位置と大きさの指定

– 更新• 頂点の更新• 描画

初期化

更新

Unity で Live2D を動かしてみる

• Live2D モデルの初期化

void Start () {Live2D.init (); // 初期化

live2DModel = Live2DModelUnity.loadModel(mocFile.bytes); // moc の読み込み

for(int i = 0; i<textures.Length; i++){

live2DModel.setTexture(i, textures[i]); // テクスチャを設定}

}

Unity で Live2D を動かしてみる

• Live2D モデルの位置やサイズ設定、更新・描画

void OnRenderObject(){

Matrix4x4 m1=Matrix4x4.Ortho(0, モデルのサイズ , モデルのサイズ , 0, -1, 1);Matrix4x4 m2 = transform.localToWorldMatrix;Matrix4x4 m3 = m2*m1;

live2DModel.setMatrix(m3); // 位置の設定live2DModel.update(); // 頂点の更新live2DModel.draw(); // 描画

}

• 実際にミクを表示してみる

Unity × Live2D– Unity で Live2D を動かしてみる– Live2D LIVE を作ってみた– Unity × Live2D × いろんなデバイスを組み合わせてみる

Unity × Live2D × いろんなデバイス

– Unity × Live2D × ？？？

– キャラを動かす ：ゲームパッド– リップシンク（口パク）　 ：マイク– キャラになってみる ： Kinect– 指先で触れる ： Leap Motion– 視線で通じ合う ： The Eye Tribe

Unity × Live2D × いろんなデバイス

– Unity × Live2D × ？？？

– キャラを動かす ：ゲームパッド– リップシンク（口パク）　 ：マイク– キャラになってみる ： Kinect– 指先で触れる ： Leap Motion– 視線で通じ合う ： The Eye Tribe

Unity × Live2D × ゲームパッド

Unity × Live2D × ゲームパッド

自分の好きなタイミングでリンちゃんにお気に入りのポーズをとってもらいたい！

Unity × Live2D × ゲームパッド

「ゲームパッドでモーション再生」

– Live2D でモーションを再生してみる– ゲームパッドで操作してみる

• Live2D モデルのモーションを再生する

– モーションクラス• インスタンスの作成• 設定

– モーション管理クラス• インスタンスの作成• モーション再生• モデルの更新• モーションの終了

モーション設定

更新

モーション反映

• ゲームパッドで操作してみる

– Unity の InputManager で確認

– 入力に反応するVoid Update(){

if( Input.GetButtonDown( "Fire1" ) ) { //Fire1 が押された時の処理

}}

• 重要なのはたった 3 行くらい

実際に Unity で確認

Unity × Live2D × いろんなデバイス

– Unity × Live2D × ？？？

– キャラを動かす ：ゲームパッド– リップシンク（口パク）　 ：マイク– キャラになってみる ： Kinect– 指先で触れる ： Leap Motion– 視線で通じ合う ： The Eye Tribe

Unity × Live2D × マイク

Unity × Live2D × マイク

あ、

Unity × Live2D × マイク

リンちゃんが

しゃべってるように見せたい

Unity × Live2D × マイク

「 Live2D モデルに口パクを実装する」

– マイクの音量を取得する– 音量をモデルに最適化してセット

Unity × Live2D × マイク

• マイクの値を取得する

– Microphone クラスを使ってマイクの値を取得する

• Live2D モデルにパラメータを設定する

– 値を上書きする//PARAM_ANGLE_X を 30 に設定live2DModel.setParamFloat( "PARAM_ANGLE_X", 30 ,1 );

• 重要なのはたった 1 行くらい

実際に Unity で確認

Unity × Live2D × いろんなデバイス

– Unity × Live2D × ？？？

– キャラを動かす ：ゲームパッド– リップシンク（口パク）　 ：マイク– キャラになってみる ： Kinect– 指先で触れる ： Leap Motion– 視線で通じ合う ： The Eye Tribe

Unity × Live2D × Kinect

Unity × Live2D × Kinect

リンちゃんに

Unity × Live2D × Kinect

なりたい！

Unity × Live2D × Kinect

「 Live2D モデルに体の情報を反映させる」

– Kinect と接続する– Kinect から取得した値をモデルに最適化してセット

• Kinect と接続する

– TCP/IP で通信– Unity をサーバ、 Kinect をクライアントとして扱う– Unity にサーバの機能を追加– Kinect クライアントとしてアプリを作成– お互いを接続

サーバ

ネットワーク

クライアントA

クライアントB

• 重要なのはたった…ここまでの知識でいける！

実際に Unity で確認

Unity × Live2D × いろんなデバイス

– Unity × Live2D × ？？？

– キャラを動かす ：ゲームパッド– リップシンク（口パク）　 ：マイク– キャラになってみる ： Kinect– 指先で触れる ： Leap Motion– 視線で通じ合う ： The Eye Tribe

Unity と Live2D と Leap Motion を組み合わせてみた

• 仕組み– SDK のサンプルを改造– Unity を使ったら簡単に表示できました– Leap Motion で取れる値を利用してモデルを操作している– ジェスチャーを認識して表情の切り替えやモーションを再生

• 1時間ぐらいでできた

Unity × Live2D × いろんなデバイス

– Unity × Live2D × ？？？

– キャラを動かす ：ゲームパッド– リップシンク（口パク）　 ：マイク– キャラになってみる ： Kinect– 指先で触れる ： Leap Motion– 視線で通じ合う ： The Eye Tribe

Live2D と The Eye Tribe を組み合わせてみた

• 仕組み– SDK のサンプルを改造– Unity を使ったら簡単に表示できました– The Eye Tribe で取れる値を利用してモデルを操作している– 顔のあたりに視線が行くとモーションを再生

• 2時間ぐらいでできた

• センサデバイスと組み合わせる– センサデバイスから値を取得– Live2D モデルに最適な値に変換– setParamFloat() で値を設定

• センサデバイスの面白い、良いところ– サーバとクライアントっていう考え方– もともとの数値情報を意味あるものとして利用しやすい– ジェスチャが使えれば、イベントが発生とかできる

（例 Kinect では手を振るとモデルの手を振るモーションを再生などができた

– SDK で Unity のサンプルがあることが多く、 Unity ですぐに試すことができる

• センサデバイスで考えること– センサデバイスの特性（限界、スイートスポット）– センサの値を安定させる方法

• Live2D は思ったより

簡単

まとめ今とこれからのこと

• なぜ Live2D を使うのか

– 原画をそのままに動かすことができる– 原画の良さを生かしたまま作品を作ることができる

（世界観を壊さない）– モデルを作れば多くのプラットフォームに展開できる

• 2次元のキャラを原画そのままに、リアルタイムでインタラクティブに表現できるようになった

革命

• 自分の好きなキャラがデスクトップで微笑んだり• スマートフォンの中でナビゲーションしてくれたり• PV でアクションさせたり• 人工知能などが発達した時キャラを表現する器にもなる• ギャルゲーとかエ■ゲーとかでも…

かつてないほどに、キャラクターたちが活き活きとする

可能性• Live2D は教育機関でも採用され始めている• 無料版や学生版がある• SDK も幅広く対応• モデルのサンプルもある• 公式フォーラムで情報がやりとりできる

• 作品のコンテストもやってる

理由をお探しのあなたへ• すぐに始められる• 流行り始めた今だから学ぶ価値がある

• 愛する嫁のためならやらない理由がない

僕自身が思ったこと

Live2D のキャラを動かすのは

簡単で楽しい

想像してみてください

• 自分の描いた絵が活き活きと

動き出す

• 自分の好きなキャラが自分のデスクトップで微笑む姿

• 声優さんがリアルタイムにキャラを演じるイベント

日本で生まれた新しい表現方法で世界を驚かせましょう

ご清聴ありがとうございました