Download as PDF, PPTX
![20
{
"type": "Live2D Model Setting",
"name": "mymodel",
"model": "mymodel.moc",
"textures": [
"mymodel.2048/texture_00.png"
],
"physics":"mymodel.physics.json"
}](https://image.slidesharecdn.com/live2dinunity-161210150154/85/Live2d-in-unity-20-320.jpg)
![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"}
]
}](https://image.slidesharecdn.com/live2dinunity-161210150154/85/Live2d-in-unity-25-320.jpg)
![30
"hit_areas":
[
{"name":"head", "id":"D_REF.PT_HEAD"},
{"name":"body", "id":"D_REF.PT_BODY"}
],
"motions":
{
"tap_body":
[
{ "file":"motions/mymotion.mtn" }
]
}
}](https://image.slidesharecdn.com/live2dinunity-161210150154/85/Live2d-in-unity-30-320.jpg)
![表情を増やす
• 標準ではheadをタップすると表情をランダムで変える
• Jsonに記述追加
• 別途表情ファイル”.exp”の追加が必要
"expressions":
[
{"name":"f01","file":"expressions/f01.exp.json"}
]
36](https://image.slidesharecdn.com/live2dinunity-161210150154/85/Live2d-in-unity-36-320.jpg)
![喋らせる
• タップ時に再生されるモーションを指定するjsonを編集する
• 音楽に関する記述を追加する
“motion”:
[
“tap_body”:
[
{ “file”:”motions/tapBody_00.mtn” ,
“sound”:”sounds/tapBody_00.mp3”,”fade_out”:0}
]
]
37](https://image.slidesharecdn.com/live2dinunity-161210150154/85/Live2d-in-unity-37-320.jpg)
![当たり判定を増やす 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](https://image.slidesharecdn.com/live2dinunity-161210150154/85/Live2d-in-unity-39-320.jpg)
Live2d in unity
- 1. Live2D in Unity Lve2DSDK for Unity に自作モデルと自作モーションを組み込む 1
- 2.
- 3. 事前準備 • Live2D CubismSDK 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 CubismModelerのダウンロード • モデル作成などに使います • Live2D Cubism Animatorのダウンロード • モーション作成に使います • 適当なエディタ(Atom,Terapad,SublimeTex etc) • VSの起動が遅いのが嫌な人 • 今回は時間の都合上モデルとモーションは準備しました 4
- 5.
- 6. Live2D とは? • イラストを動かせる •変形をうまい具合にやってくれる • コマごとの絵を描かなくていい • 3Dモデルを準備しなくてもいい(ある程度) • 立ち絵一枚からでもOK • いろいろな環境で動かせる • Unity, Windows, Android, iOS,… 6
- 7. 出てくる拡張子の説明 • “.cmox” • Editorで使う編集用ファイル •“.canx” • Animatorで使う編集用ファイル • “.moc” ←重要 • モデルの書き出しファイル • Unity、Facerigなどでも使う • “.mtn” • モーションが記述されたファイル • “.json” • (今回は)様々な設定が記述されたファイル 7
- 8. Live2Dをとりあえず触る • Live2D CubismAnimator でモデルを開く • モデルファイル(*.moc)をD&D • ファイル -> 開く • *.moc をダブルクリック • 髪の毛が物理してない • 触らないと絵は動かない • 触ってもモーションが再生されるとかはない 8
- 9. モデルの設定 • Live2D CubismAnimatorでモデルを開く • サンプルの物理演算を適応する • プロジェクト -> サンプル -> 物理演算:髪揺れ • 髪の毛が物理する • 今回のモデルは特に違和感がないので無調整で行きます • 適応した物理演算の設定を保存しておく(重要) • Sample Physics.jsonを右クリック→保存 • “モデル名.physics.json”にしておくとわかりやすい 9
- 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.
- 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.
- 18. 再生されるはず • されない場合 • なんか黒い雲みたいなのしか見 えない •→モデル名.2048なるディレク トリをアセットに追加したか? • →.jsonの設定が正しいか? 18
- 19. 髪の物理演算設定を読み込む • モデルの設定ファイル“*.json”を開く • 今回は“mymodel.model.json” •このjsonファイルが設定の要 • 物理演算の設定ファイル”*.json”(今回は以下略)を追記する • "physics":“mymodel.physics.json" を追加 • “,”の位置に注意 19
- 20. 20 { "type": "Live2D ModelSetting", "name": "mymodel", "model": "mymodel.moc", "textures": [ "mymodel.2048/texture_00.png" ], "physics":"mymodel.physics.json" }
- 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 ModelSetting", "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.
- 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.
- 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内部 publicconst 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.
- 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のsteamworkshopにモデルが公開されている • ダウンロードできる • ダウンロードは.moc形式 • unityで読める • しかしパーツのIDがわからないからjsonで対応付けができない 42
- 43. おまけ:パーツのIDの命名規則 • モデルの作成にはphotoshopから画像を読み込む • 読み込んだ際にパーツに勝手にIDが振られる •そのIDはD_PSD.XX • XXは数字、一桁なら一桁のみ表示 • 画像が複数枚の場合、D_PSD1.XX, D_PSD2.XX, … 43