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

Contenu connexe

Tendances

2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会
2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会
2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会
Satoshi Noda
 

Tendances (20)

Unity講習会(初級)
Unity講習会(初級)Unity講習会(初級)
Unity講習会(初級)
 
インディーゲームでも「インタラクティブ・ミュージック」!
インディーゲームでも「インタラクティブ・ミュージック」!インディーゲームでも「インタラクティブ・ミュージック」!
インディーゲームでも「インタラクティブ・ミュージック」!
 
息抜きにUnityであそぼう(3D Game Kit Liteの話)
息抜きにUnityであそぼう(3D Game Kit Liteの話)息抜きにUnityであそぼう(3D Game Kit Liteの話)
息抜きにUnityであそぼう(3D Game Kit Liteの話)
 
Unity講座
Unity講座Unity講座
Unity講座
 
【名古屋】2014/2/8 Unity勉強会1
【名古屋】2014/2/8 Unity勉強会1【名古屋】2014/2/8 Unity勉強会1
【名古屋】2014/2/8 Unity勉強会1
 
【名古屋】2014/2/8 Unity勉強会2
【名古屋】2014/2/8 Unity勉強会2【名古屋】2014/2/8 Unity勉強会2
【名古屋】2014/2/8 Unity勉強会2
 
Live2D Cubism SDK for Unity(ver 3.0)を使った話
Live2D Cubism SDK for Unity(ver 3.0)を使った話Live2D Cubism SDK for Unity(ver 3.0)を使った話
Live2D Cubism SDK for Unity(ver 3.0)を使った話
 
2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会
2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会
2015/02/21 GDG神戸 Go on Android ハンズオン&もくもく会
 
Unity サウンドTips 2019
Unity サウンドTips 2019Unity サウンドTips 2019
Unity サウンドTips 2019
 
UnityでVRアプリを作ってみよう! (講演編)
UnityでVRアプリを作ってみよう! (講演編)UnityでVRアプリを作ってみよう! (講演編)
UnityでVRアプリを作ってみよう! (講演編)
 
Google Sheets経由でUnity Localization Packageのデータを更新する & ADXの多言語ボイス音声切り替え機能連携
Google Sheets経由でUnity Localization Packageのデータを更新する & ADXの多言語ボイス音声切り替え機能連携Google Sheets経由でUnity Localization Packageのデータを更新する & ADXの多言語ボイス音声切り替え機能連携
Google Sheets経由でUnity Localization Packageのデータを更新する & ADXの多言語ボイス音声切り替え機能連携
 
UnityのMultiplayサービスの得意な事
UnityのMultiplayサービスの得意な事UnityのMultiplayサービスの得意な事
UnityのMultiplayサービスの得意な事
 
Unityと.NET
Unityと.NETUnityと.NET
Unityと.NET
 
Scene操作系のエディター拡張Util2セット
Scene操作系のエディター拡張Util2セットScene操作系のエディター拡張Util2セット
Scene操作系のエディター拡張Util2セット
 
Unityのサウンド状況を調べまくって分かったアレコレ
Unityのサウンド状況を調べまくって分かったアレコレUnityのサウンド状況を調べまくって分かったアレコレ
Unityのサウンド状況を調べまくって分かったアレコレ
 
Unity ゲーム開発
Unity ゲーム開発Unity ゲーム開発
Unity ゲーム開発
 
サウンド実装の手間を省くための CRI ADX2 UnityAudio完全に理解した
サウンド実装の手間を省くための CRI ADX2 UnityAudio完全に理解したサウンド実装の手間を省くための CRI ADX2 UnityAudio完全に理解した
サウンド実装の手間を省くための CRI ADX2 UnityAudio完全に理解した
 
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
【UNREAL FES 2015 OSAKA】2DゲームをUEで作るってどうなの?
 
波に乗ってUnity3Dを使ってみているんだが (Ameba x Pixiv 合同勉強会LT)
波に乗ってUnity3Dを使ってみているんだが (Ameba x Pixiv 合同勉強会LT)波に乗ってUnity3Dを使ってみているんだが (Ameba x Pixiv 合同勉強会LT)
波に乗ってUnity3Dを使ってみているんだが (Ameba x Pixiv 合同勉強会LT)
 
積み上げ棒グラフのリザルト画面を作る&いい感じに音をつける
積み上げ棒グラフのリザルト画面を作る&いい感じに音をつける積み上げ棒グラフのリザルト画面を作る&いい感じに音をつける
積み上げ棒グラフのリザルト画面を作る&いい感じに音をつける
 

Unite2014 Live2D x Unity x Kinect 2