Live2Dを使ったアプリ開発
Unite2014 2日目
自己紹介
• 嶋崎一成（0x14歳）
– 学生
– サイバーノイズで修行中
– 普段はアプリ開発とか
内容
– 僕とリンとLive2D
– UnityでLive2Dを使ったアプリを開発する
– まとめ
全てはここから始まった
僕とリンとLive2D
ある日スマホでアプリを起動
動いたっ！
早かった？
Live2Dって言うらしい…
↑運命の出会い
• アプリ博でLive2Dのブースを見かける
• プログラマ募集中だったので応募
• Live2Dのアプリとか作ってる
←いまここ
ところで
Q.リンちゃんは好きですか？
好きですよね！！
好きなはずです!!
リンちゃんなう！
聴きながら寝たつもりが
朝になってた
あのリボンを見ると
昼食後の眠気が吹っ飛ぶ
というか
生まれ変わるなら
リボンになりたい
あの
好きすぎてrin言語とか作る
RとIとNだけでいろんなものを表現しようとした結果（一例
職場の方から一言
「リン廃だったのかｗ」
※リン廃=重度の鏡音リン依存症もしくは鏡音リン中毒の人を指す言葉である。
（ニコニコ大百科より
最近気づいたけど（1）
「あ、そうかリンちゃんも
動くようになるのか…」
最近気づいたけど（1）
「動くようになるのか…」
Σ(ﾟДﾟ)
最近気づいたけど（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のキャラを動かすのは
簡単で楽しい
想像
してみてください
• 自分の描いた絵が活き活きと
動き出す
• 自分の好きなキャラが
自分のデスクトップで微笑む姿
• 声優さんが
リアルタイムにキャラを演じる
イベント
日本で生まれた
新しい表現方法で
世界を驚かせましょう
ご清聴ありがとうございました
© Copyright 2024 Paperzz
