Merge pull request #509 from OpenWebGAL/dev

4.5.3
OpenWebGAL · Jun 30, 2024 · ea0f06b · ea0f06b
2 parents ee01f3b + b660f5b
commit ea0f06b
Show file tree

Hide file tree

Showing 22 changed files with 296 additions and 144 deletions.
diff --git a/packages/webgal/package.json b/packages/webgal/package.json
@@ -1,7 +1,7 @@
 {
   "name": "webgal",
   "private": true,
-  "version": "4.5.2",
+  "version": "4.5.3",
   "scripts": {
     "dev": "vite --host --port 3000",
     "build": "cross-env NODE_ENV=production tsc && vite build --base=./",
@@ -21,7 +21,7 @@
     "mitt": "^3.0.0",
     "modern-css-reset": "^1.4.0",
     "pixi-filters": "^4.2.0",
-    "pixi-live2d-display": "^0.4.0",
+    "pixi-live2d-display-webgal": "^0.5.2",
     "pixi-spine": "^3.1.2",
     "pixi.js": "^6.3.0",
     "popmotion": "^11.0.5",

diff --git a/packages/webgal/public/game/scene/demo_zh_cn.txt b/packages/webgal/public/game/scene/demo_zh_cn.txt
@@ -25,6 +25,7 @@ pixiPerform:snow;
 pixiInit;
 WebGAL:接下来介绍一些新版本功能！
 WebGAL:比如这个[注](zhù)[音](yīn)功能，可以为游戏带来更好的体验！
+WebGAL:我们也支持了[文本拓展语法](style=color:#B5495B\;)，可以为[文](wen)[本](ben)带来[富文本支持](style-alltext=font-style:italic\; style=color:#66327C\;)、交互等特性。
 WebGAL:新版本添加了特性：获取用户输入，你要尝试一下吗？
 choose:尝试一下:userInput|算了吧:toNextPart;
 

diff --git a/packages/webgal/public/game/template/Stage/Choose/choose.scss b/packages/webgal/public/game/template/Stage/Choose/choose.scss
@@ -0,0 +1,54 @@
+.Choose_Main {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 13;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.Choose_item {
+  font-family: "WebgalUI", serif;
+  cursor: pointer;
+  min-width: 50%;
+  padding: 0.25em 1em 0.25em 1em;
+  font-size: 265%;
+  color: #8E354A;
+  text-align: center;
+  border-radius: 4px;
+  border: 3px solid rgba(0, 0, 0, 0);
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
+  background: rgba(255, 255, 255, 0.65);
+  margin: 0.25em 0 0.25em 0;
+  transition: background-color 0.5s, border 0.5s, font-weight 0.5s, box-shadow 0.5s;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
+    border: 3px solid #8E354A;
+  }
+}
+
+.Choose_item_disabled {
+  font-family: "WebgalUI", serif;
+  cursor: not-allowed;
+  min-width: 50%;
+  padding: 0.25em 1em 0.25em 1em;
+  font-size: 265%;
+  color: rgba(142, 53, 74, 0.5);
+  text-align: center;
+  border-radius: 4px;
+  border: 3px solid rgba(0, 0, 0, 0);
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.25);
+  background: rgba(255, 255, 255, 0.5);
+  margin: 0.25em 0 0.25em 0;
+  transition: background-color 0.5s, border 0.5s, font-weight 0.5s, box-shadow 0.5s;
+}
+
+.Choose_item_outer {
+  color: #000;
+  min-width: 50%;
+}
diff --git a/packages/webgal/public/game/template/template.json b/packages/webgal/public/game/template/template.json
@@ -1,4 +1,4 @@
 {
   "name":"Default Template",
-  "webgal-version":"4.5.2"
+  "webgal-version":"4.5.3"
 }
diff --git a/packages/webgal/src/Core/Modules/scene.ts b/packages/webgal/src/Core/Modules/scene.ts
@@ -27,6 +27,7 @@ export class SceneManager {
   public settledScenes: Array<string> = [];
   public settledAssets: Array<string> = [];
   public sceneData: ISceneData = cloneDeep(initSceneData);
+  public lockSceneWrite = false;
 
   public resetScene() {
     this.sceneData.currentSentenceId = 0;

diff --git a/packages/webgal/src/Core/WebGAL.ts b/packages/webgal/src/Core/WebGAL.ts
@@ -1,3 +1,7 @@
 import { WebgalCore } from '@/Core/webgalCore';
 
 export const WebGAL = new WebgalCore();
+
+// 调试，不调试给去掉
+// @ts-ignore
+// window.WebGAL = WebGAL;
diff --git a/packages/webgal/src/Core/controller/scene/callScene.ts b/packages/webgal/src/Core/controller/scene/callScene.ts
@@ -13,22 +13,32 @@ import { WebGAL } from '@/Core/WebGAL';
  * @param sceneName 场景名称
  */
 export const callScene = (sceneUrl: string, sceneName: string) => {
+  if (WebGAL.sceneManager.lockSceneWrite) {
+    return;
+  }
+  WebGAL.sceneManager.lockSceneWrite = true;
   // 先将本场景压入场景栈
   WebGAL.sceneManager.sceneData.sceneStack.push({
     sceneName: WebGAL.sceneManager.sceneData.currentScene.sceneName,
     sceneUrl: WebGAL.sceneManager.sceneData.currentScene.sceneUrl,
     continueLine: WebGAL.sceneManager.sceneData.currentSentenceId,
   });
   // 场景写入到运行时
-  sceneFetcher(sceneUrl).then((rawScene) => {
-    WebGAL.sceneManager.sceneData.currentScene = sceneParser(rawScene, sceneName, sceneUrl);
-    WebGAL.sceneManager.sceneData.currentSentenceId = 0;
-    // 开始场景的预加载
-    const subSceneList = WebGAL.sceneManager.sceneData.currentScene.subSceneList;
-    WebGAL.sceneManager.settledScenes.push(sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
-    const subSceneListUniq = uniqWith(subSceneList); // 去重
-    scenePrefetcher(subSceneListUniq);
-    logger.debug('现在调用场景，调用结果：', WebGAL.sceneManager.sceneData);
-    nextSentence();
-  });
+  sceneFetcher(sceneUrl)
+    .then((rawScene) => {
+      WebGAL.sceneManager.sceneData.currentScene = sceneParser(rawScene, sceneName, sceneUrl);
+      WebGAL.sceneManager.sceneData.currentSentenceId = 0;
+      // 开始场景的预加载
+      const subSceneList = WebGAL.sceneManager.sceneData.currentScene.subSceneList;
+      WebGAL.sceneManager.settledScenes.push(sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
+      const subSceneListUniq = uniqWith(subSceneList); // 去重
+      scenePrefetcher(subSceneListUniq);
+      logger.debug('现在调用场景，调用结果：', WebGAL.sceneManager.sceneData);
+      WebGAL.sceneManager.lockSceneWrite = false;
+      nextSentence();
+    })
+    .catch((e) => {
+      logger.error('场景调用错误', e);
+      WebGAL.sceneManager.lockSceneWrite = false;
+    });
 };
diff --git a/packages/webgal/src/Core/controller/scene/changeScene.ts b/packages/webgal/src/Core/controller/scene/changeScene.ts
@@ -13,16 +13,26 @@ import { WebGAL } from '@/Core/WebGAL';
  * @param sceneName 场景名称
  */
 export const changeScene = (sceneUrl: string, sceneName: string) => {
+  if (WebGAL.sceneManager.lockSceneWrite) {
+    return;
+  }
+  WebGAL.sceneManager.lockSceneWrite = true;
   // 场景写入到运行时
-  sceneFetcher(sceneUrl).then((rawScene) => {
-    WebGAL.sceneManager.sceneData.currentScene = sceneParser(rawScene, sceneName, sceneUrl);
-    WebGAL.sceneManager.sceneData.currentSentenceId = 0;
-    // 开始场景的预加载
-    const subSceneList = WebGAL.sceneManager.sceneData.currentScene.subSceneList;
-    WebGAL.sceneManager.settledScenes.push(sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
-    const subSceneListUniq = uniqWith(subSceneList); // 去重
-    scenePrefetcher(subSceneListUniq);
-    logger.debug('现在切换场景，切换后的结果：', WebGAL.sceneManager.sceneData);
-    nextSentence();
-  });
+  sceneFetcher(sceneUrl)
+    .then((rawScene) => {
+      WebGAL.sceneManager.sceneData.currentScene = sceneParser(rawScene, sceneName, sceneUrl);
+      WebGAL.sceneManager.sceneData.currentSentenceId = 0;
+      // 开始场景的预加载
+      const subSceneList = WebGAL.sceneManager.sceneData.currentScene.subSceneList;
+      WebGAL.sceneManager.settledScenes.push(sceneUrl); // 放入已加载场景列表，避免递归加载相同场景
+      const subSceneListUniq = uniqWith(subSceneList); // 去重
+      scenePrefetcher(subSceneListUniq);
+      logger.debug('现在切换场景，切换后的结果：', WebGAL.sceneManager.sceneData);
+      WebGAL.sceneManager.lockSceneWrite = false;
+      nextSentence();
+    })
+    .catch((e) => {
+      logger.error('场景调用错误', e);
+      WebGAL.sceneManager.lockSceneWrite = false;
+    });
 };
diff --git a/packages/webgal/src/Core/controller/scene/sceneFetcher.ts b/packages/webgal/src/Core/controller/scene/sceneFetcher.ts
@@ -5,10 +5,15 @@ import axios from 'axios';
  * @param sceneUrl 场景文件路径
  */
 export const sceneFetcher = (sceneUrl: string) => {
-  return new Promise<string>((resolve) => {
-    axios.get(sceneUrl).then((response) => {
-      const rawScene: string = response.data.toString();
-      resolve(rawScene);
-    });
+  return new Promise<string>((resolve, reject) => {
+    axios
+      .get(sceneUrl)
+      .then((response) => {
+        const rawScene: string = response.data.toString();
+        resolve(rawScene);
+      })
+      .catch((e) => {
+        reject(e);
+      });
   });
 };
diff --git a/packages/webgal/src/Core/gameScripts/choose/choose.module.scss b/packages/webgal/src/Core/gameScripts/choose/choose.module.scss
@@ -24,6 +24,12 @@
   background: rgba(255, 255, 255, 0.65);
   margin: 0.25em 0 0.25em 0;
   transition: background-color 0.5s, border 0.5s, font-weight 0.5s, box-shadow 0.5s;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
+    border: 3px solid #8E354A;
+  }
 }
 
 .Choose_item_disabled {
@@ -42,9 +48,7 @@
   transition: background-color 0.5s, border 0.5s, font-weight 0.5s, box-shadow 0.5s;
 }
 
-.Choose_item:hover {
-  //font-weight: bold;
-  background: rgba(255, 255, 255, 0.9);
-  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35);
-  border: 3px solid #8E354A;
+.Choose_item_outer {
+  color: #000;
+  min-width: 50%;
 }
diff --git a/packages/webgal/src/Core/gameScripts/choose/index.tsx b/packages/webgal/src/Core/gameScripts/choose/index.tsx
@@ -11,6 +11,8 @@ import { PerformController } from '@/Core/Modules/perform/performController';
 import { useSEByWebgalStore } from '@/hooks/useSoundEffect';
 import { WebGAL } from '@/Core/WebGAL';
 import { whenChecker } from '@/Core/controller/gamePlay/scriptExecutor';
+import useApplyStyle from '@/hooks/useApplyStyle';
+import { Provider } from 'react-redux';
 
 class ChooseOption {
   /**
@@ -56,16 +58,42 @@ class ChooseOption {
 export const choose = (sentence: ISentence): IPerform => {
   const chooseOptionScripts = sentence.content.split('|');
   const chooseOptions = chooseOptionScripts.map((e) => ChooseOption.parse(e));
+
+  // eslint-disable-next-line react/no-deprecated
+  ReactDOM.render(
+    <Provider store={webgalStore}>
+      <Choose chooseOptions={chooseOptions} />
+    </Provider>,
+    document.getElementById('chooseContainer'),
+  );
+  return {
+    performName: 'choose',
+    duration: 1000 * 60 * 60 * 24,
+    isHoldOn: false,
+    stopFunction: () => {
+      // eslint-disable-next-line react/no-deprecated
+      ReactDOM.render(<div />, document.getElementById('chooseContainer'));
+    },
+    blockingNext: () => true,
+    blockingAuto: () => true,
+    stopTimeout: undefined, // 暂时不用，后面会交给自动清除
+  };
+};
+
+function Choose(props: { chooseOptions: ChooseOption[] }) {
   const fontFamily = webgalStore.getState().userData.optionData.textboxFont;
   const font = fontFamily === textFont.song ? '"思源宋体", serif' : '"WebgalUI", serif';
   const { playSeEnter, playSeClick } = useSEByWebgalStore();
+  const applyStyle = useApplyStyle('Stage/Choose/choose.scss');
   // 运行时计算JSX.Element[]
   const runtimeBuildList = (chooseListFull: ChooseOption[]) => {
     return chooseListFull
       .filter((e, i) => whenChecker(e.showCondition))
       .map((e, i) => {
         const enable = whenChecker(e.enableCondition);
-        const className = enable ? styles.Choose_item : styles.Choose_item_disabled;
+        const className = enable
+          ? applyStyle('Choose_item', styles.Choose_item)
+          : applyStyle('Choose_item_disabled', styles.Choose_item_disabled);
         const onClick = enable
           ? () => {
               playSeClick();
@@ -78,33 +106,14 @@ export const choose = (sentence: ISentence): IPerform => {
             }
           : () => {};
         return (
-          <div
-            className={className}
-            style={{ fontFamily: font }}
-            key={e.jump + i}
-            onClick={onClick}
-            onMouseEnter={playSeEnter}
-          >
-            {e.text}
+          <div className={applyStyle('Choose_item_outer', styles.Choose_item_outer)} key={e.jump + i}>
+            <div className={className} style={{ fontFamily: font }} onClick={onClick} onMouseEnter={playSeEnter}>
+              {e.text}
+            </div>
           </div>
         );
       });
   };
-  // eslint-disable-next-line react/no-deprecated
-  ReactDOM.render(
-    <div className={styles.Choose_Main}>{runtimeBuildList(chooseOptions)}</div>,
-    document.getElementById('chooseContainer'),
-  );
-  return {
-    performName: 'choose',
-    duration: 1000 * 60 * 60 * 24,
-    isHoldOn: false,
-    stopFunction: () => {
-      // eslint-disable-next-line react/no-deprecated
-      ReactDOM.render(<div />, document.getElementById('chooseContainer'));
-    },
-    blockingNext: () => true,
-    blockingAuto: () => true,
-    stopTimeout: undefined, // 暂时不用，后面会交给自动清除
-  };
-};
+
+  return <div className={applyStyle('Choose_Main', styles.Choose_Main)}>{runtimeBuildList(props.chooseOptions)}</div>;
+}
diff --git a/packages/webgal/src/Core/gameScripts/pixi/performs/cherryBlossoms.ts b/packages/webgal/src/Core/gameScripts/pixi/performs/cherryBlossoms.ts
@@ -76,7 +76,7 @@ const pixicherryBlossoms = (cherryBlossomsSpeed: number) => {
     // 同じ画面上の桜の数を制御します
     // 控制同屏花数
     if (bunnyList.length >= 200) {
-      bunnyList.unshift();
+      bunnyList.shift()?.destroy();
       container.removeChild(container.children[0]);
     }
   }

diff --git a/packages/webgal/src/Core/gameScripts/pixi/performs/rain.ts b/packages/webgal/src/Core/gameScripts/pixi/performs/rain.ts
@@ -24,7 +24,7 @@ const pixiRain = (rainSpeed: number, number: number) => {
   container.scale.x = 1;
   container.scale.y = 1;
   // container.rotation = -0.2;
-  const bunnyList: any = [];
+  const bunnyList: PIXI.Sprite[] = [];
   // 监听动画更新
   function ticker(delta: number) {
     // 获取长宽，用于控制雪花出现位置
@@ -59,17 +59,20 @@ const pixiRain = (rainSpeed: number, number: number) => {
       container.addChild(bunny);
       // 控制每片雨点
       bunnyList.push(bunny);
+
+      // 控制同屏雨点数
+      if (bunnyList.length >= 2500) {
+        bunnyList.shift()?.destroy();
+        container.removeChild(container.children[0]);
+      }
     }
     // 雨点落下
     for (const e of bunnyList) {
+      // @ts-ignore
       e['dropSpeed'] = e['acc'] * 0.01 + e['dropSpeed'];
+      // @ts-ignore
       e.y += delta * rainSpeed * e['dropSpeed'] * 1.1 + 3;
     }
-    // 控制同屏雨点数
-    if (bunnyList.length >= 2500) {
-      bunnyList.unshift();
-      container.removeChild(container.children[0]);
-    }
   }
   WebGAL.gameplay.pixiStage?.registerAnimation(
     { setStartState: () => {}, setEndState: () => {}, tickerFunc: ticker },

diff --git a/packages/webgal/src/Core/gameScripts/pixi/performs/snow.ts b/packages/webgal/src/Core/gameScripts/pixi/performs/snow.ts
@@ -68,7 +68,7 @@ const pixiSnow = (snowSpeed: number) => {
     }
     // 控制同屏雪花数
     if (bunnyList.length >= 500) {
-      bunnyList.unshift();
+      bunnyList.shift()?.destroy();
       container.removeChild(container.children[0]);
     }
   }