Merge pull request #443 from OpenWebGAL/dev

4.4.9
OpenWebGAL · Jan 10, 2024 · 426d1ea · 426d1ea
2 parents 81f55a9 + a0f21df
commit 426d1ea
Show file tree

Hide file tree

Showing 32 changed files with 296 additions and 184 deletions.
diff --git a/packages/webgal/package.json b/packages/webgal/package.json
@@ -1,7 +1,7 @@
 {
   "name": "webgal",
   "private": true,
-  "version": "4.4.8",
+  "version": "4.4.9",
   "scripts": {
     "dev": "vite --host --port 3000",
     "build": "cross-env NODE_ENV=production tsc && vite build --base=./",

diff --git a/packages/webgal/public/game/scene/demo_zh_cn.txt b/packages/webgal/public/game/scene/demo_zh_cn.txt
@@ -2,7 +2,7 @@ bgm:s_Title.mp3 -volume=80 -enter=3000;
 unlockBgm:s_Title.mp3 -name=雲を追いかけて;
 intro:你好|欢迎来到 {egine} 的世界;
 changeBg:bg.png -next;
-unlockCg:bg.png -name=良夜; // 解锁CG并赋予名称
+unlockCg:bg.png -name=良い夜; // 解锁CG并赋予名称
 changeFigure:stand.png -left -enter=enter-from-left -next;
 :你好|欢迎来到 {egine} 的世界;
 miniAvatar:miniavatar.png;

diff --git a/packages/webgal/src/Core/controller/gamePlay/scriptExecutor.ts b/packages/webgal/src/Core/controller/gamePlay/scriptExecutor.ts
@@ -135,7 +135,11 @@ export const scriptExecutor = () => {
   setTimeout(() => {
     // 同步当前舞台数据
     currentStageState = webgalStore.getState().stage;
-    logger.debug('本条语句执行结果', currentStageState);
+    const allState = {
+      currentStageState: currentStageState,
+      globalGameVar: webgalStore.getState().userData.globalGameVar,
+    };
+    logger.debug('本条语句执行结果', allState);
     // 保存 backlog
     if (isSaveBacklog) {
       // WebGAL.backlogManager.isSaveBacklogNext = true;

diff --git a/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts b/packages/webgal/src/Core/controller/stage/pixi/PixiController.ts
@@ -666,9 +666,13 @@ export default class PixiStage {
         // @ts-ignore
         if (model?.internalModel) {
           // @ts-ignore
-          model?.internalModel?.coreModel?.setParamFloat?.('PARAM_MOUTH_OPEN_Y', paramY);
+          if (model?.internalModel?.coreModel?.setParamFloat)
+            // @ts-ignore
+            model?.internalModel?.coreModel?.setParamFloat?.('PARAM_MOUTH_OPEN_Y', paramY);
           // @ts-ignore
-          model?.internalModel?.coreModel?.setParameterValueById('ParamMouthOpenY', paramY);
+          if (model?.internalModel?.coreModel?.setParameterValueById)
+            // @ts-ignore
+            model?.internalModel?.coreModel?.setParameterValueById('ParamMouthOpenY', paramY);
         }
       }
     }
@@ -699,12 +703,18 @@ export default class PixiStage {
     const indexBg = this.backgroundObjects.findIndex((e) => e.key === key);
     if (indexFig >= 0) {
       const bgSprite = this.figureObjects[indexFig];
+      for (const element of bgSprite.pixiContainer.children) {
+        element.destroy();
+      }
       bgSprite.pixiContainer.destroy();
       this.figureContainer.removeChild(bgSprite.pixiContainer);
       this.figureObjects.splice(indexFig, 1);
     }
     if (indexBg >= 0) {
       const bgSprite = this.backgroundObjects[indexBg];
+      for (const element of bgSprite.pixiContainer.children) {
+        element.destroy();
+      }
       bgSprite.pixiContainer.destroy();
       this.backgroundContainer.removeChild(bgSprite.pixiContainer);
       this.backgroundObjects.splice(indexBg, 1);

diff --git a/packages/webgal/src/Core/gameScripts/changeFigure.ts b/packages/webgal/src/Core/gameScripts/changeFigure.ts
@@ -219,7 +219,7 @@ export function changeFigure(sentence: ISentence): IPerform {
       dispatch(stageActions.setLive2dMotion({ target: key, motion }));
     }
     if (expression) {
-      dispatch(stageActions.setLive2dExpression({ target: 'live2dExpression', expression }));
+      dispatch(stageActions.setLive2dExpression({ target: key, expression }));
     }
     dispatch(stageActions.setFreeFigureByKey(freeFigureItem));
   } else {

diff --git a/packages/webgal/src/Core/gameScripts/setVar.ts b/packages/webgal/src/Core/gameScripts/setVar.ts
@@ -4,18 +4,34 @@ import { webgalStore } from '@/store/store';
 import { setStageVar } from '@/store/stageReducer';
 import { logger } from '@/Core/util/logger';
 import { compile } from 'angular-expressions';
+import { setGlobalVar } from '@/store/userDataReducer';
+import { ActionCreatorWithPayload } from '@reduxjs/toolkit';
+import { ISetGameVar } from '@/store/stageInterface';
+import { syncStorageFast } from '@/Core/controller/storage/storageController';
 
 /**
  * 设置变量
  * @param sentence
  */
 export const setVar = (sentence: ISentence): IPerform => {
+  let setGlobal = false;
+  sentence.args.forEach((e) => {
+    if (e.key === 'global') {
+      setGlobal = true;
+    }
+  });
+  let targetReducerFunction: ActionCreatorWithPayload<ISetGameVar, string>;
+  if (setGlobal) {
+    targetReducerFunction = setGlobalVar;
+  } else {
+    targetReducerFunction = setStageVar;
+  }
   // 先把表达式拆分为变量名和赋值语句
   if (sentence.content.match(/=/)) {
     const key = sentence.content.split(/=/)[0];
     const valExp = sentence.content.split(/=/)[1];
     if (valExp === 'random()') {
-      webgalStore.dispatch(setStageVar({ key, value: Math.random() }));
+      webgalStore.dispatch(targetReducerFunction({ key, value: Math.random() }));
     } else if (valExp.match(/[+\-*\/()]/)) {
       // 如果包含加减乘除号，则运算
       // 先取出运算表达式中的变量
@@ -30,20 +46,25 @@ export const setVar = (sentence: ISentence): IPerform => {
         .reduce((pre, curr) => pre + curr, '');
       const exp = compile(valExp2);
       const result = exp();
-      webgalStore.dispatch(setStageVar({ key, value: result }));
+      webgalStore.dispatch(targetReducerFunction({ key, value: result }));
     } else if (valExp.match(/true|false/)) {
       if (valExp.match(/true/)) {
-        webgalStore.dispatch(setStageVar({ key, value: true }));
+        webgalStore.dispatch(targetReducerFunction({ key, value: true }));
       }
       if (valExp.match(/false/)) {
-        webgalStore.dispatch(setStageVar({ key, value: false }));
+        webgalStore.dispatch(targetReducerFunction({ key, value: false }));
       }
     } else {
       if (!isNaN(Number(valExp))) {
-        webgalStore.dispatch(setStageVar({ key, value: Number(valExp) }));
-      } else webgalStore.dispatch(setStageVar({ key, value: valExp }));
+        webgalStore.dispatch(targetReducerFunction({ key, value: Number(valExp) }));
+      } else webgalStore.dispatch(targetReducerFunction({ key, value: valExp }));
+    }
+    if (setGlobal) {
+      logger.debug('设置全局变量：', { key, value: webgalStore.getState().userData.globalGameVar[key] });
+      syncStorageFast();
+    } else {
+      logger.debug('设置变量：', { key, value: webgalStore.getState().stage.GameVar[key] });
     }
-    logger.debug('设置变量：', { key, value: webgalStore.getState().stage.GameVar[key] });
   }
   return {
     performName: 'none',
@@ -60,6 +81,8 @@ export function getValueFromState(key: string) {
   let ret: number | string | boolean = 0;
   if (webgalStore.getState().stage.GameVar.hasOwnProperty(key)) {
     ret = webgalStore.getState().stage.GameVar[key];
+  } else if (webgalStore.getState().userData.globalGameVar.hasOwnProperty(key)) {
+    ret = webgalStore.getState().userData.globalGameVar[key];
   }
   return ret;
 }
diff --git a/packages/webgal/src/Core/gameScripts/showVars.ts b/packages/webgal/src/Core/gameScripts/showVars.ts
@@ -17,18 +17,21 @@ export const showVars = (sentence: ISentence): IPerform => {
   const userDataState = webgalStore.getState().userData;
   const dispatch = webgalStore.dispatch;
   // 设置文本显示
-  dispatch(setStage({ key: 'showText', value: JSON.stringify(stageState.GameVar) }));
+  const allVar = {
+    stageGameVar: stageState.GameVar,
+    globalGameVar: userDataState.globalGameVar,
+  };
+  dispatch(setStage({ key: 'showText', value: JSON.stringify(allVar) }));
   dispatch(setStage({ key: 'showName', value: '展示变量' }));
-  logger.debug('展示变量：', stageState.GameVar);
+  logger.debug('展示变量：', allVar);
   setTimeout(() => {
     WebGAL.eventBus.emit('text-settle');
   }, 0);
   const performInitName: string = getRandomPerformName();
-  const textDelay = PERFORM_CONFIG.textInitialDelay - 20 * userDataState.optionData.textSpeed;
   const endDelay = 750 - userDataState.optionData.textSpeed * 250;
   return {
     performName: performInitName,
-    duration: sentence.content.length * textDelay + endDelay,
+    duration: endDelay,
     isHoldOn: false,
     stopFunction: () => {
       WebGAL.eventBus.emit('text-settle');

diff --git a/packages/webgal/src/Stage/Stage.tsx b/packages/webgal/src/Stage/Stage.tsx
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import styles from './stage.module.scss';
 import { TextBox } from './TextBox/TextBox';
 import { AudioContainer } from './AudioContainer/AudioContainer';
@@ -17,15 +17,17 @@ import { WebGAL } from '@/Core/WebGAL';
 // import OldStage from '@/Components/Stage/OldStage/OldStage';
 
 function inTextBox(event: React.MouseEvent) {
-  const tb = document.getElementById("textBoxMain")
+  const tb = document.getElementById('textBoxMain');
   if (!tb) {
-    return false
+    return false;
   }
-  var bounds = tb.getBoundingClientRect();
-  return event.clientX > bounds.left &&
+  let bounds = tb.getBoundingClientRect();
+  return (
+    event.clientX > bounds.left &&
     event.clientX < bounds.right &&
     event.clientY > bounds.top &&
     event.clientY < bounds.bottom
+  );
 }
 
 export const Stage: FC = () => {
@@ -37,12 +39,12 @@ export const Stage: FC = () => {
 
   const checkPosition = (event: React.MouseEvent) => {
     if (!GUIState.controlsVisibility && inTextBox(event)) {
-      dispatch(setVisibility({ component: 'controlsVisibility', visibility: true }))
+      dispatch(setVisibility({ component: 'controlsVisibility', visibility: true }));
     }
     if (GUIState.controlsVisibility && !inTextBox(event)) {
-      dispatch(setVisibility({ component: 'controlsVisibility', visibility: false }))
+      dispatch(setVisibility({ component: 'controlsVisibility', visibility: false }));
     }
-  }
+  };
 
   return (
     <div className={styles.MainStage_main}>
@@ -70,9 +72,7 @@ export const Stage: FC = () => {
         }}
         id="FullScreenClick"
         style={{ width: '100%', height: '100%', position: 'absolute', zIndex: '12', top: '0' }}
-        onMouseMove={
-          (e) => !GUIState.showControls && checkPosition(e)
-        }
+        onMouseMove={(e) => !GUIState.showControls && checkPosition(e)}
       />
       <IntroContainer />
     </div>

diff --git a/packages/webgal/src/Stage/TextBox/TextBox.tsx b/packages/webgal/src/Stage/TextBox/TextBox.tsx
@@ -56,7 +56,6 @@ export const TextBox = () => {
 
   const stageState = useSelector((state: RootState) => state.stage);
   const userDataState = useSelector((state: RootState) => state.userData);
-  useEffect(() => {});
   const textDelay = useTextDelay(userDataState.optionData.textSpeed);
   const textDuration = useTextAnimationDuration(userDataState.optionData.textSpeed);
   let size = getTextSize(userDataState.optionData.textSize) + '%';
@@ -79,6 +78,7 @@ export const TextBox = () => {
   const currentDialogKey = stageState.currentDialogKey;
   const miniAvatar = stageState.miniAvatar;
   const theme = useSelector((state: RootState) => state.GUI.theme);
+  const textboxOpacity = userDataState.optionData.textboxOpacity;
   const Textbox = getTextboxByTheme(theme.textbox);
   return (
     <Textbox
@@ -97,6 +97,7 @@ export const TextBox = () => {
       textSizeState={textSizeState}
       lineLimit={lineLimit}
       isUseStroke={isShowStroke}
+      textboxOpacity={textboxOpacity}
     />
   );
 };

diff --git a/packages/webgal/src/Stage/TextBox/themes/imss/IMSSTextbox.tsx b/packages/webgal/src/Stage/TextBox/themes/imss/IMSSTextbox.tsx
@@ -18,6 +18,7 @@ export default function IMSSTextbox(props: ITextboxProps) {
     font,
     textDuration,
     isUseStroke,
+    textboxOpacity,
   } = props;
 
   useEffect(() => {
@@ -82,14 +83,30 @@ export default function IMSSTextbox(props: ITextboxProps) {
         <div
           id="textBoxMain"
           className={styles.TextBox_main}
-          style={{ fontFamily: font, left: miniAvatar === '' ? 25 : undefined }}
+          style={{
+            fontFamily: font,
+            left: miniAvatar === '' ? 25 : undefined,
+            background: `linear-gradient(
+              rgba(245, 247, 250, ${textboxOpacity / 100}) 0%,
+              rgba(189, 198, 222, ${textboxOpacity / 100}) 100%
+            )`,
+          }}
         >
           {/* <div className={styles.nameContainer}>{stageState.showName !== ''}</div> */}
           <div id="miniAvatar" className={styles.miniAvatarContainer}>
             {miniAvatar !== '' && <img className={styles.miniAvatarImg} alt="miniAvatar" src={miniAvatar} />}
           </div>
           {showName !== '' && (
-            <div key={showName} className={styles.TextBox_showName} style={{ fontSize: '200%' }}>
+            <div
+              key={showName}
+              className={styles.TextBox_showName}
+              style={{
+                fontSize: '200%',
+                background: `rgba(11, 52, 110, ${(textboxOpacity / 100) * 0.9})`,
+                border: `4px solid rgba(255, 255, 255, ${(textboxOpacity / 100) * 0.75})`,
+                boxShadow: `3px 3px 10px rgba(100, 100, 100, ${(textboxOpacity / 100) * 0.5})`,
+              }}
+            >
               {showName.split('').map((e, i) => {
                 return (
                   <span key={e + i} style={{ position: 'relative' }}>

diff --git a/packages/webgal/src/Stage/TextBox/themes/imss/imss.module.scss b/packages/webgal/src/Stage/TextBox/themes/imss/imss.module.scss
@@ -18,7 +18,7 @@ $height: 330px;
   right: 25px;
   min-height: $height;
   max-height: $height;
-  background-image: linear-gradient(rgba(245, 247, 250, 0.95) 0%, rgba(189, 198, 222, 0.95) 100%);
+  // background: linear-gradient(rgba(245, 247, 250, 0.95) 0%, rgba(189, 198, 222, 0.95) 100%);
   background-blend-mode: darken;
   //background: white;
   border-radius: calc($height / 2) 20px 20px calc($height / 2);
@@ -41,6 +41,7 @@ $height: 330px;
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -65,11 +66,9 @@ $height: 330px;
   left: 0;
   top: 0;
   //background-image: linear-gradient(rgba(255, 255, 255, 1) 0%, rgb(225, 237, 255) 100%);
-  background-image: linear-gradient(
-      #0B346E 0%,
+  background-image: linear-gradient(#0B346E 0%,
       //#f5f7fa 45%,
-      #141423 100%
-  );
+      #141423 100%);
   //background: rgba(255, 255, 255, 1);
   background-clip: text;
   -webkit-background-clip: text;
@@ -129,16 +128,17 @@ $height: 330px;
   line-height: 68px;
   //display: flex;
   //align-items: center;
-  background: rgba(11, 52, 110, 0.9);
+  // background: rgba(11, 52, 110, 0.9);
   border-radius: 40px;
-  border: 4px solid rgba(255, 255, 255, 0.75);
-  box-shadow: 3px 3px 10px rgba(100, 100, 100, 0.5);
+  // border: 4px solid rgba(255, 255, 255, 0.75);
+  // box-shadow: 3px 3px 10px rgba(100, 100, 100, 0.5);
 }
 
 @keyframes TextDelayShow {
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -202,4 +202,4 @@ $height: 330px;
   -webkit-box-orient: vertical;
   //-webkit-line-clamp: 2;
   overflow: hidden;
-}
+}
diff --git a/packages/webgal/src/Stage/TextBox/themes/standard/StandardTextbox.tsx b/packages/webgal/src/Stage/TextBox/themes/standard/StandardTextbox.tsx
@@ -19,6 +19,7 @@ export interface ITextboxProps {
   textSizeState: number;
   lineLimit: number;
   isUseStroke: boolean;
+  textboxOpacity: number;
 }
 
 export default function StandardTextbox(props: ITextboxProps) {
@@ -37,6 +38,7 @@ export default function StandardTextbox(props: ITextboxProps) {
     textDuration,
     textSizeState,
     isUseStroke,
+    textboxOpacity,
   } = props;
 
   const isHasMiniAvatar = miniAvatar !== '';
@@ -111,7 +113,20 @@ export default function StandardTextbox(props: ITextboxProps) {
         <div
           id="textBoxMain"
           className={styles.TextBox_main}
-          style={{ fontFamily: font, paddingLeft: padding, paddingTop }}
+          style={{
+            fontFamily: font,
+            paddingLeft: padding,
+            paddingTop,
+            background: `linear-gradient(
+                transparent,
+                rgba(0, 0, 0, ${textboxOpacity / 100 / 2}) 25%,
+                rgba(0, 0, 0, ${textboxOpacity / 100 / 2}) 75%,
+                rgba(0, 0, 0, ${textboxOpacity / 100})),
+              linear-gradient(
+                90deg, transparent 0,
+                rgba(0, 0, 0, ${textboxOpacity / 100 / 2}) 25%,
+                rgba(0, 0, 0, ${textboxOpacity / 100}) 75%, transparent)`,
+          }}
         >
           {/* <div className={styles.nameContainer}>{stageState.showName !== ''}</div> */}
           <div id="miniAvatar" className={styles.miniAvatarContainer}>