feat: scene manager and transitions

packages/framework/src/ui/PhaserBridge.tsx

@@ -1,12 +1,23 @@
 import Phaser from 'phaser';
-import { signal, useSignal, useSignalEffect } from '@preact/signals';
+import { computed, signal, useSignal, useSignalEffect } from '@preact/signals';
 import { createContext, h } from 'preact';
 import { useContext } from 'preact/hooks';
 import {ReadonlySignal} from "@preact/signals-core";
 import type { ReactiveScene, ReactiveScenePhaserData } from '../scenes';
+import { FadeScene as FadeSceneClass, FADE_SCENE_KEY } from '../scenes/FadeScene';
+
+export interface SceneController {
+    /** 启动场景（带淡入淡出过渡） */
+    launch(sceneKey: string, data?: Record<string, unknown>): Promise<void>;
+    /** 当前活跃场景 key */
+    currentScene: ReadonlySignal<string | null>;
+    /** 是否正在过渡 */
+    isTransitioning: ReadonlySignal<boolean>;
+}
 
 export interface PhaserGameContext {
     game: Phaser.Game;
+    sceneController: SceneController;
 }
 
 export const phaserContext = createContext<ReadonlySignal<PhaserGameContext> | null>(null);
@@ -26,7 +37,8 @@ export interface PhaserGameProps {
 }
 
 export function PhaserGame(props: PhaserGameProps) {
-    const gameSignal = useSignal<PhaserGameContext>({ game: undefined! });
+    const gameSignal = useSignal<PhaserGameContext>({ game: undefined!, sceneController: undefined! });
+    const registeredScenes = useSignal<Map<string, ReactiveScene>>(new Map());
 
     useSignalEffect(() => {
         const config: Phaser.Types.Core.GameConfig = {
@@ -34,10 +46,50 @@ export function PhaserGame(props: PhaserGameProps) {
             ...props.config,
         };
         const phaserGame = new Phaser.Game(config);
-        gameSignal.value = { game: phaserGame };
+
+        // 添加 FadeScene
+        const fadeScene = new FadeSceneClass();
+        phaserGame.scene.add(FADE_SCENE_KEY, fadeScene, false);
+
+        // 创建 SceneController
+        const currentScene = signal<string | null>(null);
+        const isTransitioning = signal(false);
+
+        const sceneController: SceneController = {
+            async launch(sceneKey: string, data?: Record<string, unknown>) {
+                if (isTransitioning.value) {
+                    console.warn('SceneController: 正在进行场景切换');
+                    return;
+                }
+
+                isTransitioning.value = true;
+                const fade = phaserGame.scene.getScene(FADE_SCENE_KEY) as FadeSceneClass;
+
+                // 淡出到黑色
+                await fade.fadeOut(300);
+
+                // 停止当前场景
+                if (currentScene.value) {
+                    phaserGame.scene.stop(currentScene.value);
+                }
+
+                // 启动新场景
+                phaserGame.scene.start(sceneKey, data);
+                currentScene.value = sceneKey;
+
+                // 淡入
+                await fade.fadeIn(300);
+                isTransitioning.value = false;
+            },
+            currentScene,
+            isTransitioning,
+        };
+
+        gameSignal.value = { game: phaserGame, sceneController };
 
         return () => {
-            gameSignal.value = { game: undefined! };
+            gameSignal.value = { game: undefined!, sceneController: undefined! };
+            registeredScenes.value.clear();
             phaserGame.destroy(true);
         };
     });
@@ -54,7 +106,6 @@ export function PhaserGame(props: PhaserGameProps) {
 export interface PhaserSceneProps<TData extends Record<string, unknown> = {}> {
     sceneKey: string;
     scene: ReactiveScene<TData>;
-    autoStart: boolean;
     data?: TData;
     children?: any;
 }
@@ -62,7 +113,7 @@ export interface PhaserSceneProps<TData extends Record<string, unknown> = {}> {
 export const phaserSceneContext = createContext<ReadonlySignal<ReactiveScene> | null>(null);
 export function PhaserScene<TData extends Record<string, unknown> = {}>(props: PhaserSceneProps<TData>) {
     const phaserGameSignal = useContext(phaserContext);
-    const sceneSignal = useSignal<Phaser.Scene>();
+    const sceneSignal = useSignal<ReactiveScene<TData>>();
 
     useSignalEffect(() => {
         if (!phaserGameSignal) return;
@@ -72,14 +123,19 @@ export function PhaserScene<TData extends Record<string, unknown> = {}>(props: P
         const game = ctx.game;
         const initData = {
             ...props.data,
-            phaserGame: phaserGameSignal.value,
-        } as TData & ReactiveScenePhaserData;
+            phaserGame: phaserGameSignal,
+            sceneController: ctx.sceneController,
+        };
 
-        game.scene.add(props.sceneKey, props.scene, props.autoStart, initData);
-        sceneSignal.value = game.scene.getScene(props.sceneKey);
+        // 注册场景但不启动
+        if (!game.scene.getScene(props.sceneKey)) {
+            game.scene.add(props.sceneKey, props.scene, false, initData);
+        }
+        sceneSignal.value = props.scene;
+        
         return () => {
             sceneSignal.value = undefined;
-            game.scene.remove(props.sceneKey);
+            // 不在这里移除场景，让 SceneController 管理生命周期
         };
     });
 

packages/framework/src/ui/index.ts

@@ -1,5 +1,5 @@
 export { GameUI } from './GameUI';
 export type { GameUIOptions } from './GameUI';
 
-export { PhaserGame, PhaserScene, phaserContext, defaultPhaserConfig, type PhaserGameContext } from './PhaserBridge';
+export { PhaserGame, PhaserScene, phaserContext, defaultPhaserConfig, type PhaserGameContext, type SceneController } from './PhaserBridge';
 export type { PhaserGameProps, PhaserSceneProps } from './PhaserBridge';