LoginSignup
7
7

More than 5 years have passed since last update.

Live2Dで当たり判定を複数設定する

Last updated at Posted at 2016-03-01

フォーラムで当たり判定が複数設定したいという人がいたので、ちょっと調べてみました。
他にもっと良いやり方がありそうですが、1番シンプルな方法を書きます。

Live2Dフォーラム -【質問】当たり判定の沢山あるものを作りたい

開発環境

・Live2D_SDK_Unity_2.1.00_1_jpのSampleApp1プロジェクト
・Unity5.3.0f4

当たり判定を複数設定するやり方

1)まずはModeler上で当たり判定を複数作ります
プログラム上、シンプルな四角形を当たり判定としているため四角形します。
ポリゴン単位で当たり判定をつける方法はまたそのうち書きます。
screen001.png
screen002.png
Live2D Manual - 当たり判定があるモデルにある通り「D_REF」という文字列が当たり判定とされます。

2)model.jsonの当たり判定を増やします
hit_areasは当たり判定部分です。
tap_bodyやflick_headはタップした時に再生するモーションです。

haru.model.json
"hit_areas":
[
    {"name":"head0", "id":"D_REF.HEAD0"},
    {"name":"head1", "id":"D_REF.HEAD1"},
    {"name":"body0", "id":"D_REF.BODY0"},
    {"name":"body1", "id":"D_REF.BODY1"}
],
"motions":
{
    "tap_body0":
    [
        { "file":"motions/tapBody_00.mtn" , "sound":"sounds/tapBody_00.mp3","fade_out":0}
    ],
    "tap_body1":
    [
        { "file":"motions/tapBody_01.mtn" , "sound":"sounds/tapBody_01.mp3","fade_out":0},
        { "file":"motions/tapBody_02.mtn" , "sound":"sounds/tapBody_02.mp3","fade_out":0}
    ],
    "flick_head0":
    [
        { "file":"motions/flickHead_00.mtn", "sound":"sounds/flickHead_00.mp3" ,"fade_out":0}
    ] ,
    "flick_head1":
    [
        { "file":"motions/pinchIn_00.mtn", "fade_out":0}
    ] ,

Live2D Viewerで当たり判定表示をするとこんな感じになります
screen003.png

3)定義部分のソース修正する
tap_bodyやflick_head、HIT_AREAを増やします

LAppDefine.csの37行目あたり
// 外部定義ファイル(json)と合わせる
public const string MOTION_GROUP_IDLE           ="idle";        // アイドリング
//  public const string MOTION_GROUP_TAP_BODY       ="tap_body";    // 体をタップしたとき
public const string MOTION_GROUP_TAP_BODY0      ="tap_body0";    // 上半身をタップしたとき
public const string MOTION_GROUP_TAP_BODY1      ="tap_body1";    // 下半身をタップしたとき
//  public const string MOTION_GROUP_FLICK_HEAD     ="flick_head";  // 頭を撫でた時
public const string MOTION_GROUP_FLICK_HEAD0    ="flick_head0";  // 髪を撫でた時
public const string MOTION_GROUP_FLICK_HEAD1    ="flick_head1";  // 顔を撫でた時
public const string MOTION_GROUP_PINCH_IN       ="pinch_in";    // 拡大した時
public const string MOTION_GROUP_PINCH_OUT      ="pinch_out";   // 縮小した時
public const string MOTION_GROUP_SHAKE          ="shake";       // シェイク

// 外部定義ファイル(json)と合わせる
//  public const string HIT_AREA_HEAD               ="head";
public const string HIT_AREA_HEAD0               ="head0";
public const string HIT_AREA_HEAD1               ="head1";
//    public const string HIT_AREA_BODY             ="body";
public const string HIT_AREA_BODY0               ="body0";
public const string HIT_AREA_BODY1               ="body1";

4)当たり判定部分のソース修正する

LAppModel.csの508行目あたり
public void FlickEvent(float x, float y)
{
    if (LAppDefine.DEBUG_LOG) Debug.Log("flick x:" + x + " y:" + y);

//        if (HitTest(LAppDefine.HIT_AREA_HEAD, x, y))
    if (HitTest(LAppDefine.HIT_AREA_HEAD0, x, y))
    {
        if (LAppDefine.DEBUG_LOG) Debug.Log("Flick face");
        StartRandomMotion(LAppDefine.MOTION_GROUP_FLICK_HEAD0, LAppDefine.PRIORITY_NORMAL);
    }
    if (HitTest(LAppDefine.HIT_AREA_HEAD1, x, y))
    {
        if (LAppDefine.DEBUG_LOG) Debug.Log("Flick face");
        StartRandomMotion(LAppDefine.MOTION_GROUP_FLICK_HEAD1, LAppDefine.PRIORITY_NORMAL);
    }
}
LAppModel.csの532行目あたり
public bool TapEvent(float x, float y)
{
    if (LAppDefine.DEBUG_LOG) Debug.Log("tapEvent view x:" + x + " y:" + y);

//        if (HitTest(LAppDefine.HIT_AREA_HEAD, x, y))
    if (HitTest(LAppDefine.HIT_AREA_HEAD0, x, y))
    {
        // 顔をタップしたら表情切り替え
        if (LAppDefine.DEBUG_LOG) Debug.Log("Tapped face");
//            SetRandomExpression();
        SetExpression("f03"); 
    }
    else if (HitTest(LAppDefine.HIT_AREA_HEAD1, x, y))
    {
        // 顔をタップしたら表情切り替え
        if (LAppDefine.DEBUG_LOG) Debug.Log("Tapped face");
//            SetRandomExpression();
        SetExpression("f04"); 
    }
    else if (HitTest(LAppDefine.HIT_AREA_BODY0, x, y))
    {
        if (LAppDefine.DEBUG_LOG) Debug.Log("Tapped body");
        StartRandomMotion(LAppDefine.MOTION_GROUP_TAP_BODY0, LAppDefine.PRIORITY_NORMAL);
    }
    else if (HitTest(LAppDefine.HIT_AREA_BODY1, x, y))
    {
        if (LAppDefine.DEBUG_LOG) Debug.Log("Tapped body");
        StartRandomMotion(LAppDefine.MOTION_GROUP_TAP_BODY1, LAppDefine.PRIORITY_NORMAL);
    }
    return true;
}

5)これで複数当たり判定モードが完成です!
004.gif

おまけ

ちなみにWebGL版の場合は、修正するソースクラス名が少し違ってたりします。
(LAppModel.cs → LAppLive2DManager.js)

jsの場合はこちらを参考に → Live2D Community - add event listeners to parts

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7