1. Live2D Cubism SDK for
Unity（ver 3.0）を使った話
Unity お・と・な のLT大会 2017

2. 自己紹介
▪ 絵描いてる
▪ プログラミングしてる（元CとWeb屋。Unityは勉強中）
▪ 2Dアニメーター（Live2D・SpriteStudio他、AEなど）
▪ Live2Dの講師してる
▪ フリーランス
▪ TwitterID：BURAI_VC2008
▪ HP：http://yataya2000.com/
▪ mail：yataya2000.burai@gmail.com

3. 今日のネタ
しゃべること

4. Live2D Cubism SDK for Unity（ver 3.0）を
使って売り子アプリを作った話

5. 今年の夏コミ（C92）でこんなもの作りました
使ったツール
▪ Live2D Cubism Editor 3（一般に言うLive2Dのこと）
▪ Unity（2017.1.1f1）
▪ パソコンとタブレット（今回はiPad Pro 9.7 inch）
▪ 愛

6. 注目してほしいところ

7. Live2D Cubism SDK for
Unity（ver 3.0）を使った話
Unity お・と・な のLT大会 2017

9. Live2D ver2.1から3.0への違いについて
【Editor】（一般的にLive2Dといったらコチラ。デザイナー向け）
▪ 基本操作をそのままにUIを刷新
▪ 2.1になかった・要望のあった編集機能を搭載。より便利に。
【SDK】 （エンジニア向けのLive2D）
▪ SDK（for Unity）の導入手順が変更。商業実績が（多分）まだない。
▪ Twitterとかブログで作った報告がほぼない気がする。

10. Live2D Editor

11. https://live2d.github.io/
Live2D SDK

12. 2017年4月リリース
（EditorとSDK)

13. 夏コミは8月13日
（作ろうと思い立ったのは1週間前）

14. せっかく新バージョン来たし勉強もかねて
やってみようかしら？

15. Live2D公式のSDKマニュアルを見ながら
せっせと作りました。

16. モデルを配置する
色々と自動でやってくれました。

17. 1. Live2D組み込みファイル一式を用意

18. 1. Live2D組み込みファイル一式を用意
▪ moc3、model3.json、テクスチャファイル
Editorの[ファイル]→ [組込み用ファイル書き出し] → [moc3ファイル書き出し]作成
Editorで作成したLive2Dモデルを組み込み側で扱うためのファイルのまとまり。
▪ モーションファイル（拡張子motion3.json）
EditorのAnimatorモードで作成したアニメーション情報が書き出されたファイル
モデルの情報
アニメーションの情報

19. 1. Live2D組み込みファイル一式を用意
モデルの情報アニメーションの情報

20. 2. SDK（unitypackage）をプロジェクトへインポート

21. 3. 組み込みファイル一式をフォルダごとProjectビューへD&D
用意した4つの組み込み
ファイル一式をフォルダ
にまとめてD&D

22. 3. 組み込みファイル一式をフォルダごとProjectビューへD&D
モデルのPrefabが
自動的に生成された

23. 3. 組み込みファイル一式をフォルダごとProjectビューへD&D
Live2Dのモーションフ
ァイルが
AnimationClipへ自動
変換された

24. 4. SceneにPrefab追加、AnimationClipをアタッチで完成
▪ SceneにPrefabを追加してモデルを配置
▪ 自動変換されたAnimationClipファイルをモデルへアタッチ（Animatorの生成）
▪ うごいた！
SDKをインポートしていればLive2DのファイルをUnity用に自動変換してくれる。

25. これだとアプリを起動しても
決められた動きしかしてくれない

26. タッチしたい

27. Live2D SDKの
タッチコンポーネント（CubismRaycaster）を使ってみる

28. 5. CubismRaycasterのしくみ
タブレットの画面
顔
髪
腕
指と画面の距離
画面の中
指
アートメッシュ
※アートメッシュ…
Live2Dモデルの各々のテクスチャ

29. 5. CubismRaycasterのしくみ
顔
髪
腕
モデルのrootに
CubismRaycaster
コンポーネント
タッチさせたいアートメッ
シュに
CubismRaycastable
コンポーネント

30. 5. CubismRaycasterのしくみ
タッチ
顔
髪
腕
タッチするとRayが飛ぶ
Hit！
アートメッシュからHit情報
を取得して色々処理する（自
分でスクリプトを組むところ
）

31. 6. 「CubismRaycaster」コンポーネント(C#)のアタッチ
モデルへのタッチを監視するスクリプト
「Add Component」で追加可能
※「Cubism～.cs」はLive2D SDKのスクリプト
モデルのrootに
Add Component

32. 7. 「CubismRaycastable」コンポーネント(C#)をアタッチ
アートメッシュのタッチ判定の範囲を設定。
判定を設定したいアートメッシュに「Add
Component」
※「ArtMesh○○」はアートメッシュのID名
アートメッシュ
にアタッチ
ArtMesh25は顔なので顔に
当たり判定が設定される
顔

33. 7. 「CubismRaycastable」コンポーネント(C#)をアタッチ
当たり判定の範囲をInspectorの「Precision」で選択可能
▪ - Bounding Box : そのメッシュを囲う矩形を当たり判定とする。Trianglesよりも負荷が軽い。
▪ - Triangles : そのメッシュの形状を当たり判定とする。範囲を正確に判定したい場合はこちらを
設定する。
Bounding Box Triangles
顔 顔

34. 8. CubismRaycaster.Raycastからタッチ判定の結果を取得
新規にスクリプト（ CubismHitTest.cs ）を作成して取得結果をもとに色々と処理をする。
公式マニュアルのサンプルコードがあるので参考にしよう。

36. Consoleを出すだけのデバッグコードだった

37. タッチしてからアニメーションさせる説明がない！
（ｽﾞｺｰ）

38. 自分で調べた

39. 9. CubismRaycaster.Raycastからタッチ判定の結果を取得
Mecanimアニメーションを作成

40. 10. CubismRaycaster.Raycastからタッチの結果を取得
サンプルコードのHit後の処理にmecanim処理を追加

41. スライドのスペースの都合上、分岐処理を減らしてます。
（実際はmecanim処理「if (touchTarget == “ArtMesh25”)～ 」のところは
もう少したくさん書いた）

42. 完成！

43. 感想とまとめ
▪ 3.0からはunitypackage（Live2D Cubism SDK for Unity）1つでLive2D環境が完成。
▪ Live2D Editorで書き出したモデルをD&Dするだけでコミコミのプレハブを自動生成
▪ モーションファイルをD&DするだけでAnimationClipへ自動変換
思っていたより動き出すのが早いし、簡単にできた！気がする。

44. 感想とまとめ
しばらく（12/8げんざい）マニュアルを覗いていなかったら
▪ 視線追従の設定
▪ 自動まばたきの設定
▪ リップシンクの設定
などなど…マニュアルが追加されたのでやってみようと思っているところ。

45. ご清聴ありがとうございました。
Unity お・と・な のLT大会 2017