[Model]モデルをクリックで動くようにする(モーション１)

[arith-k-saito]

モデルをクリックで動かすようにする

[arith-k-saito]

SampleApp1の参考処理 sample/sampleApp1/src/LAppLive2DManager.js

/*
 * タップしたときのイベント
 */
LAppLive2DManager.prototype.tapEvent = function(x, y)
{
    if (LAppDefine.DEBUG_LOG)
        console.log("tapEvent view x:" + x + " y:" + y);

    for (var i = 0; i < this.models.length; i++)
    {

        if (this.models[i].hitTest(LAppDefine.HIT_AREA_HEAD, x, y))
        {
            // 顔をタップしたら表情切り替え
            if (LAppDefine.DEBUG_LOG)
                console.log("Tap face.");

            this.models[i].setRandomExpression();
        }
        else if (this.models[i].hitTest(LAppDefine.HIT_AREA_BODY, x, y))
        {
            // 体をタップしたらモーション
            if (LAppDefine.DEBUG_LOG)
                console.log("Tap body." + " models[" + i + "]");

            this.models[i].startRandomMotion(LAppDefine.MOTION_GROUP_TAP_BODY,
                                             LAppDefine.PRIORITY_NORMAL);
        }
    }

    return true;
};

[arith-k-saito]

sample/sampleApp1/src/LAppModel.js

/*
 * モーションをランダムで再生する
 */
LAppModel.prototype.startRandomMotion = function(name, priority)
{
    var max = this.modelSetting.getMotionNum(name);
    var no = parseInt(Math.random() * max);
    this.startMotion(name, no, priority);
}

[arith-y-ono]

モーション一覧は下記 https://github.com/arith-y-ono/live2d/blob/master/assets/hibiki/runtime/hibiki.model.json

[arith-k-saito]

sample/sampleApp1/src/LAppModel.js

/*
 * モーションの開始。
 * 再生できる状態かチェックして、できなければ何もしない。
 * 再生出来る場合は自動でファイルを読み込んで再生。
 * 音声付きならそれも再生。
 * フェードイン、フェードアウトの情報があればここで設定。なければ初期値。
 */
LAppModel.prototype.startMotion = function(name, no, priority)
{
    // console.log("startMotion : " + name + " " + no + " " + priority);

    var motionName = this.modelSetting.getMotionFile(name, no);

    if (motionName == null || motionName == "")
    {
        if (LAppDefine.DEBUG_LOG)
            console.error("Failed to motion.");
        return;
    }

    if (priority == LAppDefine.PRIORITY_FORCE)
    {
        this.mainMotionManager.setReservePriority(priority);
    }
    else if (!this.mainMotionManager.reserveMotion(priority))
    {
        if (LAppDefine.DEBUG_LOG)
            console.log("Motion is running.")
        return;
    }

    var thisRef = this;
    var motion;

    if (this.motions[name] == null)
    {
        this.loadMotion(null, this.modelHomeDir + motionName, function(mtn) {
            motion = mtn;

            // フェードイン、フェードアウトの設定
            thisRef.setFadeInFadeOut(name, no, priority, motion);

        });
    }
    else
    {
        motion = this.motions[name];

        // フェードイン、フェードアウトの設定
        thisRef.setFadeInFadeOut(name, no, priority, motion);
    }
}

[arith-k-saito]

framework/Live2DFramework.js

//============================================================
//    L2DBaseModel # loadMotion()
//============================================================
L2DBaseModel.prototype.loadMotion      = function(name/*String*/, path /*String*/, callback)
{
    var pm = Live2DFramework.getPlatformManager(); //IPlatformManager

    if(this.debugMode) pm.log("Load Motion : " + path);

    var motion = null; //Live2DMotion

    var thisRef = this;
    pm.loadBytes(path, function(buf) {
        motion = Live2DMotion.loadMotion(buf);
        if( name != null ) {
            thisRef.motions[name] = motion;
        }
        callback(motion);
    });

}

[arith-k-saito]

Frameworkを使うためにクラスを

new L2DBaseModel();

で作成する

function LAppModel()
{
    //L2DBaseModel.apply(this, arguments);
    L2DBaseModel.prototype.constructor.call(this);

    this.modelHomeDir = "";
    this.modelSetting = null;
    this.tmpMatrix = [];
}

LAppModel.prototype = new L2DBaseModel();

[arith-k-saito]

Live2D.init();

の後に

Live2DFramework.setPlatformManager(new PlatformManager);

を読んでフレームワークを使う

[arith-k-saito]

    var model = new LAppModel();
    model.load(gl,"assets/hibiki/runtime/hibiki.model.json")
    model.startRandomMotion("tap_body",
                            2);