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

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

9.
Live2D Editor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

25.
タッチしたい

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

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

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

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

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

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

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

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

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

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

36.
自分で調べた

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

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

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

40.
完成！

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

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

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