Live2D in Unity Lve2D SDK for Unity に自作モデルと自作モーションを組み込む 1
Live2D in UnityLve2D SDK for Unity に自作モデルと自作モーションを組み込む
1
まずは準備から…
2
事前準備
• 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
事前準備(任意)
• Live2D Cubism Modelerのダウンロード• モデル作成などに使います
• Live2D Cubism Animatorのダウンロード• モーション作成に使います
• 適当なエディタ(Atom,Terapad,SublimeTex etc)• VSの起動が遅いのが嫌な人
• 今回は時間の都合上モデルとモーションは準備しました
4
Live2Dとは
5
Live2D とは?
• イラストを動かせる• 変形をうまい具合にやってくれる
• コマごとの絵を描かなくていい
• 3Dモデルを準備しなくてもいい(ある程度)
• 立ち絵一枚からでもOK
• いろいろな環境で動かせる• Unity, Windows, Android, iOS,…
6
出てくる拡張子の説明
• “.cmox”• Editorで使う編集用ファイル
• “.canx”• Animatorで使う編集用ファイル
• “.moc” ←重要• モデルの書き出しファイル• Unity、Facerigなどでも使う
• “.mtn”• モーションが記述されたファイル
• “.json”• (今回は)様々な設定が記述されたファイル
7
Live2Dをとりあえず触る
• Live2D Cubism Animator でモデルを開く• モデルファイル(*.moc)をD&D
• ファイル -> 開く
• *.moc をダブルクリック
• 髪の毛が物理してない
• 触らないと絵は動かない
• 触ってもモーションが再生されるとかはない
8
モデルの設定
• Live2D Cubism Animatorでモデルを開く
• サンプルの物理演算を適応する• プロジェクト -> サンプル -> 物理演算:髪揺れ
• 髪の毛が物理する• 今回のモデルは特に違和感がないので無調整で行きます
• 適応した物理演算の設定を保存しておく(重要)• Sample Physics.jsonを右クリック→保存
• “モデル名.physics.json”にしておくとわかりやすい
9
Live2DをUnityで
10
SDK for Unityを使う
• UnityでSDK付属のサンプルのシーンを開く
• ¥Live2D_SDK_Unity_2.1.00_1_jp• ¥sample
• ¥SampleApp1• ¥Assets
• ¥Scene
• Sample.unity
• とりあえず再生▶
11
Unityで触ってみる
• キャラを触ると反応がある・・・はず• SDKではタップ、フリック、端末を振るなどを検知
• アクションが起きた位置の画像で、再生するモーションが変わる• 設定はC#とjsonで記述(後述)
• 右下の歯車でモデルを変えることができる• 今回はここで変えられるモデルに自分のモデルを追加する
12
Unityにモデルを追加する
13
モデルをアセットに追加する
• .moc, .json, .mtnなどが入ったディレクトリ一式を
UnityのAssets -> Resources -> live2d に追加
14
モデルをヒエラルキに追加する
• 上の方に”Live2D”なるメニューがある
• Live2D -> Create Live2D Canvas• ヒエラルキに”Live2d_Canvas”が追加される
• 適当にリネーム
15
インスペクタで設定をする
• Inspector 内の L App Model Proxy (Script)が主な設定項目
• “Path”• モデル本体の設定が書かれたファイル“*.json”を選ぶ
• 今回だと”mymodel.model.json”が/live2d/mymodel/にあるので
• “live2d/mymodel/mymodel.model.json”を入力
• “Scene No”• 今回は“4”でいいです(既存モデルと同じにすると2体並ぶ)
16
再生▶歯車をクリックしてモデルを切り替えてくださいね
17
再生されるはず
• されない場合• なんか黒い雲みたいなのしか見えない
• →モデル名.2048なるディレクトリをアセットに追加したか?
• →.jsonの設定が正しいか?
18
髪の物理演算設定を読み込む
• モデルの設定ファイル“*.json”を開く• 今回は“mymodel.model.json”
• このjsonファイルが設定の要
• 物理演算の設定ファイル”*.json”(今回は以下略)を追記する
• "physics":“mymodel.physics.json"
を追加
• “,”の位置に注意
19
20
{"type": "Live2D Model Setting","name": "mymodel","model": "mymodel.moc","textures": ["mymodel.2048/texture_00.png"],"physics":"mymodel.physics.json"}
再生▶髪が揺れるはず
21
モーションを読み込む – (1)
タップ判定を作る
• タップ判定は「画像ID」と「レイヤーの位置」が肝
• Assets/Scripts/LAppDefine.cs内16行目
DEBUG_DRAW_HIT_AREA = true;
でデバッグしていきます
• タップ判定の矩形が描画されるようになる
22
モーションを読み込む – (2)
タップ判定を作る
• モデルのパーツにはIDが振られている• 原則これはmtnファイルからは確認できない
• 今回準備したモデルでは前髪に“D_REF.PT_HEAD”というIDを宛ててある
• 体は“D_REF.PT_BODY”にしてある
• このIDと、判定用の位置を割り振っていく• これも先のモデル設定用jsonに記述
23
モーションを読み込む – (3)
タップ判定を作る
• モデル設定用jsonに記述を追加
• 今回はデフォルトで判定が
用意されている
• “head”
• “body”
を追加します
24
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
モーションを読み込む – (4)
タップ判定を作る
• タップ判定が行われる矩形が出た
• 任意のIDで任意の判定を作るのは
今回はやりません
27
モーションを読み込む – (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
モーションを読み込む – (6)
再生されるモーションを指定する
• Jsonファイルにmotion追加
• 記述する形が決まっているので注意
29
30
"hit_areas":[{"name":"head", "id":"D_REF.PT_HEAD"},{"name":"body", "id":"D_REF.PT_BODY"}
],"motions":{"tap_body":[{ "file":"motions/mymotion.mtn" }
]}
}
再生▶ してbodyをタップなんか喋ってくれる(動きだけ)はず
Bodyは胴体側の矩形だよ!
31
終
32
Live2D in Unity 発展編時間が余った or やりたい人がいた場合の話
33
やったこと
• モデルをunityに取り込む
• 作ったモデルに当たり判定を用意する
• 当たり判定に対応したモーションを指定する
34
やりたいこと
• 表情を増やしたい・・・
• 喋らせたい・・・
• 当たり判定増やしたい・・・・
35
表情を増やす
• 標準ではheadをタップすると表情をランダムで変える
• Jsonに記述追加
• 別途表情ファイル”.exp”の追加が必要
"expressions":
[
{"name":"f01","file":"expressions/f01.exp.json"}
]
36
喋らせる
• タップ時に再生されるモーションを指定するjsonを編集する• 音楽に関する記述を追加する
“motion”:[
“tap_body”:[
{ “file”:”motions/tapBody_00.mtn” ,“sound”:”sounds/tapBody_00.mp3”,”fade_out”:0}
]]
37
当たり判定を増やす 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
当たり判定を増やす 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
詳しくは
• 既存のモデルのjsonをみるとよろし
40
おまけ: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
おまけ:steam workshopのモデルを使う
• Facerigのsteam workshopにモデルが公開されている
• ダウンロードできる
• ダウンロードは.moc形式• unityで読める
• しかしパーツのIDがわからないからjsonで対応付けができない
42
おまけ:パーツのIDの命名規則
• モデルの作成にはphotoshopから画像を読み込む
• 読み込んだ際にパーツに勝手にIDが振られる
• そのIDはD_PSD.XX• XXは数字、一桁なら一桁のみ表示
• 画像が複数枚の場合、D_PSD1.XX, D_PSD2.XX, …
43