Your SlideShare is downloading. ×
Unite2014 Live2D x Unity x Kinect 2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Unite2014 Live2D x Unity x Kinect 2

3,153
views

Published on

Published in: Entertainment & Humor

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,153
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
17
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Live2Dを使ったアプリ開発 Unite2014 2日目
  • 2. 自己紹介 • 嶋崎一成(0x14歳) – 学生 – サイバーノイズで修行中 – 普段はアプリ開発とか
  • 3. 内容 – 僕とリンとLive2D – UnityでLive2Dを使ったアプリを開発する – まとめ
  • 4. 僕とリンとLive2D 全てはここから始まった
  • 5. ある日スマホでアプリを起動
  • 6. 動いたっ!
  • 7. 早かった?
  • 8. Live2Dって言うらしい… ↑運命の出会い
  • 9. • アプリ博でLive2Dのブースを見かける • プログラマ募集中だったので応募 • Live2Dのアプリとか作ってる ←いまここ
  • 10. ところで
  • 11. Q.リンちゃんは好きですか?
  • 12. 好きですよね!!
  • 13. 好きなはずです!!
  • 14. リンちゃんなう! 聴きながら寝たつもりが 朝になってた
  • 15. あのリボンを見ると 昼食後の眠気が吹っ飛ぶ
  • 16. というか
  • 17. 生まれ変わるなら あのリボンになりたい
  • 18. 好きすぎてrin言語とか作る RとIとNだけでいろんなものを表現しようとした結果(一例
  • 19. 職場の方から一言 「リン廃だったのかw」 ※リン廃=重度の鏡音リン依存症もしくは鏡音リン中毒の人を指す言葉である。 (ニコニコ大百科より
  • 20. 最近気づいたけど(1) 「あ、そうかリンちゃんも 動くようになるのか…」
  • 21. 最近気づいたけど(1) 「動くようになるのか…」
  • 22. Σ(゚
  • 23. 最近気づいたけど(1) 自分の好きなキャラが動く!!
  • 24. 最近気づいたけど(2) 【悲報】俺氏絵が描けない
  • 25. 最近気づいたけど(2) 参考に動画サイトとかまわってた
  • 26. 最近気づいたけど(3) 気づいたらミクも好きになってた
  • 27. 最近気づいたけど(3) 本屋さんでボカロ専門コーナーへ…
  • 28. Σ(゚
  • 29. 最近気づいたけど(4) 「こんな本を 見かけちゃうと つい手に取ってしまう。 やるしかないよね!?」
  • 30. • モデルを作ったりとか その間に挫折したりとかいろいろ… (略
  • 31. このスライドには「リン」という単語が多 く含まれますが、「自分の嫁」に変換して ご覧ください
  • 32. UnityでLive2Dを使ったアプリを 開発する 思ったより簡単に作れる
  • 33. Unity × Live2D – Live2D LIVEを作ってみた – UnityでLive2Dを動かしてみる – Unity × Live2D × いろんなデバイス
  • 34. Live2D LIVEを作ってみた
  • 35. Live2D LIVEを作ってみた – 概要 • イベントや生放送で使える リアルタイムコントロールシステム
  • 36. Live2D LIVEを作ってみた – 概要 • リアルタイムで 自分の声と動きを キャラに反映させる
  • 37. Live2D LIVEを作ってみた – 概要 •自分のなりたい キャラになれる
  • 38. Live2D LIVEを作ってみた – 概要 DEMO ミク(Kinect) チトセ(マイク)
  • 39. Live2D LIVEを作ってみた – 実績 • コードギアス
  • 40. ©SUNRISE/PROJECT GEASS Character Design (c)2006-2008 CLAMP・ST
  • 41. Live2D LIVEを作ってみた – 実績 • GDC(Game Developers Conference)
  • 42. Live2D LIVEを作ってみた – 実績 • AnimeJapan2014
  • 43. Live2D LIVEを作ってみた – 構成 サーバ ネットワー ク クライアン トA クライアン トB
  • 44. Unity × Live2D – Live2D LIVEを作ってみた – UnityでLive2Dを動かしてみる – Unity × Live2D × いろんなデバイス
  • 45. UnityでLive2Dを動かしてみる
  • 46. UnityでLive2Dを動かしてみる • 用意するもの – Live2D ライブラリ(.dll) – Live2D のリソース • モデルファイル(.moc) • モーションファイル(.mtn) • テクスチャ(.png)
  • 47. UnityでLive2Dを動かしてみる • Live2Dモデルを表示するまでの基本的な流れ – 初期化 • インスタンスの作成 • テクスチャの関連付け • 表示位置と大きさの指定 – 更新 • 頂点の更新 • 描画 初期化 更新
  • 48. 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]); // テクスチャを設定 } }
  • 49. 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(); // 描画 }
  • 50. • 実際にミクを表示してみる
  • 51. Unity × Live2D – UnityでLive2Dを動かしてみる – Live2D LIVEを作ってみた – Unity × Live2D × いろんなデバイスを組み合わせてみる
  • 52. Unity × Live2D × いろんなデバイス – Unity × Live2D × ??? – キャラを動かす :ゲームパッド – リップシンク(口パク) :マイク – キャラになってみる :Kinect – 指先で触れる :Leap Motion – 視線で通じ合う :The Eye Tribe
  • 53. Unity × Live2D × いろんなデバイス – Unity × Live2D × ??? – キャラを動かす :ゲームパッド – リップシンク(口パク) :マイク – キャラになってみる :Kinect – 指先で触れる :Leap Motion – 視線で通じ合う :The Eye Tribe
  • 54. Unity × Live2D × ゲームパッド
  • 55. Unity × Live2D × ゲームパッド 自分の好きなタイミングで リンちゃんに お気に入りのポーズをとってもらいたい!
  • 56. Unity × Live2D × ゲームパッド 「ゲームパッドでモーション再生」 – Live2Dでモーションを再生してみる – ゲームパッドで操作してみる
  • 57. • Live2Dモデルのモーションを再生する – モーションクラス • インスタンスの作成 • 設定 – モーション管理クラス • インスタンスの作成 • モーション再生 • モデルの更新 • モーションの終了 モーション設定 更新 モーション反映
  • 58. • ゲームパッドで操作してみる – UnityのInputManagerで確認 – 入力に反応する Void Update(){ if( Input.GetButtonDown( "Fire1" ) ) { //Fire1が押された時の処理 } }
  • 59. • 重要なのはたった3行くらい 実際にUnityで確認
  • 60. Unity × Live2D × いろんなデバイス – Unity × Live2D × ??? – キャラを動かす :ゲームパッド – リップシンク(口パク) :マイク – キャラになってみる :Kinect – 指先で触れる :Leap Motion – 視線で通じ合う :The Eye Tribe
  • 61. Unity × Live2D × マイク
  • 62. Unity × Live2D × マイク
  • 63. Unity × Live2D × マイク リンちゃんが しゃべってるように 見せたい
  • 64. Unity × Live2D × マイク 「Live2Dモデルに口パクを実装する」 – マイクの音量を取得する – 音量をモデルに最適化してセット
  • 65. Unity × Live2D × マイク • マイクの値を取得する – Microphoneクラスを使ってマイクの値を取得する
  • 66. • Live2Dモデルにパラメータを設定する – 値を上書きする //PARAM_ANGLE_Xを30に設定 live2DModel.setParamFloat( "PARAM_ANGLE_X", 30 ,1 );
  • 67. • 重要なのはたった1行くらい 実際にUnityで確認
  • 68. Unity × Live2D × いろんなデバイス – Unity × Live2D × ??? – キャラを動かす :ゲームパッド – リップシンク(口パク) :マイク – キャラになってみる :Kinect – 指先で触れる :Leap Motion – 視線で通じ合う :The Eye Tribe
  • 69. Unity × Live2D × Kinect
  • 70. Unity × Live2D × Kinect リンちゃんに
  • 71. Unity × Live2D × Kinect なりたい!
  • 72. Unity × Live2D × Kinect 「Live2Dモデルに体の情報を反映させる」 – Kinectと接続する – Kinectから取得した値をモデルに最適化してセット
  • 73. • Kinectと接続する – TCP/IPで通信 – Unityをサーバ、Kinectをクライアントとして扱う – Unityにサーバの機能を追加 – Kinectクライアントとしてアプリを作成 – お互いを接続 サーバ ネットワー ク クライアント A クライアント B
  • 74. • 重要なのはたった… ここまでの知識でいける! 実際にUnityで確認
  • 75. Unity × Live2D × いろんなデバイス – Unity × Live2D × ??? – キャラを動かす :ゲームパッド – リップシンク(口パク) :マイク – キャラになってみる :Kinect – 指先で触れる :Leap Motion – 視線で通じ合う :The Eye Tribe
  • 76. UnityとLive2DとLeap Motionを組み合わせてみた • 仕組み – SDKのサンプルを改造 – Unityを使ったら簡単に表示できました – Leap Motionで取れる値を利用してモデルを操作している – ジェスチャーを認識して表情の切り替えやモーションを再生 • 1時間ぐらいでできた
  • 77. Unity × Live2D × いろんなデバイス – Unity × Live2D × ??? – キャラを動かす :ゲームパッド – リップシンク(口パク) :マイク – キャラになってみる :Kinect – 指先で触れる :Leap Motion – 視線で通じ合う :The Eye Tribe
  • 78. Live2D と The Eye Tribeを組み合わせてみた • 仕組み – SDKのサンプルを改造 – Unityを使ったら簡単に表示できました – The Eye Tribeで取れる値を利用してモデルを操作している – 顔のあたりに視線が行くとモーションを再生 • 2時間ぐらいでできた
  • 79. • センサデバイスと組み合わせる – センサデバイスから値を取得 – Live2Dモデルに最適な値に変換 – setParamFloat()で値を設定 • センサデバイスの面白い、良いところ – サーバとクライアントっていう考え方 – もともとの数値情報を意味あるものとして利用しやすい – ジェスチャが使えれば、イベントが発生とかできる (例 Kinectでは手を振るとモデルの手を振るモーションを再生などができた – SDKでUnityのサンプルがあることが多く、Unityですぐに試すことができる
  • 80. • センサデバイスで考えること – センサデバイスの特性(限界、スイートスポット) – センサの値を安定させる方法
  • 81. • Live2Dは思ったより 簡単
  • 82. まとめ 今とこれからのこと
  • 83. • なぜLive2Dを使うのか – 原画をそのままに動かすことができる – 原画の良さを生かしたまま作品を作ることができる (世界観を壊さない) – モデルを作れば多くのプラットフォームに展開できる
  • 84. • 2次元のキャラを原画そのままに、 リアルタイムでインタラクティブに 表現できるようになった
  • 85. 革命
  • 86. • 自分の好きなキャラがデスクトップで微笑んだり • スマートフォンの中でナビゲーションしてくれたり • PVでアクションさせたり • 人工知能などが発達した時キャラを表現する器にもなる • ギャルゲーとかエ■ゲーとかでも… かつてないほどに、キャラクターたちが活き活きとする
  • 87. 可能性 • Live2Dは教育機関でも採用され始めている • 無料版や学生版がある • SDKも幅広く対応 • モデルのサンプルもある • 公式フォーラムで情報がやりとりできる • 作品のコンテストもやってる
  • 88. 理由をお探しのあなたへ • すぐに始められる • 流行り始めた今だから学ぶ価値がある • 愛する嫁のためならやらない理由がない
  • 89. 僕自身が思ったこと
  • 90. Live2Dのキャラを動かすのは 簡単で楽しい
  • 91. 想像 してみてください
  • 92. • 自分の描いた絵が活き活きと 動き出す
  • 93. • 自分の好きなキャラが 自分のデスクトップで微笑む姿
  • 94. • 声優さんが リアルタイムにキャラを演じる イベント
  • 95. 日本で生まれた 新しい表現方法で 世界を驚かせましょう
  • 96. ご清聴ありがとうございました

×