Merge pull request #506 from OpenWebGAL/dev

4.5.2

Author: MakinoharaShoko

packages/parser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webgal-parser",
-  "version": "4.4.15",
+  "version": "4.5.2",
   "description": "WebGAL script parser",
   "scripts": {
     "test": "vitest",

packages/parser/src/scriptParser/scriptParser.ts

@@ -35,8 +35,9 @@ export const scriptParser = (
 
   // 正式开始解析
 
-  // 去分号，前面已做，这里不再需要
-  let newSentenceRaw = sentenceRaw.split(';')[0];
+  // 去分号
+  let newSentenceRaw = sentenceRaw.split(/(?<!\\);/)[0];
+  newSentenceRaw = newSentenceRaw.replaceAll('\\;',';');
   if (newSentenceRaw === '') {
     // 注释提前返回
     return {
@@ -56,7 +57,11 @@ export const scriptParser = (
   // 没有command，说明这是一条连续对话或单条语句
   if (getCommandResult === null) {
     commandRaw = newSentenceRaw;
-    parsedCommand = commandParser(commandRaw, ADD_NEXT_ARG_LIST, SCRIPT_CONFIG_MAP);
+    parsedCommand = commandParser(
+      commandRaw,
+      ADD_NEXT_ARG_LIST,
+      SCRIPT_CONFIG_MAP,
+    );
     command = parsedCommand.type;
     for (const e of parsedCommand.additionalArgs) {
       // 由于是连续对话，所以我们去除 speaker 参数。
@@ -72,7 +77,11 @@ export const scriptParser = (
       getCommandResult.index + 1,
       newSentenceRaw.length,
     );
-    parsedCommand = commandParser(commandRaw, ADD_NEXT_ARG_LIST, SCRIPT_CONFIG_MAP);
+    parsedCommand = commandParser(
+      commandRaw,
+      ADD_NEXT_ARG_LIST,
+      SCRIPT_CONFIG_MAP,
+    );
     command = parsedCommand.type;
     for (const e of parsedCommand.additionalArgs) {
       args.push(e);
@@ -91,12 +100,12 @@ export const scriptParser = (
       args.push(e);
     }
   }
-  content = contentParser(newSentenceRaw, command, assetSetter); // 将语句内容里的文件名转为相对或绝对路径
+  content = contentParser(newSentenceRaw.trim(), command, assetSetter); // 将语句内容里的文件名转为相对或绝对路径
   sentenceAssets = assetsScanner(command, content, args); // 扫描语句携带资源
   subScene = subSceneScanner(command, content); // 扫描语句携带子场景
   return {
     command: command, // 语句类型
-    commandRaw: commandRaw, // 命令原始内容，方便调试
+    commandRaw: commandRaw.trim(), // 命令原始内容，方便调试
     content: content, // 语句内容
     args: args, // 参数列表
     sentenceAssets: sentenceAssets, // 语句携带的资源列表

packages/parser/test/test-resources/var.txt

@@ -1,2 +1,11 @@
 setVar:a=1;
 WebGAL:a=1? -when=a==1;
+
+;正常解析
+WebGAL:test;
+
+; : 异常测试
+WebGAL   :   test;
+
+分号后应该被截断;看不到我！
+转义分号后应该不截断\;能看到我！

packages/webgal/package.json

@@ -1,7 +1,7 @@
 {
   "name": "webgal",
   "private": true,
-  "version": "4.5.1",
+  "version": "4.5.2",
   "scripts": {
     "dev": "vite --host --port 3000",
     "build": "cross-env NODE_ENV=production tsc && vite build --base=./",
@@ -31,8 +31,7 @@
     "react-redux": "^8.0.1",
     "sass": "^1.49.9",
     "uuid": "^9.0.0",
-    "vite-plugin-package-version": "^1.0.2",
-    "webgal-parser": "latest"
+    "vite-plugin-package-version": "^1.0.2"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.180",

packages/webgal/public/game/template/Stage/TextBox/textbox.scss

@@ -19,6 +19,10 @@
   transition: left 0.33s;
 }
 
+.TextBox_main_miniavatarOff {
+  left: 25px;
+}
+
 .TextBox_Background {
   z-index: 2;
   background: linear-gradient(rgba(245, 247, 250, 1) 0%, rgba(189, 198, 222, 1) 100%);

packages/webgal/public/game/template/template.json

@@ -1,4 +1,4 @@
 {
   "name":"Default Template",
-  "webgal-version":"4.5.1"
+  "webgal-version":"4.5.2"
 }

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

@@ -63,7 +63,7 @@ export const nextSentence = () => {
   }
 
   // 不处于 allSettled 状态，清除所有普通演出，强制进入settled。
-  logger.warn('提前结束被触发，现在清除普通演出');
+  logger.debug('提前结束被触发，现在清除普通演出');
   let isGoNext = false;
   for (let i = 0; i < WebGAL.gameplay.performController.performList.length; i++) {
     const e = WebGAL.gameplay.performController.performList[i];

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

@@ -1,6 +1,10 @@
 import { compile } from 'angular-expressions';
 
 export function strIf(s: string) {
-  const res = compile(s);
-  return res();
+  try {
+    const res = compile(s);
+    return res();
+  } catch {
+    return false;
+  }
 }

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

@@ -284,36 +284,11 @@ export default class PixiStage {
     // Load mouth texture (reuse if already loaded)
     this.loadAsset(mouthTextureUrls[mouthState], () => {
       const texture = this.assetLoader.resources[mouthTextureUrls[mouthState]].texture;
-      if (!texture) {
+      const sprite = currentFigure?.children?.[0] as PIXI.Sprite;
+      if (!texture || !sprite) {
         return;
       }
-      const originalWidth = texture.width;
-      const originalHeight = texture.height;
-      const scaleX = this.stageWidth / originalWidth;
-      const scaleY = this.stageHeight / originalHeight;
-      const targetScale = Math.min(scaleX, scaleY);
-      const figureSprite = new PIXI.Sprite(texture);
-      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;
-      currentFigure.setBaseY(this.stageHeight / 2);
-      if (targetHeight < this.stageHeight) {
-        currentFigure.setBaseY(this.stageHeight / 2 + this.stageHeight - targetHeight / 2);
-      }
-      if (presetPosition === 'center') {
-        currentFigure.setBaseX(this.stageWidth / 2);
-      }
-      if (presetPosition === 'left') {
-        currentFigure.setBaseX(targetWidth / 2);
-      }
-      if (presetPosition === 'right') {
-        currentFigure.setBaseX(this.stageWidth - targetWidth / 2);
-      }
-      currentFigure.pivot.set(0, this.stageHeight / 2);
-      currentFigure.addChild(figureSprite);
+      sprite.texture = texture;
     });
   }
 
@@ -337,38 +312,11 @@ export default class PixiStage {
     // Load eye texture (reuse if already loaded)
     this.loadAsset(blinkTextureUrls[blinkState], () => {
       const texture = this.assetLoader.resources[blinkTextureUrls[blinkState]].texture;
-
-      if (!texture) {
+      const sprite = currentFigure?.children?.[0] as PIXI.Sprite;
+      if (!texture || !sprite) {
         return;
       }
-
-      const originalWidth = texture.width;
-      const originalHeight = texture.height;
-      const scaleX = this.stageWidth / originalWidth;
-      const scaleY = this.stageHeight / originalHeight;
-      const targetScale = Math.min(scaleX, scaleY);
-      const figureSprite = new PIXI.Sprite(texture);
-      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;
-      currentFigure.setBaseY(this.stageHeight / 2);
-      if (targetHeight < this.stageHeight) {
-        currentFigure.setBaseY(this.stageHeight / 2 + this.stageHeight - targetHeight / 2);
-      }
-      if (presetPosition === 'center') {
-        currentFigure.setBaseX(this.stageWidth / 2);
-      }
-      if (presetPosition === 'left') {
-        currentFigure.setBaseX(targetWidth / 2);
-      }
-      if (presetPosition === 'right') {
-        currentFigure.setBaseX(this.stageWidth - targetWidth / 2);
-      }
-      currentFigure.pivot.set(0, this.stageHeight / 2);
-      currentFigure.addChild(figureSprite);
+      sprite.texture = texture;
     });
   }
 
@@ -447,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 立绘的标识，一般和立绘位置有关
@@ -566,7 +592,6 @@ export default class PixiStage {
 
     // 完成图片加载后执行的函数
     const setup = () => {
-      console.log(this.assetLoader.resources);
       const spineResource: any = this.assetLoader.resources?.[spineId];
       // TODO：找一个更好的解法，现在的解法是无论是否复用原来的资源，都设置一个延时以让动画工作正常！
       setTimeout(() => {
@@ -576,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();

packages/webgal/src/Core/controller/stage/playBgm.ts

@@ -26,7 +26,7 @@ let emptyBgmTimeout: ReturnType<typeof setTimeout>;
  * @param volume 背景音乐 音量调整（0 - 100）
  */
 export function playBgm(url: string, enter = 0, volume = 100): void {
-  logger.info('playing bgm' + url);
+  logger.debug('playing bgm' + url);
   if (url === '') {
     emptyBgmTimeout = setTimeout(() => {
       // 淡入淡出效果结束后，将 bgm 置空