Web SDK モデル移動後の当たり判定の位置について

momomo · 2022 年 7 月 27 日午前 11:38

【Cubism SDKのバージョン】Cubism SDK for Web R5 beta4
【スマートフォンの場合などは端末名】macbook pro
【OS名・バージョン】macOS Monterey 12.4
【開発使用ツール】Visual Studio 2019
【不具合の状況】
translateRelativeを使いモデルの位置を変更しても、当たり判定の位置が変わらない。
サンプルモデルやR4のサンプルコードで試してみても同じ動作でした。

宜しくお願い致します。

ueno_staff · 2022 年 7 月 28 日午前 10:34

@momomo 様

お問い合わせいただきありがとうございます。
Live2Dスタッフです。

モデルの当たり判定処理はモデルが持つMatrixの位置情報を用いて判定しますが、
translateRelativeをモデルの持つMatrixではなく、画面描画用Matrixに対して使っている可能性があります。

画面描画用Matrixはサンプルコードでは
lapplive2dmanager.ts ➝ onUpdate() 内で処理されています。

github.com

Live2D/CubismWebSamples/blob/328f0718d096aec7eefab80774d348ae89c847e0/Samples/TypeScript/Demo/src/lapplive2dmanager.ts#L133


      
                    this._finishedMotion
                  );
              }
            }
          }
          
          
/**
           * 画面を更新するときの処理
           * モデルの更新処理及び描画処理を行う
           */
          public onUpdate(): void {
            const { width, height } = canvas;
          
          
  const modelCount: number = this._models.getSize();
          
          
  for (let i = 0; i < modelCount; ++i) {
              const projection: CubismMatrix44 = new CubismMatrix44();
              const model: LAppModel = this.getModel(i);
          
          
    if (model.getModel()) {
                if (model.getModel().getCanvasWidth() > 1.0 && width < height) {

モデル用Matrixは
lappmodel.ts ➝ setupLayout() 内の setupFromLayout() で取得した this._modelMatrix になります。

github.com

Live2D/CubismWebSamples/blob/328f0718d096aec7eefab80774d348ae89c847e0/Samples/TypeScript/Demo/src/lappmodel.ts#L330


      
            this._state = LoadStep.SetupLayout;
          
          
  // callback
            setupLayout();
          };
          
          
// Layout
          const setupLayout = (): void => {
            const layout: csmMap<string, number> = new csmMap<string, number>();
            this._modelSetting.getLayoutMap(layout);
            this._modelMatrix.setupFromLayout(layout);
            this._state = LoadStep.LoadMotion;
          
          
  // callback
            loadCubismMotion();
          };
          
          
// Motion
          const loadCubismMotion = (): void => {
            this._state = LoadStep.WaitLoadMotion;
            this._model.saveParameters();

_modelMatrix は CubismModelMatrix クラスです。
これに対して translateRelative を使うことで、正常な当たり判定を持つ位置変更が可能になります。

参考 :
・モデルの当たり判定 :
https://docs.live2d.com/cubism-sdk-manual/hitarea/

・CubismModelMatrix :
https://docs.live2d.com/cubism-sdk-manual/layout

ご確認のほど、よろしくお願いいたします。

momomo · 2022 年 7 月 29 日午前 5:21

ご指摘の通り、画面描画のmatrixにtranslateをしていたため、モデルのmatrixに変更したところ、モデルの移動に合わせて当たり判定も移動しました。
迅速にご返答いただき大変助かりました。ありがとうございます。

トピック		返信	表示
Web SDKでウィンドウサイズ変更時の挙動の違いについてトラブル報告教えて , 使い方 , sdk-for-web	5	435	2022 年 5 月 23 日
公式のサンプルモデルの一部がSDKでの読み込み時に背景が黒くなってしまうトラブル報告	2	260	2023 年 2 月 21 日
htmlでモデルの位置が一番下にきてしまうのが直らないトラブル報告初心者 , 教えて , sdk-for-web	1	255	2022 年 7 月 8 日
[Web SDK] 複数のモデルを同時に生成すると一部のモデルが更新されない状態になるトラブル報告	3	434	2023 年 2 月 21 日
SDK for Web：モーション開始に音声再生を紐づける方法制作の質問やTips紹介使い方 , 音声	11	246	2023 年 11 月 28 日

Web SDK モデル移動後の当たり判定の位置について

関連トピック