feat: 新增模型声音音量调节选项volume

packages/oh-my-live2d/src/config/config.ts

@@ -15,13 +15,9 @@ export const DEFAULT_OPTIONS: DefaultOptions = {
   parentElement: document.body,
   importType: 'complete',
   libraryUrls: {
+    complete: `${libServicePath}/complete.js`,
     cubism2: `${libServicePath}/live2d.min.js`,
-    cubism5: `${libServicePath}/live2dcubismcore.min.js`,
-    pixi: `${libServicePath}/pixi.min.js`,
-    pixiLive2dDisplay: `${libServicePath}/pixi-live2d-display.min.js`,
-    pixiLive2dDisplayCubism2: `${libServicePath}/pixi-live2d-display-cubism2.min.js`,
-    pixiLive2dDisplayCubism4: `${libServicePath}/pixi-live2d-display-cubism4.min.js`,
-    pixiLive2dDisplayExtra: `${libServicePath}/pixi-live2d-display-extra.min.js`
+    cubism5: `${libServicePath}/live2dcubismcore.min.js`
   },
   models: [],
   statusBar: {

packages/oh-my-live2d/src/index.ts

@@ -1,17 +1,6 @@
 import './library/iconfont.js';
 import { bootstrap } from './modules/index.js';
-import { loadScript } from './utils/index.js';
 
 export * from './types/options.js';
-// @ts-ignore
-export const loadOml2d = bootstrap(async () => {
-  // await loadUmdLibrary(importType, urls);
-  await loadScript({ url: 'https://lib.oml2d.com/complete.js', id: 'test' });
-  window.PIXI.utils.skipHello();
 
-  return {
-    PIXI: window.PIXI,
-    PixiLive2dDisplay: window.PIXI.live2d,
-    HitAreaFrames: window.PIXI.live2d.HitAreaFrames
-  };
-});
+export const loadOml2d = bootstrap();

packages/oh-my-live2d/src/modules/application.ts

@@ -39,7 +39,7 @@ export class Application {
     const childLen = this.app?.stage.children.length || 0;
 
     if (childLen > 0) {
-      this.app!.stage.removeChildren(0, childLen - 1);
+      this.app!.stage.removeChildren(0);
     }
   }
 

packages/oh-my-live2d/src/modules/globalStyle.ts

@@ -3,37 +3,46 @@ import { generateGlobalStyle } from '../config/style.js';
 import { DefaultOptions } from '../types/index.js';
 import { createElement } from '../utils/index.js';
 
-// type GlobalStyleType = { primaryColor: string };
-
 // 全局样式
 export class GlobalStyle {
   styleSheet?: HTMLElement;
-  // options: DefaultOptions;
-  constructor(private options: DefaultOptions) {
-    // this.options = options;
-    // destroyElement(ELEMENT_ID.globalStyle);
-  }
+  constructor(private options: DefaultOptions) {}
 
-  // 创建
+  /**
+   * 创建
+   */
   create(): void {
     this.styleSheet = createElement({
       tagName: 'style',
       id: ELEMENT_ID.globalStyle,
       innerHtml: generateGlobalStyle(this.options.primaryColor)
     });
   }
-  //挂载
+
+  /**
+   * 挂载
+   */
   mount(): void {
     if (this.styleSheet) {
       document.head.append(this.styleSheet);
     }
   }
 
-  // // 初始化
-  // update(options: DefaultOptions): void {
-  //   this.options = options;
-  //   this.reloadStyleSheet();
-  // }
+  /**
+   * 卸载
+   */
+  unMount(): void {
+    this.styleSheet?.remove();
+  }
+
+  /**
+   * 更新
+   * @param options
+   */
+  update(options: DefaultOptions): void {
+    this.options = options;
+    this.reloadStyleSheet();
+  }
 
   initializeStyle(): void {
     this.reloadStyleSheet();

packages/oh-my-live2d/src/modules/index.ts

@@ -1,22 +1,25 @@
 import { OhMyLive2D } from './oml2d.js';
 import { DEFAULT_OPTIONS } from '../config/index.js';
-import type { LoadMethod, Options } from '../types/index.js';
-import { mergeOptions } from '../utils/index.js';
+import { OML2D } from '../types/common.js';
+import type { DefaultOptions, Options } from '../types/index.js';
+import { loadOml2dSDK, mergeOptions } from '../utils/index.js';
 
-export const bootstrap = (loadMethod: LoadMethod): ((options: Options) => Promise<OhMyLive2D>) => {
+export const bootstrap = (): ((options: Options) => Promise<OML2D>) => {
   let oml2d: OhMyLive2D;
+  let finalOptions: DefaultOptions = DEFAULT_OPTIONS;
   const loadOml2d = async (options: Options): Promise<OhMyLive2D> => {
-    const finalOptions = mergeOptions(DEFAULT_OPTIONS, options);
-    const { PixiLive2dDisplay, PIXI, HitAreaFrames } = await loadMethod(finalOptions.importType, finalOptions.libraryUrls);
+    finalOptions = mergeOptions(DEFAULT_OPTIONS, options);
+
+    const { PIXI, PixiLive2dDisplay } = await loadOml2dSDK(finalOptions.importType, finalOptions.libraryUrls);
 
     if (oml2d) {
-      // oml2d.destroy();
-      // oml2d.updateOptions();
-    } else {
-      oml2d = new OhMyLive2D(finalOptions, PIXI, PixiLive2dDisplay, HitAreaFrames);
-      void oml2d.initialize();
+      oml2d.unMount();
     }
 
+    oml2d = new OhMyLive2D(finalOptions, PIXI, PixiLive2dDisplay);
+
+    await oml2d.initialize();
+
     return oml2d;
   };
 

packages/oh-my-live2d/src/modules/live2d.ts

@@ -1,14 +1,21 @@
 import type { InternalModel, Live2DModel } from 'pixi-live2d-display';
-// import { MotionPreloadStrategy } from 'pixi-live2d-display';
+import type { HitAreaFrames } from 'pixi-live2d-display/extra';
+import { isNumber } from 'tianjie';
 
 import { MotionPreloadStrategy, WindowSizeType } from '../constants/index.js';
-import type { DefaultOptions, Live2DModelType, ModelOptions } from '../types/index.js';
+import type { DefaultOptions, ModelOptions, PixiLive2dDisplayModule } from '../types/index.js';
 import { getWindowSizeType } from '../utils/index.js';
 
 export class Models {
   model?: Live2DModel<InternalModel>; // 当前模型实例
   private currentModelIndex = 0;
-  constructor(private options: DefaultOptions) {}
+  private hitAreaFrames: HitAreaFrames;
+  constructor(
+    private options: DefaultOptions,
+    private PixiLive2dDisplay: PixiLive2dDisplayModule
+  ) {
+    this.hitAreaFrames = new PixiLive2dDisplay.HitAreaFrames();
+  }
 
   get modelIndex(): number {
     return this.currentModelIndex;
@@ -21,9 +28,9 @@ export class Models {
     return this.options.models[this.modelIndex];
   }
 
-  create(Live2dModel: Live2DModelType): Promise<void> {
+  create(): Promise<void> {
     return new Promise((resolve, reject) => {
-      this.model = Live2dModel.fromSync(this.currentModelOptions.path, {
+      this.model = this.PixiLive2dDisplay.Live2DModel.fromSync(this.currentModelOptions.path, {
         motionPreload: (this.currentModelOptions.motionPreloadStrategy as MotionPreloadStrategy) || MotionPreloadStrategy.IDLE,
         onError: reject
       });
@@ -44,11 +51,31 @@ export class Models {
         this.setScale(this.currentModelOptions.scale);
         break;
     }
+
+    // 是否显示模型可点击区域
+    if (this.currentModelOptions.showHitAreaFrames) {
+      this.addHitAreaFrames();
+    }
+
+    // 音量
+    if (isNumber(this.currentModelOptions.volume)) {
+      this.PixiLive2dDisplay.SoundManager.volume = this.currentModelOptions.volume;
+    }
+  }
+
+  /**
+   * 添加点击区域
+   */
+  addHitAreaFrames(): void {
+    this.model?.addChild(this.hitAreaFrames);
+  }
+
+  /**
+   * 移除点击区域
+   */
+  removeHitAreaFrames(): void {
+    this.model?.removeChildren(0);
   }
-  // initializeStyle(): void {
-  //   this.setScale();
-  //   this.setPosition();
-  // }
 
   // 模型尺寸
   get modelSize(): { width: number; height: number } {
@@ -76,4 +103,18 @@ export class Models {
     this.model!.x = x;
     this.model!.y = y;
   }
+
+  onHit(fn: (areaName: string[]) => void): void {
+    this.model?.on('hit', (name: string[]) => {
+      fn(name);
+    });
+  }
+
+  /**
+   * 播放动作
+   */
+  playMotion(): void {
+    console.log(this.model?.internalModel.motionManager.motionGroups);
+    void this.model?.motion('flick_head');
+  }
 }

packages/oh-my-live2d/src/modules/menus.ts

@@ -35,24 +35,32 @@ export class Menus {
 
     // this.element.append(...this.menuItemList);
 
-    // this.element.addEventListener('click', (e) => {
-    //   if (e.target === e.currentTarget) {
-    //     return;
-    //   }
-    //   let target = e.target as HTMLElement;
-
-    //   while (target.parentNode !== e.currentTarget) {
-    //     target = target.parentNode as HTMLElement;
-    //   }
-
-    //   void this.clickItem?.(target.getAttribute('data-name')!);
-    // });
+    this.element?.addEventListener('click', (e) => {
+      if (e.target === e.currentTarget) {
+        return;
+      }
+      let target = e.target as HTMLElement;
+
+      while (target.parentNode !== e.currentTarget) {
+        target = target.parentNode as HTMLElement;
+      }
+
+      void this.clickItem?.(target.getAttribute('data-name')!);
+    });
   }
+
+  /**
+   * 创建
+   */
   create(): void {
     this.element = createElement({ id: ELEMENT_ID.menus, tagName: 'div', className: ELEMENT_ID.menus });
     this.createMenuItem();
   }
 
+  /**
+   * 挂载
+   * @param stageElement
+   */
   mount(stageElement: HTMLElement): void {
     if (this.element) {
       stageElement.append(this.element);
@@ -62,6 +70,9 @@ export class Menus {
     }
   }
 
+  /**
+   * 重载样式
+   */
   reloadStyle(): void {
     switch (getWindowSizeType()) {
       case WindowSizeType.pc:
@@ -75,6 +86,9 @@ export class Menus {
     }
   }
 
+  /**
+   * 初始化样式
+   */
   initializeStyle(): void {
     this.reloadStyle();
   }