Merge branch 'dev'

packages/parser/package.json

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

packages/parser/src/index.ts

@@ -13,7 +13,7 @@ export default class SceneParser {
 
   constructor(assetsPrefetcher: ((assetList: Array<IAsset>) => void),
               assetSetter: (fileName: string, assetType: fileType) => string,
-              ADD_NEXT_ARG_LIST: Array<commandType>, SCRIPT_CONFIG: Array<any>) {
+              ADD_NEXT_ARG_LIST: Array<number>, SCRIPT_CONFIG: Array<any>) {
     this.assetsPrefetcher = assetsPrefetcher;
     this.assetSetter = assetSetter;
     this.ADD_NEXT_ARG_LIST = ADD_NEXT_ARG_LIST;

packages/parser/src/interface/sceneInterface.ts

@@ -1,8 +1,8 @@
 /**
  * 语句类型
  */
-import { sceneEntry } from "./runtimeInterface";
-import { fileType } from "./assets";
+import {sceneEntry} from "./runtimeInterface";
+import {fileType} from "./assets";
 
 export enum commandType {
   say, // 对话
@@ -33,7 +33,9 @@ export enum commandType {
   setAnimation,
   playEffect,
   setTempAnimation,
-  comment
+  comment,
+  setTransform,
+  setTransition,
 }
 
 /**

packages/webgal/package.json

@@ -30,7 +30,7 @@
     "uuid": "^9.0.0",
     "vite-plugin-package-version": "^1.0.2",
     "pixi-live2d-display": "^0.4.0",
-    "webgal-parser": "4.4.2-1"
+    "webgal-parser": "4.4.3"
   },
   "devDependencies": {
     "@types/lodash": "^4.14.180",

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

@@ -0,0 +1,64 @@
+bgm:ontama_piano1_youkoso.mp3 -volume=80 -enter=3000;
+unlockBgm:ontama_piano1_youkoso.mp3 -name=ようこそ;
+intro:■初めに| このデモゲームで使用している画像素材は、AI生成画像です;
+intro:■クレジット| 「VOICEVOX:小夜/SAYO」;
+changeBg:bg.png -next;
+unlockCg:bg.png -name=良い夜; // CGのロックを解いて、名前をつけます。
+changeFigure:stand.png -left -enter=enter-from-left -next;
+miniAvatar:miniavatar.png;
+WebGAL:こんにちは。 -001_小夜SAYO（ノーマル）_こんにちは。.wav;
+WebGALへようこそ！ -002_小夜SAYO（ノーマル）_ウェブギャルへよう….wav;
+WebGALは、かつてないまったく新しいビジュアルノベルエンジンです。 -003_小夜SAYO（ノーマル）_ウェブギャルは、か….wav;
+changeFigure:stand2.png -right -next;
+Web技術を使用して開発されたエンジンであるため、ウェブページで優れたパフォーマンスを発揮します。 -004_小夜SAYO（ノーマル）_Web技術を使用し….wav;
+この機能のおかげで、ウェブサイト上に公開すると、プレイヤーはリンクを押すだけで、 -005_小夜SAYO（ノーマル）_この機能のおかげで….wav;
+いつでも、どこでも、ウェブサイト上でゲームをプレイすることができます！ -006_小夜SAYO（ノーマル）_いつでも、どこでも….wav;
+setAnimation:move-front-and-back -target=fig-left -next;
+とっても、魅力的ではありませんか？ -007_小夜SAYO（ノーマル）_とっても、魅力的で….wav;
+changeFigure:none -right -next;
+setAnimation:l2c -target=fig-left -next;
+さらに、WebGALでは、アニメーションや特殊効果を追加することができ、クオリティの高いゲームを作成することができます。 -008_小夜SAYO（ノーマル）_さらに、ウェブギャ….wav;
+pixiInit;
+pixiPerform:snow;
+例えば、特殊効果として、雪を降らせてみます。 -009_小夜SAYO（ノーマル）_例えば、特殊効果と….wav;
+こんな感じに、WebGALには、魅力的な機能があります。| ぜひ、使ってみて体験してみてください。 -010_小夜SAYO（ノーマル）_こんな感じに、ウェ….wav;
+機能の紹介は以上です。 -011_小夜SAYO（ノーマル）_機能の紹介は以上で….wav;
+次に、WebGALの歴史と豆知識について紹介します。 -012_小夜SAYO（ノーマル）_次に、ウェブギャル….wav;
+興味があれば、引き続きお聞きください。 -013_小夜SAYO（ノーマル）_興味があれば、引き….wav;
+pixiInit;
+choose:WebGAL 歴史:choose1|WebGAL 豆知識:choose2;
+
+;選択１
+label:choose1;
+WebGALは、より多くの人が自分のビジュアルノベルゲームを簡単に作成できるようにと、開発されました。 -014_小夜SAYO（ノーマル）_ウェブギャルは、よ….wav;
+当初のWebGALには、機能がほとんどなく、立ち絵と背景画像の表示、音声再生、選択肢の選択機能のみをサポートしていました。 -015_小夜SAYO（ノーマル）_当初のウェブギャル….wav;
+長きにわたる開発期間を経て、今では多くの優れた機能があるエンジンとして、生まれ変わりました。  -016_小夜SAYO（ノーマル）_長きにわたる開発期….wav;
+さらに、WebGALエディターのリリースにより、ゲームの作成と出力がよりシンプルかつ容易になりました。 -017_小夜SAYO（ノーマル）_さらに、ウェブギャ….wav;
+jumpLabel:end;
+
+;選択２
+label:choose2;
+WebGALプロジェクトは、わずか1年足らずでGitHubで1000スターを獲得しました！ -019_小夜SAYO（ノーマル）_ウェブギャルプロジ….wav;
+WebGALの開発過程は、開発しながら開発を学ぶプロセスです。 -020_小夜SAYO（ノーマル）_ウェブギャルの開発….wav;
+そのため、彼女は3回のリファクタリングを経験し、毎回ほぼゼロからやり直す形となりました。 -021_小夜SAYO（ノーマル）_そのため、彼女は3….wav;
+WebGALのスクリプト言語は、制作の難易度を簡素化するためにゼロから設計されました！ -022_小夜SAYO（ノーマル）_ウェブギャルのスク….wav;
+;
+;l2d
+;label:l2d;
+;changeFigure:hiyori/hiyori_pro_t11.model3.json -left -motion=Idle -next;
+;WebGALプロジェクトでは、現在Live2Dの実験的なサポートも始まっています！これからは正式な機能として成長する可能性もあります！ -023_小夜SAYO（ノーマル）_ウェブギャルプロジ….wav
+;
+;エンド
+label:end;
+;changeFigure:none -left -next;
+;changeFigure:stand.png -next;
+WebGALプロジェクトは、デスクトップ向けのビジュアルノベルゲームエンジンの機能により近づくため、多くのショートカットキーとシーンの戻る機能をサポートしています。 -024_小夜SAYO（ノーマル）_ウェブギャルプロジ….wav;
+メニューの「LOG」ボタンを押すか、マウスホイールを上にスクロールしてみてください！ -025_小夜SAYO（ノーマル）_メニューのログボタ….wav;
+豊富な設定、クイックセーブ、クイックロード、自動モード、スキップモードなどの機能もサポートされています。 -026_小夜SAYO（ノーマル）_豊富な設定、クイッ….wav;
+setTempAnimation:[{"position": {"x": 500,"y": 0},"duration": 0},{"position": {"x": 400,"y": 0},"duration": 250},{"position": {"x": 600,"y": 0},"duration": 500},{"position": {"x": 500,"y": 0},"duration": 250}] -target=fig-left -next;
+初めてゲームを開発する開発者のために、美しい汎用UIと豊富なプリセット機能やアニメーションを提供しています。 -028_小夜SAYO（ノーマル）_初めてゲームを開発….wav
+ですから、心配せずに素早くゲーム制作を始めることができます。 -029_小夜SAYO（ノーマル）_ですから、心配せず….wav;
+WebGALプロジェクトチームは、あなたの作品がWebGALで展示されることを期待しています！ -030_小夜SAYO（ノーマル）_ウェブギャルプロジ….wav
+リンクを1つ用意するだけで、無数のユーザーがあなたの作品をすぐに楽しめるようになります。 -031_小夜SAYO（ノーマル）_リンクを1つ用意す….wav;
+WebGALプロジェクトへのご注目、ありがとうございます！ -032_小夜SAYO（ノーマル）_ウェブギャルプロジ….wav;
+end;

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

@@ -0,0 +1,58 @@
+bgm:s_Title.mp3 -volume=80 -enter=3000;
+unlockBgm:s_Title.mp3 -name=雲を追いかけて;
+intro:你好|欢迎来到 WebGAL 的世界;
+changeBg:bg.png -next;
+unlockCg:bg.png -name=良夜; // 解锁CG并赋予名称
+changeFigure:stand.png -left -enter=enter-from-left -next;
+:你好|欢迎来到 WebGAL 的世界;
+miniAvatar:miniavatar.png;
+WebGAL:欢迎使用 WebGAL！这是一款全新的网页端视觉小说引擎。 -v1.wav;
+changeFigure:stand2.png -right -next;
+WebGAL 是使用 Web 技术开发的引擎，因此在网页端有良好的表现。 -v2.wav;
+由于这个特性，如果你将 WebGAL 部署到服务器或网页托管平台上，玩家只需要一串链接就可以开始游玩！ -v3.wav;
+setAnimation:move-front-and-back -target=fig-left -next;
+听起来是不是非常吸引人？ -v4.wav;
+changeFigure:none -right -next;
+setAnimation:l2c -target=fig-left -next;
+WebGAL 引擎也具有动画系统和特效系统，使用 WebGAL 开发的游戏可以拥有很好的表现效果。 -v5.wav;
+pixiInit;
+pixiPerform:snow;
+比如，这个下起小雪的特效。 -v6.wav;
+除此以外，分支选择的功能也必不可少。 -v7.wav;
+你可以通过以下两个分支了解 WebGAL 的更多故事。 -v8.wav;
+pixiInit;
+choose:WebGAL 发展历程:choose1|WebGAL 冷知识:choose2;
+
+;分支1
+label:choose1;
+WebGAL 的开发初衷是能够让更多人可以更方便地制作属于自己的视觉小说。 -v9.wav;
+在一开始，WebGAL 只具备很少的功能，仅仅能支持立绘和背景的显示、语音播放和分支选择。 -v10.wav;
+在经历一年的发展后，现在已经是支持了很多优秀的表现效果的引擎了！ -v11.wav;
+除此以外，WebGAL 编辑器的加入也使得制作和导出一个游戏更加方便快捷。 -v12.wav;
+jumpLabel:end;
+
+;分支2
+label:choose2;
+这个演示游戏使用的素材是 AI 生成的。 -v13.wav;
+WebGAL 项目只用了一年不到就在 GitHub 获得了 1000 星标！ -v14.wav;
+WebGAL 的开发历程，是一个在开发中学习开发的过程。因此她经历了3次重构，并且每次几乎都是推倒重来式的。 -v15.wav;
+WebGAL 的脚本语言是为了简化制作难度而全新设计的！ -v16.wav;
+;
+;l2d
+;label:l2d;
+;changeFigure:hiyori/hiyori_pro_t11.model3.json -left -motion=Idle -next;
+;WebGAL 项目现在也开始尝试实验性支持 live2D！今后可能会成为一个正式功能！
+;
+;结束分支
+label:end;
+;changeFigure:none -left -next;
+;changeFigure:stand.png -next;
+为了更接近桌面端视觉小说引擎的能力，我们支持很多快捷键以及可跳转的剧情回溯。 -v17.wav;
+按下菜单中的“回想”按钮或者向上滚动鼠标滚轮试试吧！ -v18.wav;
+快速存读挡、丰富的选项、自动播放以及快进等功能，也是应有尽有。 -v19.wav;
+setTempAnimation:[{"position": {"x": 500,"y": 0},"duration": 0},{"position": {"x": 400,"y": 0},"duration": 250},{"position": {"x": 600,"y": 0},"duration": 500},{"position": {"x": 500,"y": 0},"duration": 250}] -target=fig-left -next;
+当然，这不算什么，因为大多数成熟的引擎都有这些功能。但是在 Web 端，这却是很少见的。 -v20.wav;
+我们为可能初次开发游戏的开发者提供了美观的通用 UI 和丰富的预设功能与动画。所以你可以没有顾虑地快速开始制作游戏。 -v21.wav;
+WebGAL 项目组期待你的作品能够在 WebGAL 上呈现！只需要一个链接就可以让万千用户立刻开始享受你的作品。 -v22.wav;
+感谢你关注 WebGAL 项目！ -v23.wav;
+end;

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

@@ -1,58 +1,2 @@
 ; WebGAL 引擎会默认读取 start.txt 作为初始场景，因此请不要删除，并在初始场景内跳转到其他场景
-bgm:s_Title.mp3;
-unlockBgm:s_Title.mp3 -name=雲を追いかけて;
-intro:你好|欢迎来到 WebGAL 的世界;
-changeBg:bg.png -next;
-unlockCg:bg.png -name=良夜; // 解锁CG并赋予名称
-changeFigure:stand.png -left -enter=enter-from-left -next;
-miniAvatar:miniavatar.png;
-WebGAL:欢迎使用 WebGAL！这是一款全新的网页端视觉小说引擎。 -v1.wav;
-changeFigure:stand2.png -right -next;
-WebGAL 是使用 Web 技术开发的引擎，因此在网页端有良好的表现。 -v2.wav;
-由于这个特性，如果你将 WebGAL 部署到服务器或网页托管平台上，玩家只需要一串链接就可以开始游玩！ -v3.wav;
-setAnimation:move-front-and-back -target=fig-left -next;
-听起来是不是非常吸引人？ -v4.wav;
-changeFigure:none -right -next;
-setAnimation:l2c -target=fig-left -next;
-WebGAL 引擎也具有动画系统和特效系统，使用 WebGAL 开发的游戏可以拥有很好的表现效果。 -v5.wav;
-pixiInit;
-pixiPerform:snow;
-比如，这个下起小雪的特效。 -v6.wav;
-除此以外，分支选择的功能也必不可少。 -v7.wav;
-你可以通过以下两个分支了解 WebGAL 的更多故事。 -v8.wav;
-pixiInit;
-choose:WebGAL 发展历程:choose1|WebGAL 冷知识:choose2;
-
-;分支1
-label:choose1;
-WebGAL 的开发初衷是能够让更多人可以更方便地制作属于自己的视觉小说。 -v9.wav;
-在一开始，WebGAL 只具备很少的功能，仅仅能支持立绘和背景的显示、语音播放和分支选择。 -v10.wav;
-在经历一年的发展后，现在已经是支持了很多优秀的表现效果的引擎了！ -v11.wav;
-除此以外，WebGAL 编辑器的加入也使得制作和导出一个游戏更加方便快捷。 -v12.wav;
-jumpLabel:end;
-
-;分支2
-label:choose2;
-这个演示游戏使用的素材是 AI 生成的。 -v13.wav;
-WebGAL 项目只用了一年不到就在 GitHub 获得了 1000 星标！ -v14.wav;
-WebGAL 的开发历程，是一个在开发中学习开发的过程。因此她经历了3次重构，并且每次几乎都是推倒重来式的。 -v15.wav;
-WebGAL 的脚本语言是为了简化制作难度而全新设计的！ -v16.wav;
-;
-;l2d
-;label:l2d;
-;changeFigure:hiyori/hiyori_pro_t11.model3.json -left -motion=Idle -next;
-;WebGAL 项目现在也开始尝试实验性支持 live2D！今后可能会成为一个正式功能！
-;
-;结束分支
-label:end;
-;changeFigure:none -left -next;
-;changeFigure:stand.png -next;
-为了更接近桌面端视觉小说引擎的能力，我们支持很多快捷键以及可跳转的剧情回溯。 -v17.wav;
-按下菜单中的“回想”按钮或者向上滚动鼠标滚轮试试吧！ -v18.wav;
-快速存读挡、丰富的选项、自动播放以及快进等功能，也是应有尽有。 -v19.wav;
-setTempAnimation:[{"position": {"x": 500,"y": 0},"duration": 0},{"position": {"x": 400,"y": 0},"duration": 250},{"position": {"x": 600,"y": 0},"duration": 500},{"position": {"x": 500,"y": 0},"duration": 250}] -target=fig-left -next;
-当然，这不算什么，因为大多数成熟的引擎都有这些功能。但是在 Web 端，这却是很少见的。 -v20.wav;
-我们为可能初次开发游戏的开发者提供了美观的通用 UI 和丰富的预设功能与动画。所以你可以没有顾虑地快速开始制作游戏。 -v21.wav;
-WebGAL 项目组期待你的作品能够在 WebGAL 上呈现！只需要一个链接就可以让万千用户立刻开始享受你的作品。 -v22.wav;
-感谢你关注 WebGAL 项目！ -v23.wav;
-end;
+choose:简体中文:demo_zh_cn.txt|日本語:demo_ja.txt;

packages/webgal/src/Components/Stage/AudioContainer/AudioContainer.tsx

@@ -9,20 +9,64 @@ export const AudioContainer = () => {
   const isShowTitle = useSelector((webgalStore: RootState) => webgalStore.GUI.showTitle);
   const userDataState = useSelector((state: RootState) => state.userData);
   const mainVol = userDataState.optionData.volumeMain;
-  const vocalVol = mainVol * 0.01 * userDataState.optionData.vocalVolume * 0.01;
-  const bgmVol = mainVol * 0.01 * userDataState.optionData.bgmVolume * 0.01;
+  const vocalVol = mainVol * 0.01 * userDataState.optionData.vocalVolume * 0.01 * stageStore.vocalVolume * 0.01;
+  const bgmVol = mainVol * 0.01 * userDataState.optionData.bgmVolume * 0.01 * stageStore.bgmVolume * 0.01;
+  const bgmEnter = stageStore.bgmEnter;
   const isEnterGame = useSelector((state: RootState) => state.GUI.isEnterGame);
+
+  /**
+   * 淡入BGM
+   * @param bgm 背景音乐
+   * @param maxVol 最大音量
+   * @param time 淡入时间
+   */
+  const bgmFadeIn = (bgm: HTMLAudioElement, maxVol: number, time: number) => {
+    // 设置音量为0（静音）
+    time >= 0 ? (bgm.volume = 0) : (bgm.volume = maxVol);
+    // 设置音量递增时间间隔
+    const duration = 10;
+    // 计算每duration的音量增加值（淡入效果）
+    const volumeStep = (maxVol / time) * duration;
+    // 每隔duration毫秒递增音量
+    const fadeInInterval = setInterval(() => {
+      if (bgm.volume + volumeStep >= maxVol) {
+        // 如果音量接近或达到最大值，则设置最终音量
+        bgm.volume = maxVol;
+        clearInterval(fadeInInterval);
+      } else if (bgm.volume + volumeStep <= 0) {
+        // 如果音量接近或达到最小值，则设置最终音量
+        bgm.volume = 0;
+        clearInterval(fadeInInterval);
+      } else {
+        // 否则增加音量
+        bgm.volume += volumeStep;
+      }
+    }, duration);
+  };
+
   useEffect(() => {
-    logger.debug(`设置背景音量：${bgmVol},语音音量：${vocalVol}`);
-    const bgmElement: any = document.getElementById('currentBgm');
+    const bgmElement = document.getElementById('currentBgm') as HTMLAudioElement;
     if (bgmElement) {
-      bgmElement.volume = bgmVol.toString();
+      bgmEnter === 0 ? (bgmElement.volume = bgmVol) : bgmFadeIn(bgmElement, bgmVol, bgmEnter);
     }
+  }, [isShowTitle, titleBgm, stageStore.bgm, bgmVol, bgmEnter]);
+
+  useEffect(() => {
+    logger.debug(`设置背景音量：${bgmVol}`);
+  }, [bgmVol]);
+
+  useEffect(() => {
+    logger.debug(`设置背景音量淡入时间: ${bgmEnter}`);
+  }, [bgmEnter]);
+
+  useEffect(() => {
+    logger.debug(`设置语音音量：${vocalVol}`);
     const vocalElement: any = document.getElementById('currentVocal');
     if (vocalElement) {
       vocalElement.volume = vocalVol.toString();
     }
-  }, [isShowTitle, titleBgm, stageStore.bgm, vocalVol, bgmVol]);
+  }, [vocalVol]);
+
   return (
     <div>
       <audio

packages/webgal/src/Components/Stage/TextBox/TextBox.tsx

@@ -14,14 +14,18 @@ export const TextBox = () => {
   useEffect(() => {});
   const textDelay = useTextDelay(userDataState.optionData.textSpeed);
   const textDuration = useTextAnimationDuration(userDataState.optionData.textSpeed);
-  const size = getTextSize(userDataState.optionData.textSize) + '%';
+  let size = getTextSize(userDataState.optionData.textSize) + '%';
   const font = useFontFamily();
-
   const isText = stageState.showText !== '' || stageState.showName !== '';
-
+  if (isText && stageState.showTextSize !== -1) {
+    size = getTextSize(stageState.showTextSize) + '%';
+  }
   // 拆字
   const textArray: Array<string> = splitChars(stageState.showText);
   const textElementList = textArray.map((e, index) => {
+    if (e === '<br />') {
+      return <br key={`br${index}`} />;
+    }
     let delay = index * textDelay;
     let prevLength = stageState.currentConcatDialogPrev.length;
     if (stageState.currentConcatDialogPrev !== '' && index >= prevLength) {
@@ -63,7 +67,11 @@ export const TextBox = () => {
   return (
     <>
       {isText && (
-        <div id="textBoxMain" className={styles.TextBox_main} style={{ fontFamily: font }}>
+        <div
+          id="textBoxMain"
+          className={styles.TextBox_main}
+          style={{ fontFamily: font, left: stageState.miniAvatar === '' ? 25 : undefined }}
+        >
           {/* <div className={styles.nameContainer}>{stageState.showName !== ''}</div> */}
           <div id="miniAvatar" className={styles.miniAvatarContainer}>
             {stageState.miniAvatar !== '' && (
@@ -120,6 +128,15 @@ export function splitChars(sentence: string) {
   };
 
   for (const character of sentence) {
+    if (character === '|') {
+      if (word) {
+        words.push(word);
+        word = '';
+      }
+      words.push('<br />');
+      cjkFlag = false;
+      continue;
+    }
     if (character === ' ') {
       // Space
       if (word) {