From af8fccda06ac4a83695cebb6fbee503408b752d1 Mon Sep 17 00:00:00 2001
From: Lingxi <2863878907@qq.com>
Date: Sat, 21 Dec 2024 12:34:26 +0800
Subject: [PATCH 1/3] feat: dynamic load live2d lib

---
 packages/webgal/index.html                    |  24 +-
 .../controller/stage/pixi/PixiController.ts   | 293 ++++++++++--------
 .../src/Stage/MainStage/useSetFigure.ts       |   2 +-
 3 files changed, 183 insertions(+), 136 deletions(-)

diff --git a/packages/webgal/index.html b/packages/webgal/index.html
index c3ffb4d19..bc8e9a5bc 100644
--- a/packages/webgal/index.html
+++ b/packages/webgal/index.html
@@ -215,8 +215,28 @@
   </script>
   <script type="module" src="/src/main.tsx"></script>
   <!--<script type="module" src="/src/Core/util/resize.ts"></script>-->
-  <!--<script src="lib/live2d.min.js"></script>-->
-  <!--<script src="lib/live2dcubismcore.min.js"></script>-->
+  <script>
+    function loadScript(url) {
+      return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = url;
+        script.onload = () => resolve(`Loaded: ${url}`);
+        script.onerror = (error) => reject(`Failed to load: ${url}`);
+        document.head.appendChild(script);
+      });
+    }
+
+    async function loadLive2D() {
+      try {
+        await loadScript('lib/live2d.min.js');
+        await loadScript('lib/live2dcubismcore.min.js');
+        console.log('Both Live2D scripts loaded successfully.');
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    loadLive2D();
+  </script>
   <script>
     let enterPromise = new Promise(res => window.enterPromise = res);
     let renderPromise = new Promise(res => window.renderPromise = res);
diff --git a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
index ddd8aac00..d81114e51 100644
--- a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
+++ b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
@@ -11,8 +11,6 @@ import { WebGAL } from '@/Core/WebGAL';
 import 'pixi-spine'; // Do this once at the very start of your code. This registers the loader!
 import { Spine } from 'pixi-spine';
 import { SCREEN_CONSTANTS } from '@/Core/util/constants';
-// import { figureCash } from '@/Core/gameScripts/vocal/conentsCash'; // 如果要使用 Live2D，取消这里的注释
-// import { Live2DModel, SoundManager } from 'pixi-live2d-display-webgal'; // 如果要使用 Live2D，取消这里的注释
 
 export interface IAnimationObject {
   setStartState: Function;
@@ -88,6 +86,10 @@ export default class PixiStage {
    */
   private MAX_TEX_COUNT = 10;
 
+  private isLive2dAvailable: undefined | boolean = undefined;
+  private figureCash: any;
+  private live2DModel: any;
+  private soundManager: any;
   public constructor() {
     const app = new PIXI.Application({
       backgroundAlpha: 0,
@@ -143,6 +145,7 @@ export default class PixiStage {
       this.callLoader();
     };
     reload();
+    this.initialize().then(() => {});
   }
 
   public getFigureObjects() {
@@ -666,137 +669,143 @@ export default class PixiStage {
    * @param jsonPath
    */
   // eslint-disable-next-line max-params
-  // public addLive2dFigure(key: string, jsonPath: string, pos: string, motion: string, expression: string) {
-  //   let stageWidth = this.stageWidth;
-  //   let stageHeight = this.stageHeight;
-  //   logger.debug('Using motion:', motion);
-  //
-  //   figureCash.push(jsonPath);
-  //
-  //   const loader = this.assetLoader;
-  //   // 准备用于存放这个立绘的 Container
-  //   const thisFigureContainer = new WebGALPixiContainer();
-  //
-  //   // 是否有相同 key 的立绘
-  //   const setFigIndex = this.figureObjects.findIndex((e) => e.key === key);
-  //   const isFigSet = setFigIndex >= 0;
-  //
-  //   // 已经有一个这个 key 的立绘存在了
-  //   if (isFigSet) {
-  //     this.removeStageObjectByKey(key);
-  //   }
-  //
-  //   const metadata = this.getFigureMetadataByKey(key);
-  //   if (metadata) {
-  //     if (metadata.zIndex) {
-  //       thisFigureContainer.zIndex = metadata.zIndex;
-  //     }
-  //   }
-  //   // 挂载
-  //   this.figureContainer.addChild(thisFigureContainer);
-  //   this.figureObjects.push({
-  //     uuid: uuid(),
-  //     key: key,
-  //     pixiContainer: thisFigureContainer,
-  //     sourceUrl: jsonPath,
-  //     sourceType: 'live2d',
-  //     sourceExt: 'json',
-  //   });
-  //   // eslint-disable-next-line @typescript-eslint/no-this-alias
-  //   const instance = this;
-  //
-  //   const setup = () => {
-  //     if (thisFigureContainer) {
-  //       (async function () {
-  //         let overrideBounds: [number, number, number, number] = [0, 0, 0, 0];
-  //         const mot = webgalStore.getState().stage.live2dMotion.find((e) => e.target === key);
-  //         if (mot?.overrideBounds) {
-  //           overrideBounds = mot.overrideBounds;
-  //         }
-  //         console.log(overrideBounds);
-  //         const models = await Promise.all([
-  //           Live2DModel.from(jsonPath, {
-  //             autoInteract: false,
-  //             overWriteBounds: {
-  //               x0: overrideBounds[0],
-  //               y0: overrideBounds[1],
-  //               x1: overrideBounds[2],
-  //               y1: overrideBounds[3],
-  //             },
-  //           }),
-  //         ]);
-  //
-  //         models.forEach((model) => {
-  //           const scaleX = stageWidth / model.width;
-  //           const scaleY = stageHeight / model.height;
-  //           const targetScale = Math.min(scaleX, scaleY) * 1.5;
-  //           const targetWidth = model.width * targetScale;
-  //           // const targetHeight = model.height * targetScale;
-  //
-  //           model.scale.set(targetScale);
-  //           model.anchor.set(0.5);
-  //           model.position.x = stageWidth / 2;
-  //           model.position.y = stageHeight / 1.2;
-  //
-  //           if (pos === 'left') {
-  //             model.position.x = targetWidth / 2;
-  //           }
-  //           if (pos === 'right') {
-  //             model.position.x = stageWidth - targetWidth / 2;
-  //           }
-  //
-  //           let motionToSet = motion;
-  //           let animation_index = 0;
-  //           let priority_number = 3;
-  //           // var audio_link = voiceCash.pop();
-  //
-  //           // model.motion(category_name, animation_index, priority_number,location.href + audio_link);
-  //           /**
-  //            * 检查 Motion 和 Expression
-  //            */
-  //           const motionFromState = webgalStore.getState().stage.live2dMotion.find((e) => e.target === key);
-  //           const expressionFromState = webgalStore.getState().stage.live2dExpression.find((e) => e.target === key);
-  //           if (motionFromState) {
-  //             motionToSet = motionFromState.motion;
-  //           }
-  //           instance.updateL2dMotionByKey(key, motionToSet);
-  //           model.motion(motionToSet, animation_index, priority_number);
-  //           let expressionToSet = expression;
-  //           if (expressionFromState) {
-  //             expressionToSet = expressionFromState.expression;
-  //           }
-  //           instance.updateL2dExpressionByKey(key, expressionToSet);
-  //           model.expression(expressionToSet);
-  //           // @ts-ignore
-  //           if (model.internalModel.eyeBlink) {
-  //             // @ts-ignore
-  //             model.internalModel.eyeBlink.blinkInterval = 1000 * 60 * 60 * 24; // @ts-ignore
-  //             model.internalModel.eyeBlink.nextBlinkTimeLeft = 1000 * 60 * 60 * 24;
-  //           }
-  //
-  //           // lip-sync is still a problem and you can not.
-  //           SoundManager.volume = 0; // @ts-ignore
-  //           if (model.internalModel.angleXParamIndex !== undefined) model.internalModel.angleXParamIndex = 999; // @ts-ignore
-  //           if (model.internalModel.angleYParamIndex !== undefined) model.internalModel.angleYParamIndex = 999; // @ts-ignore
-  //           if (model.internalModel.angleZParamIndex !== undefined) model.internalModel.angleZParamIndex = 999;
-  //           thisFigureContainer.addChild(model);
-  //         });
-  //       })();
-  //     }
-  //   };
-  //
-  //   /**
-  //    * 加载器部分
-  //    */
-  //   const resourses = Object.keys(loader.resources);
-  //   this.cacheGC();
-  //   if (!resourses.includes(jsonPath)) {
-  //     this.loadAsset(jsonPath, setup);
-  //   } else {
-  //     // 复用
-  //     setup();
-  //   }
-  // }
+  public addLive2dFigure(key: string, jsonPath: string, pos: string, motion: string, expression: string) {
+    if (this.isLive2dAvailable !== true) return;
+    try {
+      let stageWidth = this.stageWidth;
+      let stageHeight = this.stageHeight;
+      logger.debug('Using motion:', motion);
+
+      this.figureCash.push(jsonPath);
+
+      const loader = this.assetLoader;
+      // 准备用于存放这个立绘的 Container
+      const thisFigureContainer = new WebGALPixiContainer();
+
+      // 是否有相同 key 的立绘
+      const setFigIndex = this.figureObjects.findIndex((e) => e.key === key);
+      const isFigSet = setFigIndex >= 0;
+
+      // 已经有一个这个 key 的立绘存在了
+      if (isFigSet) {
+        this.removeStageObjectByKey(key);
+      }
+
+      const metadata = this.getFigureMetadataByKey(key);
+      if (metadata) {
+        if (metadata.zIndex) {
+          thisFigureContainer.zIndex = metadata.zIndex;
+        }
+      }
+      // 挂载
+      this.figureContainer.addChild(thisFigureContainer);
+      this.figureObjects.push({
+        uuid: uuid(),
+        key: key,
+        pixiContainer: thisFigureContainer,
+        sourceUrl: jsonPath,
+        sourceType: 'live2d',
+        sourceExt: 'json',
+      });
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
+      const instance = this;
+
+      const setup = (t: any) => {
+        if (thisFigureContainer) {
+          (async function () {
+            let overrideBounds: [number, number, number, number] = [0, 0, 0, 0];
+            const mot = webgalStore.getState().stage.live2dMotion.find((e) => e.target === key);
+            if (mot?.overrideBounds) {
+              overrideBounds = mot.overrideBounds;
+            }
+            console.log(overrideBounds);
+            const models = await Promise.all([
+              t.live2DModel.from(jsonPath, {
+                autoInteract: false,
+                overWriteBounds: {
+                  x0: overrideBounds[0],
+                  y0: overrideBounds[1],
+                  x1: overrideBounds[2],
+                  y1: overrideBounds[3],
+                },
+              }),
+            ]);
+
+            models.forEach((model) => {
+              const scaleX = stageWidth / model.width;
+              const scaleY = stageHeight / model.height;
+              const targetScale = Math.min(scaleX, scaleY) * 1.5;
+              const targetWidth = model.width * targetScale;
+              // const targetHeight = model.height * targetScale;
+
+              model.scale.set(targetScale);
+              model.anchor.set(0.5);
+              model.position.x = stageWidth / 2;
+              model.position.y = stageHeight / 1.2;
+
+              if (pos === 'left') {
+                model.position.x = targetWidth / 2;
+              }
+              if (pos === 'right') {
+                model.position.x = stageWidth - targetWidth / 2;
+              }
+
+              let motionToSet = motion;
+              let animation_index = 0;
+              let priority_number = 3;
+              // var audio_link = voiceCash.pop();
+
+              // model.motion(category_name, animation_index, priority_number,location.href + audio_link);
+              /**
+               * 检查 Motion 和 Expression
+               */
+              const motionFromState = webgalStore.getState().stage.live2dMotion.find((e) => e.target === key);
+              const expressionFromState = webgalStore.getState().stage.live2dExpression.find((e) => e.target === key);
+              if (motionFromState) {
+                motionToSet = motionFromState.motion;
+              }
+              instance.updateL2dMotionByKey(key, motionToSet);
+              model.motion(motionToSet, animation_index, priority_number);
+              let expressionToSet = expression;
+              if (expressionFromState) {
+                expressionToSet = expressionFromState.expression;
+              }
+              instance.updateL2dExpressionByKey(key, expressionToSet);
+              model.expression(expressionToSet);
+              // @ts-ignore
+              if (model.internalModel.eyeBlink) {
+                // @ts-ignore
+                model.internalModel.eyeBlink.blinkInterval = 1000 * 60 * 60 * 24; // @ts-ignore
+                model.internalModel.eyeBlink.nextBlinkTimeLeft = 1000 * 60 * 60 * 24;
+              }
+
+              // lip-sync is still a problem and you can not.
+              t.soundManager.volume = 0; // @ts-ignore
+              if (model.internalModel.angleXParamIndex !== undefined) model.internalModel.angleXParamIndex = 999; // @ts-ignore
+              if (model.internalModel.angleYParamIndex !== undefined) model.internalModel.angleYParamIndex = 999; // @ts-ignore
+              if (model.internalModel.angleZParamIndex !== undefined) model.internalModel.angleZParamIndex = 999;
+              thisFigureContainer.addChild(model);
+            });
+          })();
+        }
+      };
+
+      /**
+       * 加载器部分
+       */
+      const resourses = Object.keys(loader.resources);
+      this.cacheGC();
+      if (!resourses.includes(jsonPath)) {
+        this.loadAsset(jsonPath, () => setup(this));
+      } else {
+        // 复用
+        setup(this);
+      }
+    } catch (error) {
+      console.error('Live2d Module err: ' + error);
+      this.isLive2dAvailable = false;
+    }
+  }
 
   public changeModelMotionByKey(key: string, motion: string) {
     // logger.debug(`Applying motion ${motion} to ${key}`);
@@ -1002,6 +1011,24 @@ export default class PixiStage {
     console.log(key, webgalStore.getState().stage.figureMetaData);
     return webgalStore.getState().stage.figureMetaData[key];
   }
+
+  private async initialize() {
+    // 动态加载 figureCash
+    try {
+      const { figureCash } = await import('@/Core/gameScripts/vocal/conentsCash');
+      this.figureCash = figureCash;
+      const { Live2DModel, SoundManager } = await import('pixi-live2d-display-webgal');
+      this.live2DModel = Live2DModel;
+      this.soundManager = SoundManager;
+    } catch (error) {
+      this.isLive2dAvailable = false;
+      console.info('live2d lib load failed', error);
+    }
+    if (this.isLive2dAvailable === undefined) {
+      this.isLive2dAvailable = true;
+      console.info('live2d lib load success');
+    }
+  }
 }
 
 function updateCurrentBacklogEffects(newEffects: IEffect[]) {
diff --git a/packages/webgal/src/Stage/MainStage/useSetFigure.ts b/packages/webgal/src/Stage/MainStage/useSetFigure.ts
index 425323a93..b7e270421 100644
--- a/packages/webgal/src/Stage/MainStage/useSetFigure.ts
+++ b/packages/webgal/src/Stage/MainStage/useSetFigure.ts
@@ -224,5 +224,5 @@ function addFigure(type?: 'image' | 'live2D' | 'spine', ...args: any[]) {
  */
 function addLive2dFigure(...args: any[]) {
   // @ts-ignore
-  // return WebGAL.gameplay.pixiStage?.addLive2dFigure(...args);
+  return WebGAL.gameplay.pixiStage?.addLive2dFigure(...args);
 }

From ff884fa2b83081e54b68c85efa0910a408a09976 Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Tue, 14 Jan 2025 21:12:07 +0800
Subject: [PATCH 2/3] rename pixi l2d setup params

---
 .../Core/controller/stage/pixi/PixiController.ts  | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
index 24d74b6ad..c4e8e1010 100644
--- a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
+++ b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
@@ -554,7 +554,7 @@ export default class PixiStage {
       // eslint-disable-next-line @typescript-eslint/no-this-alias
       const instance = this;
 
-      const setup = (t: any) => {
+      const setup = (stage: PixiStage) => {
         if (thisFigureContainer) {
           (async function () {
             let overrideBounds: [number, number, number, number] = [0, 0, 0, 0];
@@ -564,7 +564,7 @@ export default class PixiStage {
             }
             console.log(overrideBounds);
             const models = await Promise.all([
-              t.live2DModel.from(jsonPath, {
+              stage.live2DModel.from(jsonPath, {
                 autoInteract: false,
                 overWriteBounds: {
                   x0: overrideBounds[0],
@@ -624,7 +624,7 @@ export default class PixiStage {
               }
 
               // lip-sync is still a problem and you can not.
-              t.soundManager.volume = 0; // @ts-ignore
+              stage.soundManager.volume = 0; // @ts-ignore
               if (model.internalModel.angleXParamIndex !== undefined) model.internalModel.angleXParamIndex = 999; // @ts-ignore
               if (model.internalModel.angleYParamIndex !== undefined) model.internalModel.angleYParamIndex = 999; // @ts-ignore
               if (model.internalModel.angleZParamIndex !== undefined) model.internalModel.angleZParamIndex = 999;
@@ -856,15 +856,6 @@ export default class PixiStage {
     if (index >= 0) this.lockTransformTarget.splice(index, 1);
   }
 
-  private getExtName(url: string) {
-    return url.split('.').pop() ?? 'png';
-  }
-
-  private getFigureMetadataByKey(key: string): IFigureMetadata | undefined {
-    console.log(key, webgalStore.getState().stage.figureMetaData);
-    return webgalStore.getState().stage.figureMetaData[key];
-  }
-
   private async initialize() {
     // 动态加载 figureCash
     try {

From 4c50e6c418a5289b20650a83fe897523b6612346 Mon Sep 17 00:00:00 2001
From: Mahiru <Mahiru_@outlook.com>
Date: Tue, 14 Jan 2025 21:19:16 +0800
Subject: [PATCH 3/3] add notice about load l2d sdk

---
 packages/webgal/index.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/webgal/index.html b/packages/webgal/index.html
index bc8e9a5bc..a257f3329 100644
--- a/packages/webgal/index.html
+++ b/packages/webgal/index.html
@@ -228,6 +228,15 @@
 
     async function loadLive2D() {
       try {
+        // 尝试加载 Live2D SDK，
+        // 只有在用户自行取得 Live2D 许可并放到下面的目录时，这里才可能加载成功。
+        // 本项目 **没有** 引入 Live2D SDK
+        // Attempt to load the Live2D SDK.
+        // This will only succeed if the user has obtained a Live2D license and placed it in the directory below.
+        // This project **does not** include the Live2D SDK.
+        // Live2D SDK の読み込みを試みます。
+        // ユーザーが Live2D ライセンスを取得し、以下のディレクトリに配置した場合のみ、読み込みが成功します。
+        // このプロジェクトには Live2D SDK は**含まれていません**
         await loadScript('lib/live2d.min.js');
         await loadScript('lib/live2dcubismcore.min.js');
         console.log('Both Live2D scripts loaded successfully.');