Merge pull request #365 from MakinoharaShoko/dev

Auto transform animation and enter transform setting.

packages/webgal/package.json

@@ -1,7 +1,7 @@
 {
   "name": "webgal",
   "private": true,
-  "version": "4.4.3",
+  "version": "4.4.4",
   "scripts": {
     "dev": "vite --host --port 3000",
     "build": "cross-env NODE_ENV=production tsc && vite build --base=./",

packages/webgal/public/game/animation/animationTable.json

@@ -1 +1 @@
-["enter-from-left","enter-from-bottom","enter-from-right","shake","move-front-and-back","enter","exit","l2c","shake2","blur","oldFilm","dotFilm","reflectionFilm","glitchFilm","rgbFilm","godrayFilm","removeFilm"]
+["enter-from-left","enter-from-bottom","enter-from-right","shake","move-front-and-back","enter","exit","blur","oldFilm","dotFilm","reflectionFilm","glitchFilm","rgbFilm","godrayFilm","removeFilm"]

packages/webgal/public/game/scene/demo_zh_cn.txt

@@ -13,7 +13,7 @@ WebGAL 是使用 Web 技术开发的引擎，因此在网页端有良好的表
 setAnimation:move-front-and-back -target=fig-left -next;
 听起来是不是非常吸引人？ -v4.wav;
 changeFigure:none -right -next;
-setAnimation:l2c -target=fig-left -next;
+setTransform:{"position": {"x": 500,"y": 0}} -target=fig-left -next;
 WebGAL 引擎也具有动画系统和特效系统，使用 WebGAL 开发的游戏可以拥有很好的表现效果。 -v5.wav;
 pixiInit;
 pixiPerform:snow;
@@ -27,6 +27,7 @@ choose:WebGAL 发展历程:choose1|WebGAL 冷知识:choose2;
 label:choose1;
 WebGAL 的开发初衷是能够让更多人可以更方便地制作属于自己的视觉小说。 -v9.wav;
 在一开始，WebGAL 只具备很少的功能，仅仅能支持立绘和背景的显示、语音播放和分支选择。 -v10.wav;
+setAnimation:move-front-and-back -target=fig-left -next;
 在经历一年的发展后，现在已经是支持了很多优秀的表现效果的引擎了！ -v11.wav;
 除此以外，WebGAL 编辑器的加入也使得制作和导出一个游戏更加方便快捷。 -v12.wav;
 jumpLabel:end;

packages/webgal/src/Components/Stage/MainStage/useSetFigure.ts

@@ -34,7 +34,7 @@ export function useSetFigure(stageState: IStageState) {
       logger.debug('中立绘已重设');
       const { duration, animation } = getEnterExitAnimation(thisFigKey, 'enter');
       WebGAL.gameplay.pixiStage!.registerPresetAnimation(animation, softInAniKey, thisFigKey, stageState.effects);
-      setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimation(softInAniKey), duration);
+      setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimationWithSetEffects(softInAniKey), duration);
     } else {
       logger.debug('移除中立绘');
       const currentFigCenter = WebGAL.gameplay.pixiStage?.getStageObjByKey(thisFigKey);
@@ -72,7 +72,7 @@ export function useSetFigure(stageState: IStageState) {
       logger.debug('左立绘已重设');
       const { duration, animation } = getEnterExitAnimation(thisFigKey, 'enter');
       WebGAL.gameplay.pixiStage!.registerPresetAnimation(animation, softInAniKey, thisFigKey, stageState.effects);
-      setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimation(softInAniKey), duration);
+      setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimationWithSetEffects(softInAniKey), duration);
     } else {
       logger.debug('移除左立绘');
       const currentFigLeft = WebGAL.gameplay.pixiStage?.getStageObjByKey(thisFigKey);
@@ -110,7 +110,7 @@ export function useSetFigure(stageState: IStageState) {
       logger.debug('右立绘已重设');
       const { duration, animation } = getEnterExitAnimation(thisFigKey, 'enter');
       WebGAL.gameplay.pixiStage!.registerPresetAnimation(animation, softInAniKey, thisFigKey, stageState.effects);
-      setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimation(softInAniKey), duration);
+      setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimationWithSetEffects(softInAniKey), duration);
     } else {
       const currentFigRight = WebGAL.gameplay.pixiStage?.getStageObjByKey(thisFigKey);
       if (currentFigRight) {
@@ -141,7 +141,7 @@ export function useSetFigure(stageState: IStageState) {
             logger.debug(`${fig.key}立绘已重设`);
             const { duration, animation } = getEnterExitAnimation(thisFigKey, 'enter');
             WebGAL.gameplay.pixiStage!.registerPresetAnimation(animation, softInAniKey, thisFigKey, stageState.effects);
-            setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimation(softInAniKey), duration);
+            setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimationWithSetEffects(softInAniKey), duration);
           }
         } else {
           WebGAL.gameplay.pixiStage?.addFigure(thisFigKey, fig.name, fig.basePosition);
@@ -157,7 +157,7 @@ export function useSetFigure(stageState: IStageState) {
           logger.debug(`${fig.key}立绘已重设`);
           const { duration, animation } = getEnterExitAnimation(thisFigKey, 'enter');
           WebGAL.gameplay.pixiStage!.registerPresetAnimation(animation, softInAniKey, thisFigKey, stageState.effects);
-          setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimation(softInAniKey), duration);
+          setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimationWithSetEffects(softInAniKey), duration);
         }
       } else {
         const currentFigThisKey = WebGAL.gameplay.pixiStage?.getStageObjByKey(thisFigKey);

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

@@ -5,6 +5,7 @@ import { logger } from '@/Core/util/etc/logger';
 import { generateTimelineObj } from '@/Core/controller/stage/pixi/animations/timeline';
 import { generateUniversalSoftInAnimationObj } from '@/Core/controller/stage/pixi/animations/universalSoftIn';
 import { generateUniversalSoftOffAnimationObj } from '@/Core/controller/stage/pixi/animations/universalSoftOff';
+import { webgalStore } from '@/store/store';
 
 export interface IUserAnimation {
   name: string;
@@ -28,7 +29,8 @@ export function getAnimationObject(animationName: string, target: string, durati
   const effect = WebGAL.animationManager.getAnimations().find((ani) => ani.name === animationName);
   if (effect) {
     const mappedEffects = effect.effects.map((effect) => {
-      const newEffect = cloneDeep({ ...baseTransform, duration: 0 });
+      const targetSetEffect = webgalStore.getState().stage.effects.find((e) => e.target === target);
+      const newEffect = cloneDeep({ ...(targetSetEffect?.transform ?? baseTransform), duration: 0 });
       Object.assign(newEffect, effect);
       newEffect.duration = effect.duration / 1000;
       return newEffect;

packages/webgal/src/Core/config/scriptConfig.ts

@@ -85,6 +85,5 @@ export const ADD_NEXT_ARG_LIST = [
   commandType.filmMode,
   commandType.playEffect,
   commandType.comment,
-  commandType.setTransform,
   commandType.setTransition,
 ];

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

@@ -119,7 +119,7 @@ export default class PixiStage {
     // 每 5s 获取帧率
     const update = () => {
       this.updateFps();
-      setTimeout(update, 5000);
+      setTimeout(update, 10000);
     };
     update();
   }
@@ -559,7 +559,7 @@ export default class PixiStage {
   private updateFps() {
     getScreenFps?.(120).then((fps) => {
       this.frameDuration = 1000 / (fps as number);
-      logger.info('当前帧率', fps);
+      // logger.info('当前帧率', fps);
     });
   }
 
@@ -574,9 +574,9 @@ export default class PixiStage {
 }
 
 export function updateCurrentEffects(newEffects: IEffect[]) {
-  /**
-   * 更新当前 backlog 条目的 effects 记录
-   */
+  // /**
+  //  * 更新当前 backlog 条目的 effects 记录
+  //  */
   // if (!notUpdateBacklogEffects)
   //   setTimeout(() => {
   //     const backlog = RUNTIME_CURRENT_BACKLOG[RUNTIME_CURRENT_BACKLOG.length - 1];

packages/webgal/src/Core/gameScripts/changeBg.ts

@@ -8,6 +8,11 @@ import { getSentenceArgByKey } from '@/Core/util/getSentenceArg';
 import { WebGAL } from '@/main';
 import { unlockCgInUserData } from '@/store/userDataReducer';
 import { logger } from '@/Core/util/etc/logger';
+import { ITransform } from '@/store/stageInterface';
+import { generateTransformAnimationObj } from '@/Core/gameScripts/function/generateTransformAnimationObj';
+import { getAnimateDuration, IUserAnimation } from '@/Core/Modules/animations';
+import { updateCurrentEffects } from '../controller/stage/pixi/PixiController';
+import cloneDeep from 'lodash/cloneDeep';
 
 /**
  * 进行背景图片的切换
@@ -26,19 +31,76 @@ export const changeBg = (sentence: ISentence): IPerform => {
       series = e.value.toString();
     }
   });
-  webgalStore.dispatch(unlockCgInUserData({ name, url, series }));
+
   const dispatch = webgalStore.dispatch;
+  dispatch(unlockCgInUserData({ name, url, series }));
+
+  /**
+   * 删掉相关 Effects，因为已经移除了
+   */
+  const prevEffects = webgalStore.getState().stage.effects;
+  const newEffects = cloneDeep(prevEffects);
+  const index = newEffects.findIndex((e) => e.target === `bg-main`);
+  if (index >= 0) {
+    newEffects.splice(index, 1);
+  }
+  updateCurrentEffects(newEffects);
+
+  // 处理 transform 和 默认 transform
+  const transformString = getSentenceArgByKey(sentence, 'transform');
+  let duration = getSentenceArgByKey(sentence, 'duration');
+  if (!duration || typeof duration !== 'number') {
+    duration = 1000;
+  }
+  let animationObj: (ITransform & {
+    duration: number;
+  })[];
+  if (transformString) {
+    try {
+      const frame = JSON.parse(transformString.toString()) as ITransform & { duration: number };
+      animationObj = generateTransformAnimationObj('bg-main', frame, duration);
+      // 因为是切换，必须把一开始的 alpha 改为 0
+      animationObj[0].alpha = 0;
+      const animationName = (Math.random() * 10).toString(16);
+      const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
+      WebGAL.animationManager.addAnimation(newAnimation);
+      duration = getAnimateDuration(animationName);
+      WebGAL.animationManager.nextEnterAnimationName.set('bg-main', animationName);
+    } catch (e) {
+      // 解析都错误了，歇逼吧
+      applyDefaultTransform();
+    }
+  } else {
+    applyDefaultTransform();
+  }
+
+  function applyDefaultTransform() {
+    // 应用默认的
+    const frame = {};
+    animationObj = generateTransformAnimationObj('bg-main', frame as ITransform & { duration: number }, duration);
+    // 因为是切换，必须把一开始的 alpha 改为 0
+    animationObj[0].alpha = 0;
+    const animationName = (Math.random() * 10).toString(16);
+    const newAnimation: IUserAnimation = { name: animationName, effects: animationObj };
+    WebGAL.animationManager.addAnimation(newAnimation);
+    duration = getAnimateDuration(animationName);
+    WebGAL.animationManager.nextEnterAnimationName.set('bg-main', animationName);
+  }
+
+  // 应用动画的优先级更高一点
   if (getSentenceArgByKey(sentence, 'enter')) {
     WebGAL.animationManager.nextEnterAnimationName.set('bg-main', getSentenceArgByKey(sentence, 'enter')!.toString());
+    duration = getAnimateDuration(getSentenceArgByKey(sentence, 'enter')!.toString());
   }
   if (getSentenceArgByKey(sentence, 'exit')) {
     WebGAL.animationManager.nextExitAnimationName.set('bg-main-off', getSentenceArgByKey(sentence, 'exit')!.toString());
+    duration = getAnimateDuration(getSentenceArgByKey(sentence, 'exit')!.toString());
   }
   dispatch(setStage({ key: 'bgName', value: sentence.content }));
 
   return {
     performName: 'none',
-    duration: 1000,
+    duration,
     isHoldOn: false,
     stopFunction: () => {},
     blockingNext: () => false,