Live2D SDK for Unity に自作モデルと自作モーションを組み込む 使ったモデルの一般公開はやめておきます。ごめんなさい。 資料作成は2016年3月のため、今現在の情報と異なる場合があります。ご了承ください。 動作している様子はこちらをご覧ください。 http://kden.hatenablog.com/entry/2016/12/11/000758

1. Live2D in Unity
Lve2D SDK for Unity に自作モデルと自作モーションを組み込む
1

2. まずは準備から…
2

3. 事前準備
• Live2D Cubism SDK for Unity 2.1のダウンロード
• http://sites.cybernoids.jp/cubism-sdk2/unity2-1
• Unity 5 のインストール
• https://unity3d.com/jp/5
• Unityから起動できるエディタ(VS2013など)の準備
• Live2D Viewer のダウンロード
• http://sites.cybernoids.jp/cubism2/tools/live2d-viewer
• 輪講用資料のダウンロード
3

4. 事前準備(任意)
• Live2D Cubism Modelerのダウンロード
• モデル作成などに使います
• Live2D Cubism Animatorのダウンロード
• モーション作成に使います
• 適当なエディタ(Atom,Terapad,SublimeTex etc)
• VSの起動が遅いのが嫌な人
• 今回は時間の都合上モデルとモーションは準備しました
4

5. Live2Dとは
5

6. Live2D とは?
• イラストを動かせる
• 変形をうまい具合にやってくれる
• コマごとの絵を描かなくていい
• 3Dモデルを準備しなくてもいい(ある程度)
• 立ち絵一枚からでもOK
• いろいろな環境で動かせる
• Unity, Windows, Android, iOS,…
6

7. 出てくる拡張子の説明
• “.cmox”
• Editorで使う編集用ファイル
• “.canx”
• Animatorで使う編集用ファイル
• “.moc” ←重要
• モデルの書き出しファイル
• Unity、Facerigなどでも使う
• “.mtn”
• モーションが記述されたファイル
• “.json”
• (今回は)様々な設定が記述されたファイル
7

8. Live2Dをとりあえず触る
• Live2D Cubism Animator でモデルを開く
• モデルファイル(*.moc)をD&D
• ファイル -> 開く
• *.moc をダブルクリック
• 髪の毛が物理してない
• 触らないと絵は動かない
• 触ってもモーションが再生されるとかはない
8

9. モデルの設定
• Live2D Cubism Animatorでモデルを開く
• サンプルの物理演算を適応する
• プロジェクト -> サンプル -> 物理演算:髪揺れ
• 髪の毛が物理する
• 今回のモデルは特に違和感がないので無調整で行きます
• 適応した物理演算の設定を保存しておく(重要)
• Sample Physics.jsonを右クリック→保存
• “モデル名.physics.json”にしておくとわかりやすい
9

10. Live2DをUnityで
10

11. SDK for Unityを使う
• UnityでSDK付属のサンプルのシーンを開く
• ¥Live2D_SDK_Unity_2.1.00_1_jp
• ¥sample
• ¥SampleApp1
• ¥Assets
• ¥Scene
• Sample.unity
• とりあえず再生▶
11

12. Unityで触ってみる
• キャラを触ると反応がある・・・はず
• SDKではタップ、フリック、端末を振るなどを検知
• アクションが起きた位置の画像で、再生するモーションが変わる
• 設定はC#とjsonで記述(後述)
• 右下の歯車でモデルを変えることができる
• 今回はここで変えられるモデルに自分のモデルを追加する
12

13. Unityにモデルを追加する
13

14. モデルをアセットに追加する
• .moc, .json, .mtnなどが入ったディレクトリ一式を
UnityのAssets -> Resources -> live2d に追加
14

15. モデルをヒエラルキに追加する
• 上の方に”Live2D”なるメニューがある
• Live2D -> Create Live2D Canvas
• ヒエラルキに”Live2d_Canvas”が追加される
• 適当にリネーム
15

16. インスペクタで設定をする
• Inspector 内の L App Model Proxy (Script)が主な設定項目
• “Path”
• モデル本体の設定が書かれたファイル“*.json”を選ぶ
• 今回だと”mymodel.model.json”が/live2d/mymodel/にあるので
• “live2d/mymodel/mymodel.model.json”を入力
• “Scene No”
• 今回は“4”でいいです(既存モデルと同じにすると2体並ぶ)
16

17. 再生▶
歯車をクリックしてモデルを切り替えてくださいね
17

18. 再生されるはず
• されない場合
• なんか黒い雲みたいなのしか見
えない
• →モデル名.2048なるディレク
トリをアセットに追加したか?
• →.jsonの設定が正しいか?
18

19. 髪の物理演算設定を読み込む
• モデルの設定ファイル“*.json”を開く
• 今回は“mymodel.model.json”
• このjsonファイルが設定の要
• 物理演算の設定ファイル”*.json”(今回は以下略)を追記する
• "physics":“mymodel.physics.json"
を追加
• “,”の位置に注意
19

20. 20
{
"type": "Live2D Model Setting",
"name": "mymodel",
"model": "mymodel.moc",
"textures": [
"mymodel.2048/texture_00.png"
],
"physics":"mymodel.physics.json"
}

21. 再生▶
髪が揺れるはず
21

22. モーションを読み込む – (1)
タップ判定を作る
• タップ判定は「画像ID」と「レイヤーの位置」が肝
• Assets/Scripts/LAppDefine.cs内16行目
DEBUG_DRAW_HIT_AREA = true;
でデバッグしていきます
• タップ判定の矩形が描画されるようになる
22

23. モーションを読み込む – (2)
タップ判定を作る
• モデルのパーツにはIDが振られている
• 原則これはmtnファイルからは確認できない
• 今回準備したモデルでは前髪に“D_REF.PT_HEAD”というIDを宛ててある
• 体は“D_REF.PT_BODY”にしてある
• このIDと、判定用の位置を割り振っていく
• これも先のモデル設定用jsonに記述
23

24. モーションを読み込む – (3)
タップ判定を作る
• モデル設定用jsonに記述を追加
• 今回はデフォルトで判定が
用意されている
• “head”
• “body”
を追加します
24

25. 25
{
"type": "Live2D Model Setting",
"name": "mymodel",
"model": "mymodel.moc",
"textures": [
"mymodel.2048/texture_00.png"
],
"physics":"mymodel.physics.json",
"hit_areas":
[
{"name":"head", "id":"D_REF.PT_HEAD"},
{"name":"body", "id":"D_REF.PT_BODY"}
]
}

26. 再生▶
まだ弱い
26

27. モーションを読み込む – (4)
タップ判定を作る
• タップ判定が行われる矩形が出た
• 任意のIDで任意の判定を作るのは
今回はやりません
27

28. モーションを読み込む – (5)
再生されるモーションを指定する
• HIT_AREA_BODYでタップが起きた場合、
MOTION_GROUP_TAP_BODYが再生モーションに指定されて
います(LAppModel.cs内529行目付近)
• MOTION_GROUP_TAP_BODYはjson上のtap_bodyを読み込み
ます(LAppDefine.csない39行目付近)
• Jsonにtap_bodyの項目を追加します
28

29. モーションを読み込む – (6)
再生されるモーションを指定する
• Jsonファイルにmotion追加
• 記述する形が決まっているので注意
29

30. 30
"hit_areas":
[
{"name":"head", "id":"D_REF.PT_HEAD"},
{"name":"body", "id":"D_REF.PT_BODY"}
],
"motions":
{
"tap_body":
[
{ "file":"motions/mymotion.mtn" }
]
}
}

31. 再生▶ してbodyをタップ
なんか喋ってくれる(動きだけ)はず
Bodyは胴体側の矩形だよ!
31

32. 終
32

33. Live2D in Unity 発展編
時間が余った or やりたい人がいた場合の話
33

34. やったこと
• モデルをunityに取り込む
• 作ったモデルに当たり判定を用意する
• 当たり判定に対応したモーションを指定する
34

35. やりたいこと
• 表情を増やしたい・・・
• 喋らせたい・・・
• 当たり判定増やしたい・・・・
35

36. 表情を増やす
• 標準ではheadをタップすると表情をランダムで変える
• Jsonに記述追加
• 別途表情ファイル”.exp”の追加が必要
"expressions":
[
{"name":"f01","file":"expressions/f01.exp.json"}
]
36

37. 喋らせる
• タップ時に再生されるモーションを指定するjsonを編集する
• 音楽に関する記述を追加する
“motion”:
[
“tap_body”:
[
{ “file”:”motions/tapBody_00.mtn” ,
“sound”:”sounds/tapBody_00.mp3”,”fade_out”:0}
]
]
37

38. 当たり判定を増やす 1
• 当たり判定の関数がLAppModel.cs内526行付近にある
• TapEvent(float x, float y)
• 例えばHIT_AREA_CHESTなる定義を用意する
• 対応するモーションのグループMOTION_GROUP_TAP_CHESTも定義
else if(HitTest(LAppDefine.HIT_AREA_CHEST, x, y))
{
if (LAppDefine.DEBUG_LOG) Debug.Log("Tapped chest");
StartRandomMotion(LAppDefine.MOTION_GROUP_TAP_CHEST,LppDefine.PRIORITY_NORMAL);
}
38

39. 当たり判定を増やす 2
• 定義するのはLAppDefine.cs内部
public const string MOTION_GROUPE_CHEST = “tap_chest”
public const string HIT_AREA_CHEST = “chest”
• 定義をjsonの設定と合わせる
• “hit_areas”への追加
• パーツのIDと合わせる
• {"name":"chest", "id":"D_REF.PT_CHEST"}
• “motions”への追加
• "tap_chest":[{ "file":"motions/anger_01.mtn"}]
39

40. 詳しくは
• 既存のモデルのjsonをみるとよろし
40

41. おまけ:FaceRigで使う
• Facerigを買う 1480円
• Facerig Lice2D moduleを買う 398円
• 所定のファイル内に.mocや.json、.2048ディレクトリを配置
• C:¥Program Files
(x86)¥Steam¥steamapps¥common¥FaceRig¥Mod¥VP¥PC_CustomData¥Objects¥hoge¥hoge.moc
• C:¥Program Files
(x86)¥Steam¥steamapps¥common¥FaceRig¥Mod¥VP¥PC_CustomData¥Objects¥hoge¥hoge.2048¥
• みたいに
• Facerigを起動してモデルから選ぶだけ
41

42. おまけ:steam workshopのモデルを使う
• Facerigのsteam workshopにモデルが公開されている
• ダウンロードできる
• ダウンロードは.moc形式
• unityで読める
• しかしパーツのIDがわからないからjsonで対応付けができない
42

43. おまけ:パーツのIDの命名規則
• モデルの作成にはphotoshopから画像を読み込む
• 読み込んだ際にパーツに勝手にIDが振られる
• そのIDはD_PSD.XX
• XXは数字、一桁なら一桁のみ表示
• 画像が複数枚の場合、D_PSD1.XX, D_PSD2.XX, …
43