★お知らせ(2023/12/27)
いつもLive2D公式コミュニティをご利用いただき誠にありがとうございます。
本コミュニティは2023年12月27日 11:00をもって閉鎖いたしました。
今後の運営はすべて新Live2D公式クリエイターズフォーラムに移行します。
閉鎖に伴い、以下機能は利用不可となります。
・アカウントの新規作成
・トピック投稿、返信
たくさんのご利用誠にありがとうございました。

新Live2D公式クリエイターズフォーラムは以下バナーよりご利用いただけます。
Live2D公式クリエイターズフォーラム

なお、本コミュニティに投稿されたトピックはすべて残りますが、今後削除する可能性がございますので予めご了承ください。
閉鎖に関するお問い合わせにつきましてはLive2D公式クリエイターズフォーラムへご連絡ください。

Live2D WebGL SDK 2.1 における任意モーションの再生


初めまして。
初歩的な問題につき大変恐縮なのですが、
二進も三進も行かなくなってしまった為質問させて頂けますと幸いです。

ウェブページ上にモデルを表示させ、
ボタン等の操作に応じて任意のモーションをピンポイントで再生させるようにしたいです。
そこで、Live2D WebGL 関連のサンプル紹介ページを参考に
JS内モデル設定部分であらかじめ複数のmtnファイルを読み込み、
ボタン押下時に対応した番号のモーションを再生する処理を試してみました。
ベースには添付サンプルの「simple」を使用しています。

以下が要点です。


/* モデル設定部分 */
this.modelDef = {
"type":"Live2D Model Setting",
"name":"model",
"model":"assets/model.moc",
"textures":[ "assets/texture.png" ],
"motions":[
"assets/model_idle.mtn",
"assets/model_motion1.mtn",
"assets/model_motion2.mtn"
],
}
 
/* モーション切り替え部分 */
Simple.motionChange = function(num) {
motionnm = num;
}
 
<!-- html側 -->
<div onclick="Simple.motionChange(1)"></div>
<div onclick="Simple.motionChange(2)"></div>


これで動いてはいるのですが、
動作割り当ての挙動がおかしいのでコンソールから確認したところ
どうやら motions 配列内に読み込まれるモーションは一定順ではなく、
ページをロードする度にランダムな順番で格納されている事が原因のようです。
アイドルモーションが毎回違っている事も、これが原因でした。

アイドルモーションは常に固定
「笑う」ボタン押す → 笑うモーション再生
「泣く」ボタン押す→ 泣くモーション再生

といった事をやりたいのですが、
探した限りではどの関連文献でもランダム再生の方法しか載っておらず
そもそもLive2D WebGLに関する情報自体が少ない為途方に暮れています。
あと一歩というところが実装出来ずとても歯がゆいです・・・。
恥ずかしながら、当方はJSの知識は基本を多少理解している程度な為
複雑な処理になるのであれば参考に見本を掲載して頂けましたら大変有難く思います。

どなたかお力をお貸し頂けないでしょうか。
何卒よろしくお願い致します。

コメント

  • 編集済: 9月 2016
    補足失礼致します。
    更に調べていたところ、こちらのサンプルで目的に近い事が実現されていました。

    Live2DのWebGLで表情モーション再生

    そこで、同サンプルJS最下部の motionChange() を複製改変し
    モーションファイル名を直接指定して呼び出させる事で
    任意のモーションを再生させる事に成功しました。
    以下が追加した部分です(前回同様htmlのボタンから呼び出しています)。


    function motionSelect(name) {

    var motionName = name;
    var cnt = 0;

    for(var k = 0; k < mtnfilenames.length; k++){
    if(motionName == mtnfilenames[k]){
    break;
    }
    cnt++;
    }

    glCanvas.motionnm = cnt;
    glCanvas.motionflg = true;
    }


    ところが問題が発生しまして、
    初回ロード時には問題無く動くのですが、ページをリロードすると
    やはり再生されるモーションの順番がめちゃめちゃになっています。アイドルモーションも変わっています。
    以降はキャッシュを削除するまで何度リロードし直しても元に戻らないようで、
    結果的に想定のモーションを確実に再生させる事が出来ていません。

    これは毎回起こる時もあれば20回リロードしても発生しない時もあり、何が原因なのか分かりません。
    読み込みが関係しているような気がしますが、特に回線が遅い等という事は無いです。
    もしやと思い試してみると未改変のサンプルでさえ発生しています。

    何とかならないものでしょうか・・・。
    (今回の試みは別として、なるべく添付サンプルのSimpleをベースに実装したいです)
  • 自己解決致しました。
    お騒がせしました。
コメントするにはサインインまたは登録して下さい。