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

qellis

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

ウェブページ上にモデルを表示させ、
ボタン等の操作に応じて任意のモーションをピンポイントで再生させるようにしたいです。
そこで、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の知識は基本を多少理解している程度な為
複雑な処理になるのであれば参考に見本を掲載して頂けましたら大変有難く思います。

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

qellis

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

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をベースに実装したいです）

qellis

自己解決致しました。
お騒がせしました。