Merge branch 'dev'

Author: MakinoharaShoko

packages/webgal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webgal-engine",
-  "version": "4.5.15",
+  "version": "4.5.15-1",
   "scripts": {
     "dev": "vite --host --port 3000",
     "build": "cross-env NODE_ENV=production tsc && vite build --base=./",

packages/webgal/src/Core/controller/stage/pixi/animations/universalSoftIn.ts

@@ -4,23 +4,26 @@ export function generateUniversalSoftInAnimationObj(targetKey: string, duration:
   const target = WebGAL.gameplay.pixiStage!.getStageObjByKey(targetKey);
   let elapsedTime = 0;
 
-  // 先设置一个通用的初态
+  // 新增变量，用于存储动画开始时的初始透明度
+  let startAlpha = 0;
+
   /**
    * 在此书写为动画设置初态的操作
    */
   function setStartState() {
     elapsedTime = 0; // Reset timer when animation starts
     if (target) {
-      target.pixiContainer.alpha = 0;
+      // 修正：不再强制设为 0，而是记录当前的透明度
+      startAlpha = target.pixiContainer.alpha;
     }
   }
 
-  // TODO：通用终态设置
   /**
    * 在此书写为动画设置终态的操作
    */
   function setEndState() {
     if (target) {
+      // 终态是完全不透明，这保持不变
       target.pixiContainer.alpha = 1;
     }
   }
@@ -34,21 +37,19 @@ export function generateUniversalSoftInAnimationObj(targetKey: string, duration:
       const sprite = target.pixiContainer;
       const baseDuration = WebGAL.gameplay.pixiStage!.frameDuration;
 
-      // Increment the elapsed time by the duration of the last frame
       elapsedTime += baseDuration;
 
-      // Ensure elapsedTime does not exceed the total duration
       const realElapsedTime = Math.min(elapsedTime, duration);
-
-      // Calculate the progress of the animation as a value from 0 to 1
       const progress = realElapsedTime / duration;
 
-      // Apply the Cubic Ease-Out function
-      // The formula is: 1 - (1 - progress)^3
+      // 使用 Cubic Ease-Out 函数，这对于“进入”动画感觉更自然
       const easedProgress = 1 - Math.pow(1 - progress, 3);
 
-      // Set the sprite's alpha to the eased value
-      sprite.alpha = easedProgress;
+      // 修正：使用线性插值公式 (lerp)
+      // 公式：最终值 = 初始值 + (目标值 - 初始值) * 进度
+      // 在这里，目标值是 1，所以公式为：
+      // alpha = startAlpha + (1 - startAlpha) * easedProgress
+      sprite.alpha = startAlpha + (1 - startAlpha) * easedProgress;
     }
   }
 

packages/webgal/src/Core/controller/stage/pixi/animations/universalSoftOff.ts

@@ -4,17 +4,17 @@ export function generateUniversalSoftOffAnimationObj(targetKey: string, duration
   const target = WebGAL.gameplay.pixiStage!.getStageObjByKey(targetKey);
   let elapsedTime = 0;
 
-  // 先设置一个通用的初态
+  // 新增变量，用于存储动画开始时的初始透明度
+  let startAlpha = 1;
 
   /**
    * 在此书写为动画设置初态的操作
    */
   function setStartState() {
-    elapsedTime = 0; // Reset timer when animation starts
+    elapsedTime = 0; // 重置计时器
     if (target) {
-      // It's good practice to ensure the starting alpha is 1
-      // in case the animation is chained or re-run.
-      target.pixiContainer.alpha = 1;
+      // 修正：不再强制设为1，而是记录当前的透明度
+      startAlpha = target.pixiContainer.alpha;
     }
   }
 
@@ -23,6 +23,7 @@ export function generateUniversalSoftOffAnimationObj(targetKey: string, duration
    */
   function setEndState() {
     if (target) {
+      // 终态是完全透明，这保持不变
       target.pixiContainer.alpha = 0;
     }
   }
@@ -36,23 +37,20 @@ export function generateUniversalSoftOffAnimationObj(targetKey: string, duration
       const targetContainer = target.pixiContainer;
       const baseDuration = WebGAL.gameplay.pixiStage!.frameDuration;
 
-      // Increment the elapsed time by the duration of the last frame
       elapsedTime += baseDuration;
 
-      // Ensure elapsedTime does not exceed the total duration
       const realElapsedTime = Math.min(elapsedTime, duration);
-
-      // Calculate the progress of the animation as a value from 0 to 1
       const progress = realElapsedTime / duration;
 
-      // Apply the Cubic Ease-In function
-      // The formula is: progress^3
+      // 使用 Cubic Ease-In 函数
       const easedProgress = Math.pow(progress, 3);
 
-      // To fade out, we subtract the eased progress from 1
-      // As easedProgress goes from 0 to 1 (slowly then quickly),
-      // alpha will go from 1 to 0 (slowly then quickly).
-      targetContainer.alpha = 1 - easedProgress;
+      // 修正：基于初始透明度 startAlpha 进行计算
+      // 公式：最终值 = 初始值 + (目标值 - 初始值) * 进度
+      // 在这里，目标值是 0，所以公式简化为：
+      // alpha = startAlpha + (0 - startAlpha) * easedProgress
+      // alpha = startAlpha * (1 - easedProgress)
+      targetContainer.alpha = startAlpha * (1 - easedProgress);
     }
   }
 

packages/webgal/src/Stage/Stage.tsx

@@ -6,7 +6,7 @@ import { FullScreenPerform } from './FullScreenPerform/FullScreenPerform';
 import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
 import { stopAll } from '@/Core/controller/gamePlay/fastSkip';
 import { useDispatch, useSelector } from 'react-redux';
-import { RootState } from '@/store/store';
+import { RootState, webgalStore } from '@/store/store';
 import { setVisibility } from '@/store/GUIReducer';
 import { TextBoxFilm } from '@/Stage/TextBox/TextBoxFilm';
 import { useHotkey } from '@/hooks/useHotkey';
@@ -18,52 +18,12 @@ import { IGuiState } from '@/store/guiInterface';
 import { IStageState } from '@/store/stageInterface';
 // import OldStage from '@/Components/Stage/OldStage/OldStage';
 
-function inTextBox(event: React.MouseEvent) {
-  const tb = document.getElementById('textBoxMain');
-  if (!tb) {
-    return false;
-  }
-  let bounds = tb.getBoundingClientRect();
-  return (
-    event.clientX > bounds.left &&
-    event.clientX < bounds.right &&
-    event.clientY > bounds.top &&
-    event.clientY < bounds.bottom
-  );
-}
-
-function checkMousePosition(event: React.MouseEvent, GUIState: IGuiState, dispatch: ReturnType<typeof useDispatch>) {
-  if (!GUIState.controlsVisibility && inTextBox(event)) {
-    dispatch(setVisibility({ component: 'controlsVisibility', visibility: true }));
-  }
-  if (GUIState.controlsVisibility && !inTextBox(event)) {
-    dispatch(setVisibility({ component: 'controlsVisibility', visibility: false }));
-  }
-}
-
-function isTextboxHidden(stageState: IStageState, GUIState: IGuiState) {
-  if (!GUIState.showTextBox) {
-    return true;
-  }
-
-  if (stageState.isDisableTextbox) {
-    return true;
-  }
-
-  const isText = stageState.showText !== '' || stageState.showName !== '';
-  if (!isText) {
-    return true;
-  }
-
-  const isInIntro = document.getElementById('introContainer')?.style.display === 'block';
-  if (isInIntro) {
-    return true;
-  }
-
-  return false;
-}
-
 let timeoutEventHandle: ReturnType<typeof setTimeout> | null = null;
+// 视为“未移动”的最小移动阈值（像素^2），例如 4px -> 16
+const MOVE_THRESHOLD_SQ = 16;
+let lastMouseX = 0;
+let lastMouseY = 0;
+let hasLastMousePos = false;
 
 /**
  * 检查并更新控制可见性
@@ -79,22 +39,38 @@ function updateControlsVisibility(
   GUIState: IGuiState,
   dispatch: ReturnType<typeof useDispatch>,
 ) {
-  if (isTextboxHidden(stageState, GUIState)) {
-    // 当文本框被隐藏时
-    // 逻辑：鼠标移动时显示，一段时间（默认：1秒）后隐藏
-    if (timeoutEventHandle) {
-      clearTimeout(timeoutEventHandle);
-    }
+  // 新逻辑：超过阈值的鼠标移动立刻显示，2s 无操作后隐藏（未锁定时）
+  const { clientX, clientY } = event;
+  let movedEnough = false;
+  if (!hasLastMousePos) {
+    movedEnough = true; // 第一次移动视为足够
+    hasLastMousePos = true;
+  } else {
+    const dx = clientX - lastMouseX;
+    const dy = clientY - lastMouseY;
+    movedEnough = dx * dx + dy * dy >= MOVE_THRESHOLD_SQ;
+  }
+  lastMouseX = clientX;
+  lastMouseY = clientY;
+
+  if (!movedEnough) {
+    // 微小移动，视为无操作，不重置计时器
+    return;
+  }
+
+  if (timeoutEventHandle) {
+    clearTimeout(timeoutEventHandle);
+  }
 
+  if (!GUIState.controlsVisibility) {
     dispatch(setVisibility({ component: 'controlsVisibility', visibility: true }));
-    timeoutEventHandle = setTimeout(() => {
-      dispatch(setVisibility({ component: 'controlsVisibility', visibility: false }));
-    }, 1000);
-  } else {
-    // 当文本框正常显示时
-    // 逻辑：鼠标位置在文本框内时显示
-    checkMousePosition(event, GUIState, dispatch);
   }
+
+  timeoutEventHandle = setTimeout(() => {
+    if (!webgalStore.getState().GUI.showControls) {
+      dispatch(setVisibility({ component: 'controlsVisibility', visibility: false }));
+    }
+  }, 2000);
 }
 
 export const Stage: FC = () => {