読者です 読者をやめる 読者になる 読者になる

ガレージ暮らしのトライタム

プログラムやツールの解説や技術を公開する場所

Live2DのSampleApp1を用いて自前のキャラクターをクリックで反応させる

Live2D Unity

ーLive2DがUnity用のSDKを配布しています。その中のsampleに含まれるSampleApp1に自前のキャラクターを入れてクリックするとモーションを再生するようにします。

f:id:traitam:20160602094240j:plain
ここで一つ大きな壁として「当たり判定を持ったLive2Dキャラクター」を作成します。
今回、その作成法は参考URLだけで済ませてしまいます。もし、作っていない場合は以下のURLを参考に作成してください。
02. 当たり判定があるモデル - Live2D Cubism 2 マニュアル


作る際に大まかな問題点としては、

 当たり判定を持ったLive2Dモデルの作成

 json手書き

です。これをクリアすれば、他は言うほど大きな障害になりません。

---必要なもの---

Unity5

オリジナルの(当たり判定を持った)Live2Dモデル

Live2D_SDK_Unity_2.0.09_1

---

SampleApp1を用いて表示、モーションを対応させる場合.jsonファイルがModelerでもViewerでも出力されない内容なので、元から入っているデータのjsonファイルを参考に手で構築していく必要があります。ここが一番大変なところであり、これが出来れば大方できたことになります。jsonファイルはメモ帳でも開けます。

これから作るjsonファイルは図にするとこんな感じになります。

f:id:traitam:20160602094338j:plain

各々のツールで生成されるjsonデータ内部は

Modelerでは

type

name

model

texture

であり、

Viewerでは

version

model

texture

motions

(physis)

(pose)

(expressions)

etc...

です。

今回は、「クリックしてモーション再生」を行うので、物理演算のPhysisや腕の切り替えなどを行うpose、表情変化をさせるexpressionsなどは省きます。というかカッコ内のは作って出力したことがないので、Viewerから出力されないかもしれません。

これから作るjsonのデータは、

type

name

model

texture

layout

hit_areas

motions

--idle

--tap_body

となります。手打ち作業でjsonをやるので慣れてない人は時間がかかるかもしれないので、時間と飲み物を甘いものを用意してのんびり行ってください。あと、折れない心もあるといいです(私はこの記事を書くまでに3回挑戦して失敗してます)。SampleApp1に入ってるモデルのjsonを真似ながらそれっぽく作ればいいんですが、それを言ってはおしまいなので、拙いながらを解説を。

type,name,model,textureはModeler出力からmotionsをViewer出力から使います。

Viewer出力の際は、モーションとUnityとの関連付けの問題で、体をタップさせて再生したいモーションのタグを「tap_body」にしてください。方法はmocファイルをViewerで開き、motionsフォルダをドラッグ&ドロップでインポートした後に、モーションデータをクリックすれば「グループ名」というのが表示されるので、そこをtap_bodyにします。

f:id:traitam:20160602094030j:plain
この今、写っているキャラクターのjsonファイルはこうなりました


f:id:traitam:20160602103636j:plain

{
    "type":"Live2D Model Setting",
    "name":"totomi",
    "model":"totomi.moc",
    "textures": [
        "totomi.2048/texture_00.png"
    ],
    "layout":
    {
        "center_x":0,
        "y":1.2,
        "width":2.9
    },
    "hit_areas":
    [
        {"name":"head", "id":"D_REF.HEAD"},
        {"name":"body", "id":"D_REF.BODY"}
    ],
    "motions":{
        "idle":[
            {"file":"motions/totomi_idle.mtn","fade_in":2000,"fade_out":2000},
            {"file":"motions/totomi_idle_02.mtn","fade_in":2000,"fade_out":2000}
        ],
        "tap_body":[
            {"file":"motions/totomi_angry.mtn","fade_out":0},
            {"file":"motions/totomi_sleep.mtn","fade_out":0},
            {"file":"motions/totomi_sleep_up.mtn","fade_out":0},
            {"file":"motions/totomi_smile.mtn","fade_out":0},
            {"file":"motions/totomi_tameiki.mtn","fade_out":0},
            {"file":"motions/totomi_tere_01.mtn","fade_out":0},
            {"file":"motions/totomi_toboke.mtn","fade_out":0},
            {"file":"motions/totomi_unazuki.mtn","fade_out":0}
        ]
    }

}

上から順番に、type,name,model,textures,layout,hit_area,motionsです。以下各々の説明です。このjsonファイルを読み込んでUnity上で出力するのでこの内部のパス階層が違っていたり、名前が間違っているとエラーを吐きます。根気よく。

タイプ(type)はLive2D Model Settingです。

ネーム(name)は、このモデルの名前です。

モデル(model)は、mocファイルの名前です。

テクスチャ(textures)は、テクスチャが入っているフォルダ/名前です。

レイアウト(layout)は、表示位置と幅の指定です。同じ数値でも、Unityの方で位置を弄ればいいので同じ数値でも問題ないかも。

ヒットエリア(hit_areas)は、ヒットエリアの名称、idを各々指定します。

モーション(motions)は、何もしない状態で再生させたいモーションを”idle”タグとして、体をクリックして再生させたいモーションを”tap_body”タグとして分けます。括弧やカンマ打ち等プログラムを触ったことがある人もない人もお気をつけてください。

無事に修正が完了したら覚えやすい名前(キャラ名等)を行い拡張子を「.model.json」にして保存して終了です。

Unityへ移動させるファイルはこのjsonファイルのほかに、モーションフォルダ、テクスチャフォルダ、モックファイルです。この4つを使います。

以後はUnityでの操作です。

f:id:traitam:20160602103709j:plain

まず、自分の作成したキャラの名前のフォルダを作ります。(ここではtotomiフォルダになっています)

次に、その内部に先ほど使うと行った4つ、jsonファイル、モーションフォルダ、テクスチャ、モックファイルをドラッグ&ドロップします。

f:id:traitam:20160602103724j:plain

その後にメニューバーの「Live2D」→「CreateLive2DCanvas」をクリックしてキャンパスを作成し、分かりやすいように作成されたキャンパスの名前を変更します。

f:id:traitam:20160602103730j:plain

最後に、LAppModelProxyのPathに「live2d/(フォルダ名)/(.model.json名)」を打ち、無事に表示されればひと段落です。

f:id:traitam:20160602103737j:plain

その後再生ボタンを押し、体をクリックしてモーションが再生されれば無事に導入終了です。お疲れ様でした(*'ω'*)

―( ˘ᾥ˘ )問題発生した---

もし、表示されない、モーションが再生されない等があれば以下の項目をチェックしてみてください。表示エラーがあればスクリプトのチェックが外れます。

―表示関連---

上記のjsonファイルを参考に、カンマや括弧の打ち間違えが無いか

json内に書かれたフォルダ名と導入したフォルダ名が同じか

json内に書かれたモック名とモックファイル名は同じか

LAppModelProxyに書いたパスが合っているか

--モーション関連--

json内に書かれたヒットエリア名とModelerで作成したネームとあっているか

json内に書かれたidとModelerで作成したidと合っているか

json内に書かれたモーション名と導入したモーション名があるか

大体がjsonファイルのスクリプトエラーが表示されない原因でした。ゆえに、ここをクリアできれば後は楽です

---

それでは皆様よき、開発ライフを!!