パラメータ設定にトライしよう その1

まずはすでに定義されているパラメータをマウスクリックで変更するようにしてみよう

パラメータは「頬」

クリックしたら頬が赤くなるようにしてみよう

まずはCubismのパラメータ名をSDKに合わせて「ParamCheek」に修正

さて、そもそもどこに何を書いたらいいのか、わからない

SDKのマニュアルに情報はあるが、それでもまったくわからない

で、以下は予想

動作としてはイベントドリブンだろうから、なんらかのイベントが発生しない限り動作は変わらない

なのでマウスクリックをイベントとしよう

マウスを画面上でクリックすると、

lapplive2dmanager.tsの

public onTap(x: number, y: number): void {.... 

に飛んでいくことはわかった

ここでHeadとBodyでのタップ検出をしているのがわかる

なのでCubismでの当たり検出を設定して、ここに飛んでいくことを確認しよう

その前にParamAngleX,ParamAngleYの名前をCubismに合わせこむことにした

そうすればマウスに追従してFEEが動くかもしれない

やってみると、こんな感じ

うまくいったが…ゆっくりと左右を向くのは、たぶんIdlemotionがそうなっているからだろう

しかしViewerで見てもこういう動作はしない

だとすればSDKが自分で設定しているのだろう

ParamAngleXで検索して、lappmodel.ts内の以下をコメントアウトした

breathParameters.pushBack(                                                  
        new BreathParameterData(this._idParamAngleX, 0.0, 15.0, 6.5345, 0.5)
      );
breathParameters.pushBack(
        new BreathParameterData(this._idParamAngleY, 0.0, 8.0, 3.5345, 0.5)
      );
breathParameters.pushBack(
        new BreathParameterData(this._idParamAngleZ, 0.0, 10.0, 5.5345, 0.5)
      );

その結果、変な動きは止まった

徐々に慣れてきたぞ

ではコマンドを見てみよう

_model.setParameterValueById(CubismFramework.getIdManager().getId("ParamAngleX"),30.0,1.0);

キモは「setparameterValueById」なのは一目瞭然

なので、これで検索するといくつかひっかかる

Break Pointを張ってもひっかからない

例えばcubismeyeblink.tsとかにも含まれているが、これは最終的にBundle.jsに書き出すためのソースコードらしいので、VS CodeでここにBreakを張ってもひっかからない

代わりにBundle.jsだと止まる

試しにcubismeyeblink.tsに2つ並べて命令を書いた（下記）

とすると、ビルドするとBundle.jsにも同様に2つの命令が出ている（下記）

つまりcubismeyeblink.tsのこの部分に書き込めば、出力してくれるということだ

ここを見る限り、ループしてパラメータを送っているように見えるので、デバッグプリントをここに仕込んで、何が出力されているのか、見てみよう

デバッグプリントは、

console.log("[Hideo] model ",model, " i ",i,"setParameterValueById ",this._parameterIds.at(i), parameterValue)

のようにしてみたが、iが0，1、パラメータ値がたまに変化する以外は、リンクが表示されれているみたいで、なんだかわからん

しかしこのsetParameterValueByIdの行をコメントアウトするとまばたきをしなくなるので、これによって動かしているのは確か

う～ん、ちょっとネタがなくなってきたので、当たり判定でもちゃんとやってみるか

そのほうが「身体に触れた」「頭に触れた」ときの反応と「会話時の口パク」を同列で扱える気がするので