Live2d in unity

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



• モデルのパーツにはIDが振られている• 原則これはmtnファイルからは確認できない

• 今回準備したモデルでは前髪に“D_REF.PT_HEAD”というIDを宛ててある

• 体は“D_REF.PT_BODY”にしてある

• このIDと、判定用の位置を割り振っていく• これも先のモデル設定用jsonに記述

23



• モデル設定用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



• タップ判定が行われる矩形が出た

• 任意のIDで任意の判定を作るのは

今回はやりません

27


再生されるモーションを指定する

• HIT_AREA_BODYでタップが起きた場合、MOTION_GROUP_TAP_BODYが再生モーションに指定されています(LAppModel.cs内529行目付近)

• MOTION_GROUP_TAP_BODYはjson上のtap_bodyを読み込みます(LAppDefine.csない39行目付近)

• Jsonにtap_bodyの項目を追加します

28


再生されるモーションを指定する

• 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

Technology

Live2d in unity