Merge branch 'dev' into pr/612

Author: MakinoharaShoko

packages/webgal/package.json

@@ -22,7 +22,6 @@
     "modern-css-reset": "^1.4.0",
     "pixi-filters": "^4.2.0",
     "pixi-live2d-display-webgal": "^0.5.8",
-    "pixi-spine": "^3.1.2",
     "pixi.js": "^6.3.0",
     "popmotion": "^11.0.5",
     "react": "^17.0.2",

packages/webgal/public/game/bgm/s_Title.mp3

@@ -6,14 +6,15 @@ import cloneDeep from 'lodash/cloneDeep';
 import { baseTransform } from '@/store/stageInterface';
 import { generateTimelineObj } from '@/Core/controller/stage/pixi/animations/timeline';
 import { WebGAL } from '@/Core/WebGAL';
+import PixiStage from '@/Core/controller/stage/pixi/PixiController';
 
 export function getAnimationObject(animationName: string, target: string, duration: number) {
   const effect = WebGAL.animationManager.getAnimations().find((ani) => ani.name === animationName);
   if (effect) {
     const mappedEffects = effect.effects.map((effect) => {
       const targetSetEffect = webgalStore.getState().stage.effects.find((e) => e.target === target);
       const newEffect = cloneDeep({ ...(targetSetEffect?.transform ?? baseTransform), duration: 0 });
-      Object.assign(newEffect, effect);
+      PixiStage.assignTransform(newEffect, effect);
       newEffect.duration = effect.duration;
       return newEffect;
     });

packages/webgal/src/Core/Modules/animationFunctions.ts

@@ -58,8 +58,9 @@ export const autoNextSentence = () => {
  * 自动播放的执行函数
  */
 const autoPlay = () => {
-  const delay = webgalStore.getState().userData.optionData.autoSpeed;
-  const autoPlayDelay = 750 - 250 * delay;
+  const data = webgalStore.getState().userData.optionData.autoSpeed;
+  // 范围为 [250, 1750]
+  const autoPlayDelay = 250 + (100 - data) * 15;
   let isBlockingAuto = false;
   WebGAL.gameplay.performController.performList.forEach((e) => {
     if (e.blockingAuto())

packages/webgal/src/Core/controller/gamePlay/autoPlay.ts

@@ -7,6 +7,7 @@ import { stopFast } from '@/Core/controller/gamePlay/fastSkip';
 import { setEbg } from '@/Core/gameScripts/changeBg/setEbg';
 
 export const backToTitle = () => {
+  if (webgalStore.getState().GUI.showTitle) return;
   const dispatch = webgalStore.dispatch;
   stopAllPerform();
   stopAuto();

packages/webgal/src/Core/controller/gamePlay/backToTitle.ts

@@ -3,14 +3,13 @@ import { v4 as uuid } from 'uuid';
 import { webgalStore } from '@/store/store';
 import { setStage, stageActions } from '@/store/stageReducer';
 import cloneDeep from 'lodash/cloneDeep';
-import { IEffect, IFigureAssociatedAnimation, IFigureMetadata } from '@/store/stageInterface';
+import { IEffect, IFigureAssociatedAnimation, IFigureMetadata, ITransform } from '@/store/stageInterface';
 import { logger } from '@/Core/util/logger';
 import { isIOS } from '@/Core/initializeScript';
 import { WebGALPixiContainer } from '@/Core/controller/stage/pixi/WebGALPixiContainer';
 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 { addSpineBgImpl, addSpineFigureImpl } from '@/Core/controller/stage/pixi/spine';
 // import { figureCash } from '@/Core/gameScripts/vocal/conentsCash'; // 如果要使用 Live2D，取消这里的注释
 // import { Live2DModel, SoundManager } from 'pixi-live2d-display-webgal'; // 如果要使用 Live2D，取消这里的注释
 
@@ -60,28 +59,46 @@ export interface ILive2DRecord {
 window.PIXI = PIXI;
 
 export default class PixiStage {
+  public static assignTransform<T extends ITransform>(target: T, source?: ITransform) {
+    if (!source) return;
+    const targetScale = target.scale;
+    const targetPosition = target.position;
+    if (target.scale) Object.assign(targetScale, source.scale);
+    if (target.position) Object.assign(targetPosition, source.position);
+    Object.assign(target, source);
+    target.scale = targetScale;
+    target.position = targetPosition;
+  }
+
   /**
    * 当前的 PIXI App
    */
   public currentApp: PIXI.Application | null = null;
   public readonly effectsContainer: PIXI.Container;
   public frameDuration = 16.67;
   public notUpdateBacklogEffects = false;
-  private readonly figureContainer: PIXI.Container;
-  private figureObjects: Array<IStageObject> = [];
-  private readonly backgroundContainer: PIXI.Container;
-  private backgroundObjects: Array<IStageObject> = [];
-
+  public readonly figureContainer: PIXI.Container;
+  public figureObjects: Array<IStageObject> = [];
+  public stageWidth = SCREEN_CONSTANTS.width;
+  public stageHeight = SCREEN_CONSTANTS.height;
+  public assetLoader = new PIXI.Loader();
+  public readonly backgroundContainer: PIXI.Container;
+  public backgroundObjects: Array<IStageObject> = [];
+  /**
+   * 添加 Spine 立绘
+   * @param key 立绘的标识，一般和立绘位置有关
+   * @param url 立绘图片url
+   * @param presetPosition
+   */
+  public addSpineFigure = addSpineFigureImpl.bind(this);
+  public addSpineBg = addSpineBgImpl.bind(this);
   // 注册到 Ticker 上的函数
   private stageAnimations: Array<IStageAnimationObject> = [];
-  private assetLoader = new PIXI.Loader();
   private loadQueue: { url: string; callback: () => void; name?: string }[] = [];
   private live2dFigureRecorder: Array<ILive2DRecord> = [];
-
   // 锁定变换对象（对象可能正在执行动画，不能应用变换）
   private lockTransformTarget: Array<string> = [];
-  private stageWidth = SCREEN_CONSTANTS.width;
-  private stageHeight = SCREEN_CONSTANTS.height;
+
   /**
    * 暂时没用上，以后可能用
    * @private
@@ -188,7 +205,7 @@ export default class PixiStage {
       const targetPixiContainer = this.getStageObjByKey(target);
       if (targetPixiContainer) {
         const container = targetPixiContainer.pixiContainer;
-        Object.assign(container, effect.transform);
+        PixiStage.assignTransform(container, effect.transform);
       }
       return;
     }
@@ -396,84 +413,6 @@ 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 立绘的标识，一般和立绘位置有关
@@ -564,103 +503,6 @@ export default class PixiStage {
     }
   }
 
-  /**
-   * 添加 Spine 立绘
-   * @param key 立绘的标识，一般和立绘位置有关
-   * @param url 立绘图片url
-   * @param presetPosition
-   */
-  public addSpineFigure(key: string, url: string, presetPosition: 'left' | 'center' | 'right' = 'center') {
-    const spineId = `spine-${url}`;
-    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);
-    const figureUuid = uuid();
-    this.figureObjects.push({
-      uuid: figureUuid,
-      key: key,
-      pixiContainer: thisFigureContainer,
-      sourceUrl: url,
-      sourceType: 'live2d',
-      sourceExt: this.getExtName(url),
-    });
-
-    // 完成图片加载后执行的函数
-    const setup = () => {
-      const spineResource: any = this.assetLoader.resources?.[spineId];
-      // TODO：找一个更好的解法，现在的解法是无论是否复用原来的资源，都设置一个延时以让动画工作正常！
-      setTimeout(() => {
-        if (spineResource && this.getStageObjByUuid(figureUuid)) {
-          const figureSpine = new Spine(spineResource.spineData);
-          const transY = spineResource?.spineData?.y ?? 0;
-          /**
-           * 重设大小
-           */
-          const originalWidth = figureSpine.width;
-          const originalHeight = figureSpine.height;
-          const scaleX = this.stageWidth / originalWidth;
-          const scaleY = this.stageHeight / originalHeight;
-          // 我也不知道为什么啊啊啊啊
-          figureSpine.y = -(scaleY * transY) / 2;
-          figureSpine.state.setAnimation(0, '07', true);
-          const targetScale = Math.min(scaleX, scaleY);
-          const figureSprite = new PIXI.Sprite();
-          figureSprite.addChild(figureSpine);
-          figureSprite.scale.x = targetScale;
-          figureSprite.scale.y = targetScale;
-          figureSprite.anchor.set(0.5);
-          figureSprite.position.y = this.stageHeight / 2;
-          const targetWidth = originalWidth * targetScale;
-          const targetHeight = originalHeight * targetScale;
-          thisFigureContainer.setBaseY(this.stageHeight / 2);
-          if (targetHeight < this.stageHeight) {
-            thisFigureContainer.setBaseY(this.stageHeight / 2 + this.stageHeight - targetHeight / 2);
-          }
-          if (presetPosition === 'center') {
-            thisFigureContainer.setBaseX(this.stageWidth / 2);
-          }
-          if (presetPosition === 'left') {
-            thisFigureContainer.setBaseX(targetWidth / 2);
-          }
-          if (presetPosition === 'right') {
-            thisFigureContainer.setBaseX(this.stageWidth - targetWidth / 2);
-          }
-          thisFigureContainer.pivot.set(0, this.stageHeight / 2);
-          thisFigureContainer.addChild(figureSprite);
-        }
-      }, 0);
-    };
-
-    /**
-     * 加载器部分
-     */
-    this.cacheGC();
-    if (!loader.resources?.[url]) {
-      this.loadAsset(url, setup, spineId);
-    } else {
-      // 复用
-      setup();
-    }
-  }
-
   /**
    * Live2d立绘，如果要使用 Live2D，取消这里的注释
    * @param jsonPath
@@ -918,6 +760,26 @@ export default class PixiStage {
     PIXI.utils.clearTextureCache();
   }
 
+  public getExtName(url: string) {
+    return url.split('.').pop() ?? 'png';
+  }
+
+  public getFigureMetadataByKey(key: string): IFigureMetadata | undefined {
+    console.log(key, webgalStore.getState().stage.figureMetaData);
+    return webgalStore.getState().stage.figureMetaData[key];
+  }
+
+  public loadAsset(url: string, callback: () => void, name?: string) {
+    /**
+     * Loader 复用疑似有问题，转而采用先前的单独方式
+     */
+    this.loadQueue.unshift({ url, callback, name });
+    /**
+     * 尝试启动加载
+     */
+    this.callLoader();
+  }
+
   private updateL2dMotionByKey(target: string, motion: string) {
     const figureTargetIndex = this.live2dFigureRecorder.findIndex((e) => e.target === target);
     if (figureTargetIndex >= 0) {
@@ -936,17 +798,6 @@ export default class PixiStage {
     }
   }
 
-  private loadAsset(url: string, callback: () => void, name?: string) {
-    /**
-     * Loader 复用疑似有问题，转而采用先前的单独方式
-     */
-    this.loadQueue.unshift({ url, callback, name });
-    /**
-     * 尝试启动加载
-     */
-    this.callLoader();
-  }
-
   private callLoader() {
     if (!this.assetLoader.loading) {
       const front = this.loadQueue.shift();
@@ -993,15 +844,6 @@ export default class PixiStage {
     const index = this.lockTransformTarget.findIndex((name) => name === targetName);
     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];
-  }
 }
 
 function updateCurrentBacklogEffects(newEffects: IEffect[]) {

packages/webgal/src/Core/controller/stage/pixi/PixiController.ts

@@ -1,5 +1,6 @@
 import { ITransform } from '@/store/stageInterface';
 import { webgalStore } from '@/store/store';
+import isNull from 'lodash/isNull';
 
 type AnimationFrame = ITransform & { duration: number };
 type AnimationObj = Array<AnimationFrame>;
@@ -14,7 +15,7 @@ export function generateTransformAnimationObj(
   const transformState = webgalStore.getState().stage.effects;
   const targetEffect = transformState.find((effect) => effect.target === target);
   applyFrame.duration = 500;
-  if (duration && typeof duration === 'number') {
+  if (!isNull(duration) && typeof duration === 'number') {
     applyFrame.duration = duration;
   }
   animationObj = [applyFrame];