From 13838345e4b2ded774bd46fcbc34146ea594dfe6 Mon Sep 17 00:00:00 2001 From: npmrun <1549469775@qq.com> Date: Sun, 26 Apr 2026 21:50:03 +0800 Subject: [PATCH] refactor(scene): migrate scenes to runtime lifecycle and finalize rollout Made-with: Cursor --- src/scene/BaseScene.ts | 32 ++++++++++++++++++++----- src/stages/initSceneLayout.ts | 4 ++++ src/stages/page_init.ts | 12 +++++----- src/stages/welcome/page_welcome.ts | 11 +++++---- src/stages/welcome2/page_welcome2.ts | 45 +++++++++++++++++++++--------------- 5 files changed, 68 insertions(+), 36 deletions(-) diff --git a/src/scene/BaseScene.ts b/src/scene/BaseScene.ts index cf64a9c..8f4ed18 100644 --- a/src/scene/BaseScene.ts +++ b/src/scene/BaseScene.ts @@ -21,12 +21,32 @@ export abstract class BaseScene implements IBaseScene { throw new Error("changeScene not injected by SceneManager"); } - // 生命周期方法 - 默认空实现 - async loadBundle(): Promise {} - async unLoadBundle(): Promise {} - layout(): void | Promise {} - onLoad(): void | Promise {} - onUnLoad(): void | Promise {} + /** + * 新 runtime 生命周期钩子：场景实现优先覆写这些方法。 + * SceneManager/transaction 仍调用旧接口，这里做统一桥接。 + */ + protected onSceneLoadBundle(): Promise | void {} + protected onSceneUnloadBundle(): Promise | void {} + protected onSceneLayout(): Promise | void {} + protected onSceneEnter(): Promise | void {} + protected onSceneExit(): Promise | void {} + + // 旧生命周期接口：与当前 runtime/transaction 对齐，内部桥接到新钩子 + async loadBundle(): Promise { + await this.onSceneLoadBundle(); + } + async unLoadBundle(): Promise { + await this.onSceneUnloadBundle(); + } + async layout(): Promise { + await this.onSceneLayout(); + } + async onLoad(): Promise { + await this.onSceneEnter(); + } + async onUnLoad(): Promise { + await this.onSceneExit(); + } update(_dt: number, _name: string, _ticker: Ticker): void {} lateUpdate(_dt: number, _name: string, _ticker: Ticker): void {} } diff --git a/src/stages/initSceneLayout.ts b/src/stages/initSceneLayout.ts index 35cdf6f..d5bb3f8 100644 --- a/src/stages/initSceneLayout.ts +++ b/src/stages/initSceneLayout.ts @@ -8,4 +8,8 @@ export const initSceneLayout = { heroYRatio: 0.46, /** 主按钮相对底边的上移（逻辑像素，与 position.get 的 options.y 一致） */ startCtaOffsetY: -110, + /** 首屏进入欢迎页时的切场景策略（对齐 scene transaction 参数） */ + nextSceneTransition: { + isHolderLast: false, + }, } as const; diff --git a/src/stages/page_init.ts b/src/stages/page_init.ts index 65b023e..7a85cb7 100644 --- a/src/stages/page_init.ts +++ b/src/stages/page_init.ts @@ -40,7 +40,7 @@ export default class InitScene extends BaseScene { super("init", SceneType.Normal); } - async loadBundle(): Promise { + protected async onSceneLoadBundle(): Promise { this.loadingBtn = new Button({ text: "加载中…", position: () => position.get("center", "center"), @@ -66,11 +66,11 @@ export default class InitScene extends BaseScene { this.loadingBtn = undefined; } - async unLoadBundle(): Promise { + protected async onSceneUnloadBundle(): Promise { await assetManager.unloadBundle("load-screen"); } - async layout(): Promise { + protected async onSceneLayout(): Promise { this.stage.sortableChildren = true; this.stage.eventMode = "passive"; @@ -149,7 +149,7 @@ export default class InitScene extends BaseScene { x: 0, }), onClick: () => { - this.changeScene("welcome", { isHolderLast: false }); + this.changeScene("welcome", initSceneLayout.nextSceneTransition); }, }); this.startBtn._comp.zIndex = Z_TEXT; @@ -158,12 +158,12 @@ export default class InitScene extends BaseScene { this.placeHeroElements(); } - onLoad(): void { + protected onSceneEnter(): void { window.addEventListener("resize", this.onResize); this.pixie?.gotoAndPlay(0); } - onUnLoad(): void { + protected onSceneExit(): void { window.removeEventListener("resize", this.onResize); } diff --git a/src/stages/welcome/page_welcome.ts b/src/stages/welcome/page_welcome.ts index 1fe3140..000ab91 100644 --- a/src/stages/welcome/page_welcome.ts +++ b/src/stages/welcome/page_welcome.ts @@ -6,13 +6,14 @@ import position from "@/utils/Position"; export default class WelcomeScene extends BaseScene { stage: Container = new Container(); + private startBtn?: Button; constructor() { super("welcome", SceneType.Normal); } - async layout(): Promise { - const btn = new Button({ + protected onSceneLayout(): void { + this.startBtn = new Button({ text: "进入游戏", onClick: () => { this.changeScene("welcome2"); @@ -20,14 +21,14 @@ export default class WelcomeScene extends BaseScene { position: () => position.center(), }); - this.stage.addChild(btn.getView()); + this.stage.addChild(this.startBtn.getView()); } - onLoad(): void { + protected onSceneEnter(): void { console.log("welcome onLoad"); } - onUnLoad(): void { + protected onSceneExit(): void { console.log("welcome onUnLoad"); } } \ No newline at end of file diff --git a/src/stages/welcome2/page_welcome2.ts b/src/stages/welcome2/page_welcome2.ts index f851b27..c043846 100644 --- a/src/stages/welcome2/page_welcome2.ts +++ b/src/stages/welcome2/page_welcome2.ts @@ -4,36 +4,43 @@ import { Container, FederatedPointerEvent, Graphics } from "pixi.js"; export default class Welcome2Scene extends BaseScene { stage = new Container(); + private circle?: Graphics; + private goWelcome = (_e: FederatedPointerEvent): void => { + if (!this.circle) { + return; + } + this.circle.x += 10; + this.changeScene("welcome"); + }; constructor() { super("welcome2", SceneType.Normal); } - layout(): void { - const circle = new Graphics(); - circle.label = "circle"; - circle.circle(0, 0, 32); - circle.fill(0xfb6a8f); - circle.x = 130; - circle.y = 300; - circle.eventMode = "static"; - circle.cursor = "pointer"; + protected onSceneLayout(): void { + this.circle = new Graphics(); + this.circle.label = "circle"; + this.circle.circle(0, 0, 32); + this.circle.fill(0xfb6a8f); + this.circle.x = 130; + this.circle.y = 300; + this.circle.eventMode = "static"; + this.circle.cursor = "pointer"; - const goWelcome = (_e: FederatedPointerEvent) => { - circle.x += 10; - this.changeScene("welcome"); - }; - - circle.on("touchend", goWelcome); - circle.on("mousedown", goWelcome); - this.stage.addChild(circle); + this.circle.on("touchend", this.goWelcome); + this.circle.on("mousedown", this.goWelcome); + this.stage.addChild(this.circle); } - onLoad(): void { + protected onSceneEnter(): void { console.log("onLoad 2"); } - onUnLoad(): void { + protected onSceneExit(): void { + if (this.circle) { + this.circle.off("touchend", this.goWelcome); + this.circle.off("mousedown", this.goWelcome); + } console.log("onUnLoad 2"); } }