feat: use json for game config

refactor: change enableAppreciation to enableExtra

refactor: change game logo type to string

feat: support textbox max line and line height

Author: Hardy--Lee

packages/webgal/public/game/config.json

@@ -0,0 +1,8 @@
+{
+  "gameName": "新的 WebGAL 游戏",
+  "gameKey": "7fe160a6",
+  "gameLogo": "WebGalEnter.webp",
+  "titleImage": "WebGAL_New_Enter_Image.webp",
+  "titleBgm": "s_Title.mp3",
+  "enableExtra": true
+}

packages/webgal/public/game/config.txt

@@ -46,7 +46,7 @@ export const initializeScript = (): void => {
   // 获得 user Animation
   getUserAnimation();
   // 获取游戏信息
-  infoFetcher('./game/config.txt');
+  infoFetcher('./game/config.json');
   // 获取start场景
   const sceneUrl: string = assetSetter('start.txt', fileType.scene);
   // 场景写入到运行时

packages/webgal/src/Core/initializeScript.ts

@@ -2,71 +2,74 @@ import { webgalStore } from '@/store/store';
 import { setGlobalVar } from '@/store/userDataReducer';
 import { setEnableAppreciationMode } from '@/store/GUIReducer';
 import { Live2D, WebGAL } from '@/Core/WebGAL';
-import { WebgalParser } from '@/Core/parser/sceneParser';
 import { getStorageAsync, setStorage } from '@/Core/controller/storage/storageController';
 import { initKey } from '@/Core/controller/storage/fastSaveLoad';
 import { getFastSaveFromStorage, getSavesFromStorage } from '@/Core/controller/storage/savesController';
 import { logger } from '@/Core/util/logger';
 import axios from 'axios';
 
+interface IWebgalConfig {
+  gameName?: string; // 游戏名称
+  gameKey?: string; // 游戏Key
+  gameLogo?: string; // 游戏Logo
+  titleImage?: string; // 标题图片
+  titleBgm?: string; // 标题背景音乐
+  description?: string; // 游戏描述
+  defaultLanguage?: string; // 默认语言
+  packageName?: string; // 包名
+  steamAppId?: string; // Steam 应用 ID
+  enableExtra?: boolean; // 启用鉴赏功能
+  enablePanic?: boolean; // 启用紧急回避
+  enableLegacyExpressionBlendMode?: boolean; // 启用旧版 Live2D 表情混合模式
+  textboxMaxLine?: number; // 文字框最大行数
+  textboxLineHeight?: number; // 文字框行高
+}
+
 /**
  * 获取游戏信息
  * @param url 游戏信息路径
  */
-export const infoFetcher = (url: string) => {
+export const infoFetcher = async (url: string) => {
   const dispatch = webgalStore.dispatch;
-  axios.get(url).then(async (r) => {
-    let gameConfigRaw: string = r.data;
-    let gameConfig = WebgalParser.parseConfig(gameConfigRaw);
-    logger.info('获取到游戏信息', gameConfig);
-    // 先把 key 找到并设置了
-    const keyItem = gameConfig.find((e) => e.command === 'Game_key');
-    WebGAL.gameKey = (keyItem?.args?.[0] as string) ?? '';
-    initKey();
-    await getStorageAsync();
-    getFastSaveFromStorage();
-    getSavesFromStorage(0, 0);
-    // 按照游戏的配置开始设置对应的状态
-    gameConfig.forEach((e) => {
-      const { command, args } = e;
-      if (args.length > 0) {
-        if (args.length > 1) {
-          dispatch(
-            setGlobalVar({
-              key: command,
-              value: args.join('|'),
-            }),
-          );
-        } else {
-          let res: any = args[0].trim();
-          if (/^(true|false)$/g.test(args[0])) {
-            res = res === 'true';
-          } else if (/^[0-9]+\.?[0-9]+$/g.test(args[0])) {
-            res = Number(res);
-          }
-
-          dispatch(
-            setGlobalVar({
-              key: command,
-              value: res,
-            }),
-          );
-
-          if (command === 'Enable_Appreciation') {
-            dispatch(setEnableAppreciationMode(res));
-          }
-          if (command === 'Legacy_Expression_Blend_Mode') {
-            Live2D.legacyExpressionBlendMode = res === true;
-          }
-          if (command === 'Steam_AppID') {
-            const appId = String(res);
-            WebGAL.steam.initialize(appId);
-          }
-        }
-      }
-    });
-    // @ts-expect-error renderPromiseResolve is a global variable
-    window.renderPromiseResolve();
-    setStorage();
-  });
+  const resp = await axios.get(url);
+  const gameConfig: IWebgalConfig = resp.data;
+  logger.info('获取到游戏信息', gameConfig);
+  // 先把 key 找到并设置了
+  WebGAL.gameKey = gameConfig.gameKey ?? '';
+  initKey();
+  await getStorageAsync();
+  getFastSaveFromStorage();
+  getSavesFromStorage(0, 0);
+  // 将游戏配置写入为全局变量
+  for (const [key, value] of Object.entries(gameConfig)) {
+    if (value === undefined) continue;
+    if (typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string') {
+      dispatch(
+        setGlobalVar({
+          key: key,
+          value: value,
+        }),
+      );
+    } else {
+      dispatch(
+        setGlobalVar({
+          key: key,
+          value: String(value),
+        }),
+      );
+    }
+  }
+  // 配置游戏
+  if (gameConfig.enableExtra !== undefined) {
+    dispatch(setEnableAppreciationMode(gameConfig.enableExtra));
+  }
+  if (gameConfig.enableLegacyExpressionBlendMode !== undefined) {
+    Live2D.legacyExpressionBlendMode = gameConfig.enableLegacyExpressionBlendMode;
+  }
+  if (gameConfig.steamAppId !== undefined) {
+    WebGAL.steam.initialize(gameConfig.steamAppId);
+  }
+  // @ts-expect-error renderPromiseResolve is a global variable
+  window.renderPromiseResolve();
+  setStorage();
 };

packages/webgal/src/Core/util/coreInitialFunction/infoFetcher.ts

@@ -189,7 +189,7 @@ export default function IMSSTextbox(props: ITextboxProps) {
 
   const userDataState = useSelector((state: RootState) => state.userData);
   const lineHeightValue = textSizeState === textSize.medium ? 2.2 : 2;
-  const textLineHeight = userDataState.globalGameVar.LineHeight;
+  const textLineHeight = userDataState.globalGameVar.textboxLineHeight;
   const finalTextLineHeight = textLineHeight ? Number(textLineHeight) : lineHeightValue;
   const lineHeightCssStr = `line-height: ${finalTextLineHeight}em`;
   const lhCss = css(lineHeightCssStr);

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

@@ -33,14 +33,14 @@ export const TextBox = () => {
     size = getTextSize(stageState.showTextSize) + '%';
     textSizeState = stageState.showTextSize;
   }
-  const MaxTextLine = Number(userDataState.globalGameVar.Max_line); // congfig定义字体行数
-  const lineLimit = Number.isNaN(MaxTextLine)
+  const maxTextLine = Number(userDataState.globalGameVar.textboxMaxLine); // congfig定义字体行数
+  const lineLimit = Number.isNaN(maxTextLine)
     ? match(textSizeState)
         .with(textSize.small, () => 3)
         .with(textSize.medium, () => 2)
         .with(textSize.large, () => 2)
         .default(() => 2)
-    : MaxTextLine;
+    : maxTextLine;
   // 拆字
   const textArray = compileSentence(stageState.showText, lineLimit);
   const isHasName = stageState.showName !== '';

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

@@ -9,7 +9,7 @@ import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 const useConfigData = () => {
-  const _map = ['Title_img', 'Game_Logo', 'Title_bgm', 'Game_name', 'Game_key'];
+  const _map = ['titleImage', 'gameLogo', 'titleBgm', 'gameName', 'gameKey'];
   const configData = useSelector((state: RootState) => state.userData.globalGameVar);
   return useEffect(() => {
     // configData发生变化
@@ -19,33 +19,33 @@ const useConfigData = () => {
       }
       const val = configData[i] as string;
       switch (i) {
-        case 'Title_img': {
+        case 'titleImage': {
           const titleUrl = assetSetter(val, fileType.background);
           webgalStore.dispatch(setGuiAsset({ asset: 'titleBg', value: titleUrl }));
           setEbg(titleUrl);
           break;
         }
 
-        case 'Game_Logo': {
+        case 'gameLogo': {
           const logos = val.split('|');
           const logoUrlList = logos.map((val) => assetSetter(val, fileType.background));
           webgalStore.dispatch(setLogoImage(logoUrlList));
           break;
         }
 
-        case 'Title_bgm': {
+        case 'titleBgm': {
           const bgmUrl = assetSetter(val, fileType.bgm);
           webgalStore.dispatch(setGuiAsset({ asset: 'titleBgm', value: bgmUrl }));
           break;
         }
 
-        case 'Game_name': {
+        case 'gameName': {
           WebGAL.gameName = val;
           document.title = val;
           break;
         }
 
-        case 'Game_key': {
+        case 'gameKey': {
           WebGAL.gameKey = val;
           getStorage();
           getFastSaveFromStorage();
@@ -55,6 +55,6 @@ const useConfigData = () => {
       }
     }
     return () => {};
-  }, [configData.Game_Logo, configData.Game_key, configData.Game_name, configData.Title_bgm, configData.Title_img]);
+  }, [configData.gameLogo, configData.gameKey, configData.gameName, configData.titleBgm, configData.titleImage]);
 };
 export default useConfigData;