Unite2014 Live2D x Unity x Kinect 2

5,746 views

Published on

Published in: Entertainment & Humor
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,746
On SlideShare
0
From Embeds
0
Number of Embeds
942
Actions
Shares
0
Downloads
26
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Unite2014 Live2D x Unity x Kinect 2

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

×