Merge pull request #664 from nini22P/font-optimization

feat: add debug command `FONT_OPTIMIZATION`

Author: MakinoharaShoko

packages/webgal/src/Core/util/syncWithEditor/webSocketFunc.ts

@@ -6,7 +6,7 @@ import { webgalStore } from '@/store/store';
 import { sceneParser, WebgalParser } from '@/Core/parser/sceneParser';
 import { runScript } from '@/Core/controller/gamePlay/runScript';
 import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
-import { setVisibility } from '@/store/GUIReducer';
+import { setFontOptimization, setVisibility } from '@/store/GUIReducer';
 import { resetStage } from '@/Core/controller/stage/resetStage';
 import { ISentence } from '@/Core/controller/scene/sceneInterface';
 
@@ -97,6 +97,10 @@ export const webSocketFunc = () => {
         nextSentence();
       }, 100);
     }
+    if (message.command === DebugCommand.FONT_OPTIMIZATION) {
+      const command = message.message;
+      webgalStore.dispatch(setFontOptimization(command === 'true'));
+    }
   };
   socket.onerror = (e) => {
     logger.info('当前没有连接到 Terre 编辑器');

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

@@ -20,9 +20,43 @@ export interface EnhancedNode {
 }
 
 export const TextBox = () => {
+  const stageState = useSelector((state: RootState) => state.stage);
+  const guiState = useSelector((state: RootState) => state.GUI);
+  const userDataState = useSelector((state: RootState) => state.userData);
+  const textDelay = useTextDelay(userDataState.optionData.textSpeed);
+  const textDuration = useTextAnimationDuration(userDataState.optionData.textSpeed);
+  let size = getTextSize(userDataState.optionData.textSize) + '%';
+  const font = useFontFamily();
+  const isText = stageState.showText !== '' || stageState.showName !== '';
+  let textSizeState = userDataState.optionData.textSize;
+  if (isText && stageState.showTextSize !== -1) {
+    size = getTextSize(stageState.showTextSize) + '%';
+    textSizeState = stageState.showTextSize;
+  }
+  const lineLimit = match(textSizeState)
+    .with(textSize.small, () => 3)
+    .with(textSize.medium, () => 2)
+    .with(textSize.large, () => 2)
+    .default(() => 2);
+  // 拆字
+  const textArray = compileSentence(stageState.showText, lineLimit);
+  const isHasName = stageState.showName !== '';
+  const showName = compileSentence(stageState.showName, lineLimit);
+  const currentConcatDialogPrev = stageState.currentConcatDialogPrev;
+  const currentDialogKey = stageState.currentDialogKey;
+  const miniAvatar = stageState.miniAvatar;
+  const textboxOpacity = userDataState.optionData.textboxOpacity;
+  const Textbox = IMSSTextbox;
+  const fontOptimization = guiState.fontOptimization;
+
   const [isShowStroke, setIsShowStroke] = useState(true);
 
   useEffect(() => {
+    if (!fontOptimization) {
+      setIsShowStroke(true);
+      return;
+    }
+
     const handleResize = () => {
       const targetHeight = SCREEN_CONSTANTS.height;
       const targetWidth = SCREEN_CONSTANTS.width;
@@ -46,34 +80,8 @@ export const TextBox = () => {
     return () => {
       window.removeEventListener('resize', handleResize);
     };
-  }, []);
+  }, [fontOptimization]);
 
-  const stageState = useSelector((state: RootState) => state.stage);
-  const userDataState = useSelector((state: RootState) => state.userData);
-  const textDelay = useTextDelay(userDataState.optionData.textSpeed);
-  const textDuration = useTextAnimationDuration(userDataState.optionData.textSpeed);
-  let size = getTextSize(userDataState.optionData.textSize) + '%';
-  const font = useFontFamily();
-  const isText = stageState.showText !== '' || stageState.showName !== '';
-  let textSizeState = userDataState.optionData.textSize;
-  if (isText && stageState.showTextSize !== -1) {
-    size = getTextSize(stageState.showTextSize) + '%';
-    textSizeState = stageState.showTextSize;
-  }
-  const lineLimit = match(textSizeState)
-    .with(textSize.small, () => 3)
-    .with(textSize.medium, () => 2)
-    .with(textSize.large, () => 2)
-    .default(() => 2);
-  // 拆字
-  const textArray = compileSentence(stageState.showText, lineLimit);
-  const isHasName = stageState.showName !== '';
-  const showName = compileSentence(stageState.showName, lineLimit);
-  const currentConcatDialogPrev = stageState.currentConcatDialogPrev;
-  const currentDialogKey = stageState.currentDialogKey;
-  const miniAvatar = stageState.miniAvatar;
-  const textboxOpacity = userDataState.optionData.textboxOpacity;
-  const Textbox = IMSSTextbox;
   return (
     <Textbox
       textArray={textArray}

packages/webgal/src/store/GUIReducer.ts

@@ -28,6 +28,7 @@ const initState: IGuiState = {
   isEnterGame: false,
   isShowLogo: true,
   enableAppreciationMode: false, // Paf87
+  fontOptimization: false,
 };
 
 /**
@@ -76,10 +77,20 @@ const GUISlice = createSlice({
     setEnableAppreciationMode: (state, action: PayloadAction<boolean>) => {
       state.enableAppreciationMode = action.payload;
     },
+    setFontOptimization: (state, action: PayloadAction<boolean>) => {
+      state.fontOptimization = action.payload;
+    },
   },
 });
 
-export const { setVisibility, setMenuPanelTag, setGuiAsset, setLogoImage, setEnableAppreciationMode } = GUISlice.actions;
+export const {
+  setVisibility,
+  setMenuPanelTag,
+  setGuiAsset,
+  setLogoImage,
+  setEnableAppreciationMode,
+  setFontOptimization,
+} = GUISlice.actions;
 export default GUISlice.reducer;
 
 // export function GuiStateStore(): GuiStore {

packages/webgal/src/store/guiInterface.ts

@@ -30,6 +30,7 @@ export interface IGuiState {
   isEnterGame: boolean;
   isShowLogo: boolean;
   enableAppreciationMode: boolean; // Pc102
+  fontOptimization: boolean; // 字体优化
 }
 
 export type componentsVisibility = Pick<

packages/webgal/src/types/debugProtocol.ts

@@ -15,6 +15,8 @@ export enum DebugCommand {
   SET_COMPONENT_VISIBILITY,
   // 临时场景
   TEMP_SCENE,
+  // 字体优化
+  FONT_OPTIMIZATION,
 }
 
 export interface IDebugMessage {