From 46b78b7de4a5891f06502020b293198b5bef423f Mon Sep 17 00:00:00 2001
From: Hardy--Lee <hardy--lee@outlook.com>
Date: Wed, 1 Apr 2026 08:34:39 +0800
Subject: [PATCH 1/2] fix: fade ebg when bg is empty

---
 .../webgal/src/Core/gameScripts/changeBg/setEbg.ts     | 10 +++++++---
 packages/webgal/src/Stage/MainStage/useSetBg.ts        |  8 ++++++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts b/packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts
index d4f93cc90..b9c8b8493 100644
--- a/packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts
+++ b/packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts
@@ -1,8 +1,9 @@
 import { DEFAULT_BG_IN_DURATION } from '@/Core/constants';
 
 let previousImageUrl = '';
+let animation: Animation | null = null;
 
-export function setEbg(url: string, duration = DEFAULT_BG_IN_DURATION) {
+export function setEbg(url: string, duration = DEFAULT_BG_IN_DURATION, ease = 'ease-in-out') {
   const ebg = document.getElementById('ebg') as HTMLElement;
   if (ebg) {
     ebg.style.backgroundImage = `url("${url}")`;
@@ -10,9 +11,12 @@ export function setEbg(url: string, duration = DEFAULT_BG_IN_DURATION) {
   const ebgOverlay = document.getElementById('ebgOverlay') as HTMLElement;
   if (ebgOverlay) {
     ebgOverlay.style.backgroundImage = `url("${previousImageUrl}")`;
-    ebgOverlay.animate([{ opacity: 1 }, { opacity: 0 }], {
+    if (animation) {
+      animation.cancel();
+    }
+    animation = ebgOverlay.animate([{ opacity: 1 }, { opacity: 0 }], {
       duration: duration,
-      easing: 'ease-in-out',
+      easing: ease,
     });
   }
   previousImageUrl = url;
diff --git a/packages/webgal/src/Stage/MainStage/useSetBg.ts b/packages/webgal/src/Stage/MainStage/useSetBg.ts
index d196fe802..2c2a684be 100644
--- a/packages/webgal/src/Stage/MainStage/useSetBg.ts
+++ b/packages/webgal/src/Stage/MainStage/useSetBg.ts
@@ -6,6 +6,7 @@ import { setEbg } from '@/Core/gameScripts/changeBg/setEbg';
 
 import { getEnterExitAnimation } from '@/Core/Modules/animationFunctions';
 import { WebGAL } from '@/Core/WebGAL';
+import { DEFAULT_BG_OUT_DURATION } from '@/Core/constants';
 
 export function useSetBg(stageState: IStageState) {
   const bgName = stageState.bgName;
@@ -29,15 +30,17 @@ export function useSetBg(stageState: IStageState) {
       WebGAL.gameplay.pixiStage!.registerPresetAnimation(animation, 'bg-main-softin', thisBgKey, stageState.effects);
       setTimeout(() => WebGAL.gameplay.pixiStage!.removeAnimationWithSetEffects('bg-main-softin'), duration);
     } else {
+      let exitDuration = DEFAULT_BG_OUT_DURATION;
       const currentBg = WebGAL.gameplay.pixiStage?.getStageObjByKey(thisBgKey);
       if (currentBg) {
-        removeBg(currentBg);
+        exitDuration = removeBg(currentBg);
       }
+      setEbg(bgName, exitDuration, 'cubic-bezier(0.5, 0, 0.75, 0)');
     }
   }, [bgName]);
 }
 
-function removeBg(bgObject: IStageObject) {
+function removeBg(bgObject: IStageObject): number {
   WebGAL.gameplay.pixiStage?.removeAnimationWithSetEffects('bg-main-softin');
   const oldBgKey = bgObject.key;
   bgObject.key = 'bg-main-off' + String(new Date().getTime());
@@ -50,6 +53,7 @@ function removeBg(bgObject: IStageObject) {
     WebGAL.gameplay.pixiStage?.removeAnimation(bgAniKey);
     WebGAL.gameplay.pixiStage?.removeStageObjectByKey(bgKey);
   }, duration);
+  return duration;
 }
 
 function addBg(type?: 'image' | 'spine', ...args: any[]) {

From a2221896b4b5c653855a4f9bce1e265c6d59cf00 Mon Sep 17 00:00:00 2001
From: Hardy--Lee <hardy--lee@outlook.com>
Date: Wed, 1 Apr 2026 09:05:51 +0800
Subject: [PATCH 2/2] fix: avoid unnecessary resource requests

---
 .../webgal/src/Core/gameScripts/changeBg/setEbg.ts  | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts b/packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts
index b9c8b8493..70922f6f9 100644
--- a/packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts
+++ b/packages/webgal/src/Core/gameScripts/changeBg/setEbg.ts
@@ -6,11 +6,11 @@ let animation: Animation | null = null;
 export function setEbg(url: string, duration = DEFAULT_BG_IN_DURATION, ease = 'ease-in-out') {
   const ebg = document.getElementById('ebg') as HTMLElement;
   if (ebg) {
-    ebg.style.backgroundImage = `url("${url}")`;
+    ebg.style.backgroundImage = getValidBgImage(url);
   }
   const ebgOverlay = document.getElementById('ebgOverlay') as HTMLElement;
   if (ebgOverlay) {
-    ebgOverlay.style.backgroundImage = `url("${previousImageUrl}")`;
+    ebgOverlay.style.backgroundImage = getValidBgImage(previousImageUrl);
     if (animation) {
       animation.cancel();
     }
@@ -21,3 +21,12 @@ export function setEbg(url: string, duration = DEFAULT_BG_IN_DURATION, ease = 'e
   }
   previousImageUrl = url;
 }
+
+function getValidBgImage(url: string): string {
+  if (url === '') {
+    return 'none';
+  } else {
+    return `url("${url}")`;
+  }
+}
+