feat(model): 现在您可以通过showHitAreaFrames选项来查看模型的所有可被点击区域, 所有可点击区域被点击时将触发…

…hit事件并尽可能的播放相应动作和声音
oh-my-live2d · Mar 9, 2024 · 2d0b647 · 2d0b647
1 parent 40033fa
commit 2d0b647
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 11 deletions.
diff --git a/packages/oh-my-live2d/src/modules/model.ts b/packages/oh-my-live2d/src/modules/model.ts
@@ -14,12 +14,12 @@ export class Model {
     private live2dModel: Live2DModelType,
     private modelOptions: ModelOptions,
     private application: Application,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
     private HitAreaFrames: HitAreaFramesType
   ) {
     this.model = this.create();
   }
   create(): Live2DModel<InternalModel> {
-    const hitAreaFrames = new this.HitAreaFrames();
     const model = this.live2dModel.fromSync(this.modelOptions.path || '', {
       // 动作预加载策略
       motionPreload: (this.modelOptions.motionPreloadStrategy as MotionPreloadStrategy) || MotionPreloadStrategy.IDLE,
@@ -29,7 +29,11 @@ export class Model {
     });
 
     model.once('load', () => {
-      model.addChild(hitAreaFrames);
+      if (this.modelOptions.showHitAreaFrames) {
+        const hitAreaFrames = new this.HitAreaFrames();
+
+        model.addChild(hitAreaFrames);
+      }
       // setTimeout(() => {
       //   model.removeChildAt(0);
       //   setTimeout(() => {

diff --git a/packages/oh-my-live2d/src/types/model.ts b/packages/oh-my-live2d/src/types/model.ts
@@ -6,6 +6,10 @@
  */
 
 export interface ModelOptions {
+  /**
+   * 是否显示该模型的点击区域框, 该选项是为了方便您预览和调试模型的可点击区域, 当这个选项为true时,将显示该模型的所有可点击区域, 点击区域的大小与位置取决于模型本身
+   */
+  showHitAreaFrames?: boolean;
   /**
    * 模型的 json 文件 url 地址, 必填项
    */

diff --git a/tests/vite-app/index.html b/tests/vite-app/index.html
@@ -8,9 +8,9 @@
   </head>
   <body>
     <div id="app"></div>
-    <!-- <script src="./src/main.ts" type="module"></script> -->
-    <script src="index.min.js"></script>
-    <script>
+    <script src="./src/main.ts" type="module"></script>
+    <!-- <script src="index.min.js"></script> -->
+    <!-- <script>
       OML2D.loadOml2d({
         models: [
           {
@@ -29,6 +29,6 @@
           // }
         ]
       });
-    </script>
+    </script> -->
   </body>
 </html>