Merge pull request #504 from bromine0x23/main

feat: Spine background
OpenWebGAL · Jun 15, 2024 · dc6bf37 · dc6bf37
2 parents 5b47c98 + eeda865
commit dc6bf37
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 4 deletions.
diff --git a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
@@ -395,6 +395,84 @@ export default class PixiStage {
     }
   }
 
+  public addSpineBg(key: string, url: string) {
+    const spineId = `spine-${url}`;
+    const loader = this.assetLoader;
+    // 准备用于存放这个背景的 Container
+    const thisBgContainer = new WebGALPixiContainer();
+
+    // 是否有相同 key 的背景
+    const setBgIndex = this.backgroundObjects.findIndex((e) => e.key === key);
+    const isBgSet = setBgIndex >= 0;
+
+    // 已经有一个这个 key 的背景存在了
+    if (isBgSet) {
+      // 挤占
+      this.removeStageObjectByKey(key);
+    }
+
+    // 挂载
+    this.backgroundContainer.addChild(thisBgContainer);
+    const bgUuid = uuid();
+    this.backgroundObjects.push({
+      uuid: bgUuid,
+      key: key,
+      pixiContainer: thisBgContainer,
+      sourceUrl: url,
+      sourceType: 'live2d',
+      sourceExt: this.getExtName(url),
+    });
+
+    // 完成图片加载后执行的函数
+    const setup = () => {
+      const spineResource: any = this.assetLoader.resources?.[spineId];
+      // TODO：找一个更好的解法，现在的解法是无论是否复用原来的资源，都设置一个延时以让动画工作正常！
+      setTimeout(() => {
+        if (spineResource && this.getStageObjByUuid(bgUuid)) {
+          const bgSpine = new Spine(spineResource.spineData);
+          const transY = spineResource?.spineData?.y ?? 0;
+          /**
+           * 重设大小
+           */
+          const originalWidth = bgSpine.width; // TODO: 视图大小可能小于画布大小，应提供参数指定视图大小
+          const originalHeight = bgSpine.height; // TODO: 视图大小可能小于画布大小，应提供参数指定视图大小
+          const scaleX = this.stageWidth / originalWidth;
+          const scaleY = this.stageHeight / originalHeight;
+          logger.debug('bgSpine state', bgSpine.state);
+          // TODO: 也许应该使用 setAnimation 播放初始动画
+          if (bgSpine.spineData.animations.length > 0) {
+            // 播放首个动画
+            bgSpine.state.setAnimation(0, bgSpine.spineData.animations[0].name, true);
+          }
+          const targetScale = Math.max(scaleX, scaleY);
+          const bgSprite = new PIXI.Sprite();
+          bgSprite.addChild(bgSpine);
+          bgSprite.scale.x = targetScale;
+          bgSprite.scale.y = targetScale;
+          bgSprite.anchor.set(0.5);
+          bgSprite.position.y = this.stageHeight / 2;
+          thisBgContainer.setBaseX(this.stageWidth / 2);
+          thisBgContainer.setBaseY(this.stageHeight / 2);
+          thisBgContainer.pivot.set(0, this.stageHeight / 2);
+
+          // 挂载
+          thisBgContainer.addChild(bgSprite);
+        }
+      }, 0);
+    };
+
+    /**
+     * 加载器部分
+     */
+    this.cacheGC();
+    if (!loader.resources?.[url]) {
+      this.loadAsset(url, setup, spineId);
+    } else {
+      // 复用
+      setup();
+    }
+  }
+
   /**
    * 添加立绘
    * @param key 立绘的标识，一般和立绘位置有关
@@ -514,7 +592,6 @@ export default class PixiStage {
 
     // 完成图片加载后执行的函数
     const setup = () => {
-      console.log(this.assetLoader.resources);
       const spineResource: any = this.assetLoader.resources?.[spineId];
       // TODO：找一个更好的解法，现在的解法是无论是否复用原来的资源，都设置一个延时以让动画工作正常！
       setTimeout(() => {
@@ -524,14 +601,12 @@ export default class PixiStage {
           /**
            * 重设大小
            */
-          console.log(figureSpine);
           const originalWidth = figureSpine.width;
           const originalHeight = figureSpine.height;
           const scaleX = this.stageWidth / originalWidth;
           const scaleY = this.stageHeight / originalHeight;
           // 我也不知道为什么啊啊啊啊
           figureSpine.y = -(scaleY * transY) / 2;
-          console.log(figureSpine.state);
           figureSpine.state.setAnimation(0, '07', true);
           const targetScale = Math.min(scaleX, scaleY);
           const figureSprite = new PIXI.Sprite();

diff --git a/packages/webgal/src/Stage/MainStage/useSetBg.ts b/packages/webgal/src/Stage/MainStage/useSetBg.ts
@@ -22,7 +22,7 @@ export function useSetBg(stageState: IStageState) {
           removeBg(currentBg);
         }
       }
-      WebGAL.gameplay.pixiStage?.addBg(thisBgKey, bgName);
+      addBg(undefined, thisBgKey, bgName);
       setEbg(bgName);
       logger.debug('重设背景');
       const { duration, animation } = getEnterExitAnimation('bg-main', 'enter', true);
@@ -49,3 +49,14 @@ function removeBg(bgObject: IStageObject) {
     WebGAL.gameplay.pixiStage?.removeStageObjectByKey('bg-main-off');
   }, duration);
 }
+
+function addBg(type?: 'image' | 'spine', ...args: any[]) {
+  const url = args[1];
+  if (url.endsWith('.skel')) {
+    // @ts-ignore
+    return WebGAL.gameplay.pixiStage?.addSpineBg(...args);
+  } else {
+    // @ts-ignore
+    return WebGAL.gameplay.pixiStage?.addBg(...args);
+  }
+}