Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Live2D Cubism SDK for Unity(ver 3.0)を使った話

3,541 views

Published on

【年末だよ】Unity お・と・な のLT大会 2017【ポロりしてもいいのよ】で登壇したスライドです。

Published in: Engineering
  • Be the first to comment

Live2D Cubism SDK for Unity(ver 3.0)を使った話

  1. 1. Live2D Cubism SDK for Unity(ver 3.0)を使った話 Unity お・と・な のLT大会 2017
  2. 2. 自己紹介 ▪ 絵描いてる ▪ プログラミングしてる(元CとWeb屋。Unityは勉強中) ▪ 2Dアニメーター(Live2D・SpriteStudio他、AEなど) ▪ Live2Dの講師してる ▪ フリーランス ▪ TwitterID:BURAI_VC2008 ▪ HP:http://yataya2000.com/ ▪ mail:yataya2000.burai@gmail.com
  3. 3. 今日のネタ しゃべること
  4. 4. Live2D Cubism SDK for Unity(ver 3.0)を 使って売り子アプリを作った話
  5. 5. 今年の夏コミ(C92)でこんなもの作りました 使ったツール ▪ Live2D Cubism Editor 3(一般に言うLive2Dのこと) ▪ Unity(2017.1.1f1) ▪ パソコンとタブレット(今回はiPad Pro 9.7 inch) ▪ 愛
  6. 6. 注目してほしいところ
  7. 7. Live2D Cubism SDK for Unity(ver 3.0)を使った話 Unity お・と・な のLT大会 2017
  8. 8. Live2D ver2.1から3.0への違いについて 【Editor】(一般的にLive2Dといったらコチラ。デザイナー向け) ▪ 基本操作をそのままにUIを刷新 ▪ 2.1になかった・要望のあった編集機能を搭載。より便利に。 【SDK】 (エンジニア向けのLive2D) ▪ SDK(for Unity)の導入手順が変更。商業実績が(多分)まだない。 ▪ Twitterとかブログで作った報告がほぼない気がする。
  9. 9. Live2D Editor
  10. 10. https://live2d.github.io/ Live2D SDK
  11. 11. 2017年4月リリース (EditorとSDK)
  12. 12. 夏コミは8月13日 (作ろうと思い立ったのは1週間前)
  13. 13. せっかく新バージョン来たし勉強もかねて やってみようかしら?
  14. 14. Live2D公式のSDKマニュアルを見ながら せっせと作りました。
  15. 15. モデルを配置する 色々と自動でやってくれました。
  16. 16. 1. Live2D組み込みファイル一式を用意
  17. 17. 1. Live2D組み込みファイル一式を用意 ▪ moc3、model3.json、テクスチャファイル Editorの[ファイル]→ [組込み用ファイル書き出し] → [moc3ファイル書き出し]作成 Editorで作成したLive2Dモデルを組み込み側で扱うためのファイルのまとまり。 ▪ モーションファイル(拡張子motion3.json) EditorのAnimatorモードで作成したアニメーション情報が書き出されたファイル モデルの情報 アニメーションの情報
  18. 18. 1. Live2D組み込みファイル一式を用意 モデルの情報アニメーションの情報
  19. 19. 2. SDK(unitypackage)をプロジェクトへインポート
  20. 20. 3. 組み込みファイル一式をフォルダごとProjectビューへD&D 用意した4つの組み込み ファイル一式をフォルダ にまとめてD&D
  21. 21. 3. 組み込みファイル一式をフォルダごとProjectビューへD&D モデルのPrefabが 自動的に生成された
  22. 22. 3. 組み込みファイル一式をフォルダごとProjectビューへD&D Live2Dのモーションフ ァイルが AnimationClipへ自動 変換された
  23. 23. 4. SceneにPrefab追加、AnimationClipをアタッチで完成 ▪ SceneにPrefabを追加してモデルを配置 ▪ 自動変換されたAnimationClipファイルをモデルへアタッチ(Animatorの生成) ▪ うごいた! SDKをインポートしていればLive2DのファイルをUnity用に自動変換してくれる。
  24. 24. これだとアプリを起動しても 決められた動きしかしてくれない
  25. 25. タッチしたい
  26. 26. Live2D SDKの タッチコンポーネント(CubismRaycaster)を使ってみる
  27. 27. 5. CubismRaycasterのしくみ タブレットの画面 顔 髪 腕 指と画面の距離 画面の中 指 アートメッシュ ※アートメッシュ… Live2Dモデルの各々のテクスチャ
  28. 28. 5. CubismRaycasterのしくみ 顔 髪 腕 モデルのrootに CubismRaycaster コンポーネント タッチさせたいアートメッ シュに CubismRaycastable コンポーネント
  29. 29. 5. CubismRaycasterのしくみ タッチ 顔 髪 腕 タッチするとRayが飛ぶ Hit! アートメッシュからHit情報 を取得して色々処理する(自 分でスクリプトを組むところ )
  30. 30. 6. 「CubismRaycaster」コンポーネント(C#)のアタッチ モデルへのタッチを監視するスクリプト 「Add Component」で追加可能 ※「Cubism~.cs」はLive2D SDKのスクリプト モデルのrootに Add Component
  31. 31. 7. 「CubismRaycastable」コンポーネント(C#)をアタッチ アートメッシュのタッチ判定の範囲を設定。 判定を設定したいアートメッシュに「Add Component」 ※「ArtMesh○○」はアートメッシュのID名 アートメッシュ にアタッチ ArtMesh25は顔なので顔に 当たり判定が設定される 顔
  32. 32. 7. 「CubismRaycastable」コンポーネント(C#)をアタッチ 当たり判定の範囲をInspectorの「Precision」で選択可能 ▪ - Bounding Box : そのメッシュを囲う矩形を当たり判定とする。Trianglesよりも負荷が軽い。 ▪ - Triangles : そのメッシュの形状を当たり判定とする。範囲を正確に判定したい場合はこちらを 設定する。 Bounding Box Triangles 顔 顔
  33. 33. 8. CubismRaycaster.Raycastからタッチ判定の結果を取得 新規にスクリプト( CubismHitTest.cs )を作成して取得結果をもとに色々と処理をする。 公式マニュアルのサンプルコードがあるので参考にしよう。
  34. 34. Consoleを出すだけのデバッグコードだった
  35. 35. タッチしてからアニメーションさせる説明がない! (ズコー)
  36. 36. 自分で調べた
  37. 37. 9. CubismRaycaster.Raycastからタッチ判定の結果を取得 Mecanimアニメーションを作成
  38. 38. 10. CubismRaycaster.Raycastからタッチの結果を取得 サンプルコードのHit後の処理にmecanim処理を追加
  39. 39. スライドのスペースの都合上、分岐処理を減らしてます。 (実際はmecanim処理「if (touchTarget == “ArtMesh25”)~ 」のところは もう少したくさん書いた)
  40. 40. 完成!
  41. 41. 感想とまとめ ▪ 3.0からはunitypackage(Live2D Cubism SDK for Unity)1つでLive2D環境が完成。 ▪ Live2D Editorで書き出したモデルをD&Dするだけでコミコミのプレハブを自動生成 ▪ モーションファイルをD&DするだけでAnimationClipへ自動変換 思っていたより動き出すのが早いし、簡単にできた!気がする。
  42. 42. 感想とまとめ しばらく(12/8げんざい)マニュアルを覗いていなかったら ▪ 視線追従の設定 ▪ 自動まばたきの設定 ▪ リップシンクの設定 などなど…マニュアルが追加されたのでやってみようと思っているところ。
  43. 43. ご清聴ありがとうございました。 Unity お・と・な のLT大会 2017

×