Merge pull request #775 from OpenWebGAL/fix-assign-to-destroyed-container

fix: assign transform to a destroyed container problem

Author: MakinoharaShoko

packages/webgal/src/Core/controller/stage/pixi/PixiController.ts

@@ -17,6 +17,7 @@ export interface IAnimationObject {
   setEndState: Function;
   tickerFunc: PIXI.TickerCallback<number>;
   getEndStateEffect?: Function;
+  forceStopWithoutSetEndState?: Function;
 }
 
 interface IStageAnimationObject {
@@ -34,7 +35,7 @@ export interface IStageObject {
   uuid: string;
   // 一般与作用目标有关
   key: string;
-  pixiContainer: WebGALPixiContainer;
+  pixiContainer: WebGALPixiContainer | null;
   // 相关的源 url
   sourceUrl: string;
   sourceExt: string;
@@ -235,7 +236,7 @@ export default class PixiStage {
       const targetPixiContainer = this.getStageObjByKey(target);
       if (targetPixiContainer) {
         const container = targetPixiContainer.pixiContainer;
-        PixiStage.assignTransform(container, effect.transform);
+        if (container) PixiStage.assignTransform(container, effect.transform);
       }
       return;
     }
@@ -267,6 +268,19 @@ export default class PixiStage {
     }
   }
 
+  public removeAnimationWithoutSetEndState(key: string) {
+    const index = this.stageAnimations.findIndex((e) => e.key === key);
+    if (index >= 0) {
+      const thisTickerFunc = this.stageAnimations[index];
+      this.currentApp?.ticker.remove(thisTickerFunc.animationObject.tickerFunc);
+      if (thisTickerFunc.animationObject.forceStopWithoutSetEndState) {
+        thisTickerFunc.animationObject.forceStopWithoutSetEndState();
+      }
+      this.unlockStageObject(thisTickerFunc.targetKey ?? 'default');
+      this.stageAnimations.splice(index, 1);
+    }
+  }
+
   public removeAllAnimations() {
     while (this.stageAnimations.length > 0) {
       this.removeAnimationByIndex(0);
@@ -776,6 +790,7 @@ export default class PixiStage {
       const figureRecordTarget = this.live2dFigureRecorder.find((e) => e.target === key);
       if (target && figureRecordTarget?.motion !== motion) {
         const container = target.pixiContainer;
+        if (!container) return;
         const children = container.children;
         for (const model of children) {
           let category_name = motion;
@@ -799,6 +814,7 @@ export default class PixiStage {
     if (target?.sourceType !== 'spine') return;
 
     const container = target.pixiContainer;
+    if (!container) return;
     // Spine figure 结构: Container -> Sprite -> Spine
     const sprite = container.children[0] as PIXI.Container;
     if (sprite?.children?.[0]) {
@@ -825,6 +841,7 @@ export default class PixiStage {
     const figureRecordTarget = this.live2dFigureRecorder.find((e) => e.target === key);
     if (target && figureRecordTarget?.expression !== expression) {
       const container = target.pixiContainer;
+      if (!container) return;
       const children = container.children;
       for (const model of children) {
         // @ts-ignore
@@ -840,6 +857,7 @@ export default class PixiStage {
     const figureRecordTarget = this.live2dFigureRecorder.find((e) => e.target === key);
     if (target && !isEqual(figureRecordTarget?.blink, blinkParam)) {
       const container = target.pixiContainer;
+      if (!container) return;
       const children = container.children;
       let newBlinkParam: BlinkParam = { ...baseBlinkParam, ...blinkParam };
       // 继承现有 BlinkParam
@@ -860,6 +878,7 @@ export default class PixiStage {
     const figureRecordTarget = this.live2dFigureRecorder.find((e) => e.target === key);
     if (target && !isEqual(figureRecordTarget?.focus, focusParam)) {
       const container = target.pixiContainer;
+      if (!container) return;
       const children = container.children;
       let newFocusParam: FocusParam = { ...baseFocusParam, ...focusParam };
       // 继承现有 FocusParam
@@ -883,6 +902,7 @@ export default class PixiStage {
     const target = this.figureObjects.find((e) => e.key === key);
     if (target && target.sourceType === 'live2d') {
       const container = target.pixiContainer;
+      if (!container) return;
       const children = container.children;
       for (const model of children) {
         // @ts-ignore
@@ -925,20 +945,28 @@ export default class PixiStage {
     const indexBg = this.backgroundObjects.findIndex((e) => e.key === key);
     if (indexFig >= 0) {
       const bgSprite = this.figureObjects[indexFig];
-      for (const element of bgSprite.pixiContainer.children) {
-        element.destroy();
+      if (bgSprite.pixiContainer)
+        for (const element of bgSprite.pixiContainer.children) {
+          element.destroy();
+        }
+      if (bgSprite.pixiContainer) {
+        bgSprite.pixiContainer.destroy();
+        this.figureContainer.removeChild(bgSprite.pixiContainer);
       }
-      bgSprite.pixiContainer.destroy();
-      this.figureContainer.removeChild(bgSprite.pixiContainer);
+      bgSprite.pixiContainer = null;
       this.figureObjects.splice(indexFig, 1);
     }
     if (indexBg >= 0) {
       const bgSprite = this.backgroundObjects[indexBg];
-      for (const element of bgSprite.pixiContainer.children) {
-        element.destroy();
+      if (bgSprite.pixiContainer)
+        for (const element of bgSprite.pixiContainer.children) {
+          element.destroy();
+        }
+      if (bgSprite.pixiContainer) {
+        bgSprite.pixiContainer.destroy();
+        this.backgroundContainer.removeChild(bgSprite.pixiContainer);
       }
-      bgSprite.pixiContainer.destroy();
-      this.backgroundContainer.removeChild(bgSprite.pixiContainer);
+      bgSprite.pixiContainer = null;
       this.backgroundObjects.splice(indexBg, 1);
     }
     // /**

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

@@ -10,7 +10,7 @@ export function generateTestblurAnimationObj(targetKey: string, duration: number
    * 在此书写为动画设置初态的操作
    */
   function setStartState() {
-    if (target) {
+    if (target?.pixiContainer) {
       target.pixiContainer.alpha = 0;
       // @ts-ignore
       target.pixiContainer.blur = 0;
@@ -22,7 +22,7 @@ export function generateTestblurAnimationObj(targetKey: string, duration: number
    * 在此书写为动画设置终态的操作
    */
   function setEndState() {
-    if (target) {
+    if (target?.pixiContainer) {
       target.pixiContainer.alpha = 1;
       // @ts-ignore
       target.pixiContainer.blur = 5;
@@ -40,9 +40,10 @@ export function generateTestblurAnimationObj(targetKey: string, duration: number
       const currentAddOplityDelta = (duration / baseDuration) * delta;
       const increasement = 1 / currentAddOplityDelta;
       const decreasement = 5 / currentAddOplityDelta;
-      if (container.alpha < 1) {
-        container.alpha += increasement;
-      }
+      if (container)
+        if (container.alpha < 1) {
+          container.alpha += increasement;
+        }
       // @ts-ignore
       if (container.blur < 5) {
         // @ts-ignore

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

@@ -92,6 +92,9 @@ export function generateTimelineObj(
    * 在此书写为动画设置终态的操作
    */
   function setEndState() {
+    if (!container) {
+      return;
+    }
     if (animateInstance) animateInstance.stop();
     animateInstance = null;
     if (target?.pixiContainer) {
@@ -126,11 +129,17 @@ export function generateTimelineObj(
     return timeline[timeline.length - 1];
   }
 
+  function forceStopWithoutSetEndState() {
+    if (animateInstance) animateInstance.stop();
+    animateInstance = null;
+  }
+
   return {
     setStartState,
     setEndState,
     tickerFunc,
     getEndStateEffect,
+    forceStopWithoutSetEndState,
   };
 }
 

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

@@ -12,7 +12,7 @@ export function generateUniversalSoftInAnimationObj(targetKey: string, duration:
    */
   function setStartState() {
     elapsedTime = 0; // Reset timer when animation starts
-    if (target) {
+    if (target?.pixiContainer) {
       // 修正：不再强制设为 0，而是记录当前的透明度
       startAlpha = target.pixiContainer.alpha;
     }
@@ -22,7 +22,7 @@ export function generateUniversalSoftInAnimationObj(targetKey: string, duration:
    * 在此书写为动画设置终态的操作
    */
   function setEndState() {
-    if (target) {
+    if (target?.pixiContainer) {
       // 终态是完全不透明，这保持不变
       target.pixiContainer.alpha = 1;
     }
@@ -49,7 +49,7 @@ export function generateUniversalSoftInAnimationObj(targetKey: string, duration:
       // 公式：最终值 = 初始值 + (目标值 - 初始值) * 进度
       // 在这里，目标值是 1，所以公式为：
       // alpha = startAlpha + (1 - startAlpha) * easedProgress
-      sprite.alpha = startAlpha + (1 - startAlpha) * easedProgress;
+      if (sprite) sprite.alpha = startAlpha + (1 - startAlpha) * easedProgress;
     }
   }
 

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

@@ -12,7 +12,7 @@ export function generateUniversalSoftOffAnimationObj(targetKey: string, duration
    */
   function setStartState() {
     elapsedTime = 0; // 重置计时器
-    if (target) {
+    if (target?.pixiContainer) {
       // 修正：不再强制设为1，而是记录当前的透明度
       startAlpha = target.pixiContainer.alpha;
     }
@@ -22,7 +22,7 @@ export function generateUniversalSoftOffAnimationObj(targetKey: string, duration
    * 在此书写为动画设置终态的操作
    */
   function setEndState() {
-    if (target) {
+    if (target?.pixiContainer) {
       // 终态是完全透明，这保持不变
       target.pixiContainer.alpha = 0;
     }
@@ -50,7 +50,7 @@ export function generateUniversalSoftOffAnimationObj(targetKey: string, duration
       // 在这里，目标值是 0，所以公式简化为：
       // alpha = startAlpha + (0 - startAlpha) * easedProgress
       // alpha = startAlpha * (1 - easedProgress)
-      targetContainer.alpha = startAlpha * (1 - easedProgress);
+      if (targetContainer) targetContainer.alpha = startAlpha * (1 - easedProgress);
     }
   }
 

packages/webgal/src/Core/gameScripts/changeBg/index.ts

@@ -32,10 +32,15 @@ export const changeBg = (sentence: ISentence): IPerform => {
     dispatch(unlockCgInUserData({ name: unlockName, url, series }));
   }
 
+  /**
+   * 判断背景 URL 是否发生了变化
+   */
+  const isUrlChanged = webgalStore.getState().stage.bgName !== sentence.content;
+
   /**
    * 删掉相关 Effects，因为已经移除了
    */
-  if (webgalStore.getState().stage.bgName !== sentence.content) {
+  if (isUrlChanged) {
     dispatch(stageActions.removeEffectByTargetId(`bg-main`));
   }
 
@@ -85,6 +90,17 @@ export const changeBg = (sentence: ISentence): IPerform => {
     duration = getAnimateDuration(exitAnimation);
   }
 
+  /**
+   * 背景状态后处理
+   */
+  function postBgStateSet() {
+    if (isUrlChanged) {
+      // 当 URL 发生变化时，清理旧的 hold 动画
+      WebGAL.gameplay.performController.unmountPerform(`animation-bg-main`, true);
+    }
+  }
+
+  postBgStateSet();
   dispatch(setStage({ key: 'bgName', value: sentence.content }));
 
   return {

packages/webgal/src/Core/gameScripts/changeFigure.ts

@@ -196,10 +196,12 @@ export function changeFigure(sentence: ISentence): IPerform {
     }
   };
 
-  function setFigureData() {
+  function postFigureStateSet() {
     if (isUrlChanged) {
       // 当 url 发生变化时，即发生新立绘替换
       // 应当赋予一些参数以默认值，防止从旧立绘的状态获取数据
+      // 并且关闭一些 hold 动画
+      WebGAL.gameplay.performController.unmountPerform(`animation-${key}`, true);
       bounds = bounds ?? [0, 0, 0, 0];
       blink = blink ?? cloneDeep(baseBlinkParam);
       focus = focus ?? cloneDeep(baseFocusParam);
@@ -236,7 +238,7 @@ export function changeFigure(sentence: ISentence): IPerform {
      */
     const freeFigureItem: IFreeFigure = { key, name: content, basePosition: pos };
     setAnimationNames(key, sentence);
-    setFigureData();
+    postFigureStateSet();
     dispatch(stageActions.setFreeFigureByKey(freeFigureItem));
   } else {
     /**
@@ -255,7 +257,7 @@ export function changeFigure(sentence: ISentence): IPerform {
 
     key = positionMap[pos];
     setAnimationNames(key, sentence);
-    setFigureData();
+    postFigureStateSet();
     dispatch(setStage({ key: dispatchMap[pos], value: content }));
   }
 

packages/webgal/src/Core/gameScripts/setTransform.ts

@@ -46,8 +46,11 @@ export const setTransform = (sentence: ISentence): IPerform => {
   const animationDuration = getAnimateDuration(animationName);
 
   const key = `${target}-${animationName}-${animationDuration}`;
-  let stopFunction = () => {};
+  let keepAnimationStopped = false;
   setTimeout(() => {
+    if (keep && keepAnimationStopped) {
+      return;
+    }
     WebGAL.gameplay.pixiStage?.stopPresetAnimationOnTarget(target);
     const animationObj: IAnimationObject | null = getAnimationObject(
       animationName,
@@ -60,10 +63,13 @@ export const setTransform = (sentence: ISentence): IPerform => {
       WebGAL.gameplay.pixiStage?.registerAnimation(animationObj, key, target);
     }
   }, 0);
-  stopFunction = () => {
+  const stopFunction = () => {
+    if (keep) {
+      WebGAL.gameplay.pixiStage?.removeAnimationWithoutSetEndState(key);
+      keepAnimationStopped = true;
+      return;
+    }
     setTimeout(() => {
-      const endDialogKey = webgalStore.getState().stage.currentDialogKey;
-      const isHasNext = startDialogKey !== endDialogKey;
       WebGAL.gameplay.pixiStage?.removeAnimationWithSetEffects(key);
     }, 0);
   };

packages/webgal/src/Stage/MainStage/useSetFigure.ts

@@ -63,7 +63,7 @@ export function useSetFigure(stageState: IStageState) {
   useEffect(() => {
     Object.entries(figureMetaData).forEach(([key, value]) => {
       const figureObject = WebGAL.gameplay.pixiStage?.getStageObjByKey(key);
-      if (figureObject && !figureObject.isExiting && value?.zIndex !== undefined) {
+      if (figureObject && !figureObject.isExiting && value?.zIndex !== undefined && figureObject.pixiContainer) {
         figureObject.pixiContainer.zIndex = value.zIndex;
       }
     });