diff --git a/bun.lockb b/bun.lockb
index 53fb67f..ebbfc85 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/index.html b/index.html
index ae2ff5a..ac18f26 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,8 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
-    <script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script>
-    <script>eruda.init();</script>
+    <!-- <script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script>
+    <script>eruda.init();</script> -->
     <style>
         html,body{
             padding: 0;
diff --git a/package.json b/package.json
index b8a45ff..7ebe7b6 100644
--- a/package.json
+++ b/package.json
@@ -12,13 +12,15 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@pixi/sound": "^4.3.0",
-    "@tweenjs/tween.js": "^18.6.4",
-    "pixi.js": "^6.5.3",
-    "vite": "^2.9.15",
-    "vite-tsconfig-paths": "^3.5.0"
+    "@pixi/sound": "^6.0.1",
+    "@pixi/ui": "^2.1.2",
+    "@tweenjs/tween.js": "^25.0.0",
+    "pixi.js": "^8.2.5",
+    "vite": "^5.3.5",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "devDependencies": {
-    "typescript": "^4.8.3"
+    "@pixi/devtools": "^2.0.1",
+    "typescript": "^5.5.4"
   }
 }
diff --git a/public/controller_prompt_bg.png b/public/controller_prompt_bg.png
new file mode 100644
index 0000000..a55828a
Binary files /dev/null and b/public/controller_prompt_bg.png differ
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..b48a360
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,29 @@
+{
+    "bundles":[
+       {
+          "name":"load-screen",
+          "assets":[
+             {
+                "alias":"cbg",
+                "src":"/controller_prompt_bg.png"
+             },
+             {
+                "alias":"bg",
+                "src":"/bg.png"
+             },
+             {
+                "alias":"dnf",
+                "src":"https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png"
+             },
+             {
+                "alias":"btn-bg",
+                "src":"/assets/images/button_square_depth_gloss.png"
+             },
+             {
+                "alias":"btn-bg-press",
+                "src":"/assets/images/button_square_depth_gradient.png"
+             }
+          ]
+       }
+    ]
+ }
\ No newline at end of file
diff --git a/src/Game/Assets.ts b/src/Game/Assets.ts
new file mode 100644
index 0000000..c4e7cd9
--- /dev/null
+++ b/src/Game/Assets.ts
@@ -0,0 +1,45 @@
+import { Assets } from "pixi.js";
+
+
+export async function initAssets() {
+    await Assets.init({ manifest: "/manifest.json" })
+}
+
+const catchMap = new Map()
+
+export async function loadAsset(name: string, cb?: (progress: number) => void) {
+    const check = () => {
+        if (catchMap.has(name)) {
+            const rr = catchMap.get(name)
+            rr.count++
+            console.log(2211);
+            catchMap.set(name, rr)
+            cb?.(1)
+            return rr.data
+        }
+    }
+    check()
+    const res = await Assets.loadBundle(name, (progress: number) => {
+        cb?.(progress)
+    })
+    let r = check()
+    if (r) return r
+    catchMap.set(name, {
+        data: res,
+        count: 1
+    })
+    return res
+}
+/**
+ * 没有场景加载时方会卸载
+ */
+export async function unLoadAsset(name: string) {
+    if (catchMap.has(name)) {
+        const rr = catchMap.get(name)
+        rr.count--
+        if (rr.count == 0) {
+            await Assets.unloadBundle(name)
+            catchMap.delete(name)
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/Game/Game.ts b/src/Game/Game.ts
index 0ad81f1..599752e 100644
--- a/src/Game/Game.ts
+++ b/src/Game/Game.ts
@@ -1,18 +1,17 @@
 import {
     autoDetectRenderer,
     Container,
-    AbstractRenderer,
+    Renderer,
     Ticker,
     Loader,
-    utils, Graphics,
 } from "pixi.js";
 import detectOrient from "./detectOrient";
 import { EDirection } from "@/enmu";
-import TWEEN from "@tweenjs/tween.js";
+import { initDevtools } from '@pixi/devtools';
 
 export default class Game {
     constructor() {
-        this.init()
+        // this.init()
     }
 
     private static instance: Game = new Game();
@@ -24,34 +23,23 @@ export default class Game {
     }
 
     private _stage: Container;
-    private _tween: typeof TWEEN;
-    private _renderer: AbstractRenderer;
+    private _renderer: Renderer;
     private _ticker: Ticker;
     private _loader: Loader;
     private direction: EDirection = EDirection.Portrait;
 
-    public get renderer(): AbstractRenderer {
+    public get renderer(): Renderer {
         return this._renderer;
     }
     public get stage(): Container {
         return this._stage;
     }
-    public get tween(): typeof TWEEN {
-        if(!this._tween) {
-            this._tween = TWEEN
-        }
-        return this._tween;
-    }
-
     public get ticker(): Ticker {
         return this._ticker;
     }
     public get loader(): Loader {
         return this._loader;
     }
-    public get utils() {
-        return utils;
-    }
 
     public info = {
         width: 0,
@@ -61,14 +49,26 @@ export default class Game {
     private screenInfo() {
         const curDirection = detectOrient();
         if (curDirection === EDirection.Portrait) {
-            const width = document.documentElement.clientWidth * 1136 / 640
-            const height = document.documentElement.clientWidth
+            // const width = document.documentElement.clientWidth * 1136 / 640
+            // const height = document.documentElement.clientWidth
+            // return {
+            //     widght: height,
+            //     height: width,
+            // }
+            const width = document.documentElement.clientWidth
+            const height = document.documentElement.clientHeight
             return {
-                widght: height,
-                height: width,
+                widght: width,
+                height: height,
             }
         }
-        const width = document.documentElement.clientHeight * 1136 / 640
+        // const width = document.documentElement.clientHeight * 1136 / 640
+        // const height = document.documentElement.clientHeight
+        // return {
+        //     widght: width,
+        //     height: height,
+        // }
+        const width = document.documentElement.clientWidth
         const height = document.documentElement.clientHeight
         return {
             widght: width,
@@ -140,13 +140,13 @@ export default class Game {
         }
     }
 
-    init() {
+    async init() {
         const screenInfo = this.screenInfo()
         let screenWidght = screenInfo.widght;
         let screenHeight = screenInfo.height;
         const stage = new Container();
-        stage.name = "root";
-        let renderer = autoDetectRenderer({
+        stage.label = "root";
+        let renderer = await autoDetectRenderer({
             autoDensity: true,
             width: screenWidght,
             height: screenHeight,
@@ -154,13 +154,12 @@ export default class Game {
             backgroundAlpha: 255,
             resolution: 2,
             backgroundColor: 0x1d9ce0,
-            forceCanvas: true,
         });
         this._stage = stage;
         this._renderer = renderer;
         // https://www.cnblogs.com/haqiao/p/12515775.html
         this.renderer.resize(screenWidght, screenHeight)
-        document.body.appendChild(renderer.view);
+        document.body.appendChild(renderer.canvas);
 
         window.addEventListener("resize", () => {
             this.updateView();
@@ -173,6 +172,8 @@ export default class Game {
 
         const loader = new Loader();
         this._loader = loader;
+        
+        initDevtools({ stage, renderer });
     }
 
     render() {
diff --git a/src/Game/Position.ts b/src/Game/Position.ts
index ae00020..3738d1e 100644
--- a/src/Game/Position.ts
+++ b/src/Game/Position.ts
@@ -1,5 +1,5 @@
 import { gameManager } from "@/Game";
-import { IPointData } from "pixi.js";
+import { PointData } from "pixi.js";
 
 class Position {
     static instance: Position = null
@@ -11,13 +11,13 @@ class Position {
         return Position.instance
     }
 
-    get(xType: "center", yType: "center", offset: Partial<IPointData>): IPointData {
+    get(xType: "center", yType: "center", offset?: Partial<PointData>): PointData {
         let x, y
         if (xType === 'center') {
-            x = gameManager.getInfo().width / 2 + (offset.x ?? 0)
+            x = gameManager.getInfo().width / 2 + (offset?.x ?? 0)
         }
         if (yType === 'center') {
-            y = gameManager.getInfo().height / 2 + (offset.y ?? 0)
+            y = gameManager.getInfo().height / 2 + (offset?.y ?? 0)
         }
         return { x, y }
     }
diff --git a/src/Game/Stage.ts b/src/Game/Stage.ts
index 4b0b6d3..81c22b3 100644
--- a/src/Game/Stage.ts
+++ b/src/Game/Stage.ts
@@ -1,6 +1,7 @@
 import { EP } from "@/enmu";
 import { Container } from "pixi.js";
 import Game from "./Game";
+import { windows } from ".";
 
 type TStage = {
     type: EP,
@@ -28,6 +29,12 @@ export default class Stage {
     watchStageChange(cb: (stage: TStage, lastStage?:TStage)=>void){
         this._wscb.push(cb)
     }
+    async runStageChange(stage: TStage, lastStage?: TStage){
+        for (let i = 0; i < this._wscb.length; i++) {
+            const cb = this._wscb[i];
+            await cb(stage, lastStage)
+        }
+    }
 
     initStage(name: string){
         if(!this._stages[name]){
@@ -44,7 +51,7 @@ export default class Stage {
         }else if(curStage&&curStage.type === EP.Resident){
             curStage.stage.visible = true
         }
-        this._wscb.forEach(v=>v(curStage))
+        this.runStageChange(curStage)
     }
     
     changeStage(name: string, opts?: {isHolderLast?: boolean}){
@@ -61,7 +68,12 @@ export default class Stage {
                 lastStage.stage.visible = false
                 // @ts-ignore
                 lastStage.stage.$isHolderLast = opts.isHolderLast
-            } else this.gameManager.stage.removeChild(lastStage.stage)
+            } else {
+                lastStage.stage.destroy({
+                    children: true
+                })
+                this.gameManager.stage.removeChild(lastStage.stage)
+            }
         }else if(lastStage&&lastStage.type === EP.Resident){
             lastStage.stage.visible = false
         }
@@ -82,15 +94,25 @@ export default class Stage {
         }else if(curStage&&curStage.type === EP.Resident){
             curStage.stage.visible = true
         }
-        this._wscb.forEach(v=>v(curStage, lastStage))
+        this.runStageChange(curStage, lastStage)
 
         if(lastStage&&lastStage.type === EP.Normal && !opts?.isHolderLast){
             lastStage.stage.destroy()
             this._stages[lastStage.name] = "已销毁" as any
         }
     }
+    
+    getStage(name: string): Container{
+        return this._stages[name].stage
+    }
+
+    checkStageMustExist(name: string, type: EP = EP.Normal){
+        if(!this._stages[name]){
+            this.create(name, type)
+        }
+    }
 
-    getStage(name: string, type: EP = EP.Normal): Container{
+    getInitStage(name: string, type: EP = EP.Normal): Container{
         if(name === "root"){
             throw new Error("最好换过一个名字")
         }
@@ -105,14 +127,14 @@ export default class Stage {
     
     private create(name: string, type: EP = EP.Normal): Container{
         const stage = new Container();
-        stage.name = name
+        stage.label = name
         this._stages[name] = {
             type: type,
             stage: stage,
             name: name
         } 
         if(type === EP.Resident){
-            stage.visible = false
+            stage.visible = true
             this.gameManager.stage.addChild(stage)
         }
         return stage
diff --git a/src/Game/index.ts b/src/Game/index.ts
index 5fec482..1ea7fc3 100644
--- a/src/Game/index.ts
+++ b/src/Game/index.ts
@@ -1,6 +1,6 @@
 import Game from "./Game";
 import Stage from "./Stage";
-import { Container, LoaderResource, Loader } from "pixi.js";
+import { Container, Ticker } from "pixi.js";
 import * as PIXI from "pixi.js";
 import { EP } from "@/enmu";
 
@@ -10,10 +10,6 @@ const stageManager = Stage.getInstance();
 const windows: Record<string, IWindow> = {}
 const residentList: IWindow[] = []
 
-function defineLoadResource(resources: { name: string, url: string, callback?: LoaderResource.OnCompleteSignal }[]) {
-    return resources
-}
-
 function defineWindow(name: string, abstractClass: Constructor<IWindow>, type?: EP): any
 function defineWindow(abstractClass: Constructor<IWindow>, type?: EP): any
 function defineWindow(name: string | Constructor<IWindow>, abstractClass?: Constructor<IWindow> | EP, type?: EP) {
@@ -23,71 +19,132 @@ function defineWindow(name: string | Constructor<IWindow>, abstractClass?: Const
     return { abstractClass: name, type: abstractClass }
 }
 
-const t = import.meta.globEager("../stages/**/page_*.ts");
-for (const tKey in t) {
-    const mod = t[tKey].default || t[tKey]
-    const [_, tKeyName] = tKey.match(/page_(.*?)\.ts$/)
-    const { name, abstractClass, type } = mod as ReturnType<typeof defineWindow>
-    const stage = stageManager.getStage(name || tKeyName, type);
-    const stageClass = new abstractClass(stage)
-    stageClass.bindStage(stage)
-    stageClass._initLayout = false
-    stageClass.$name = name || tKeyName
-    if (EP.Resident === type) {
-        residentList.push(stageClass)
-    } else windows[name || tKeyName] = stageClass
+function initStage() {
+    const t = import.meta.glob("../stages/**/page_*.ts", { eager: true });
+    for (const tKey in t) {
+        const mod = (t[tKey] as any).default || t[tKey]
+        const [_, tKeyName] = tKey.match(/page_(.*?)\.ts$/)
+        const { name, abstractClass, type } = mod as ReturnType<typeof defineWindow>
+        // stageManager.getInitStage(name || tKeyName, type);
+        const stageClass = new abstractClass()
+        if ((name || tKeyName) == "init") {
+            setTimeout(() => {
+                // 延迟，等其他逻辑完成之后再执行
+                stageManager.checkStageMustExist(name || tKeyName, type)
+                stageManager.initStage(name || tKeyName)
+            }, 0);
+        }
+        stageClass.changeStage = (name: string, opts?: { isHolderLast?: boolean }) => {
+            stageManager.checkStageMustExist(name, type)
+            stageManager.changeStage(name, opts)
+        }
+        stageClass._type = type
+        stageClass._initLayout = false
+        stageClass.$name = name || tKeyName
+        if (EP.Resident === type) {
+            stageClass.stage = stageManager.getInitStage(name || tKeyName, type)
+            residentList.push(stageClass)
+        } else windows[name || tKeyName] = stageClass
+    }
+    // @ts-ignore
+    residentList.sort((a, b) => a.$name.localeCompare(b.$name, 'en'))
+
 }
-// @ts-ignore
-residentList.sort((a, b) => a.$name.localeCompare(b.$name, 'en'))
 
 type Constructor<T> = new (...args: any[]) => T;
-interface IWindow {
+export interface IWindow {
+    _type?: EP;
     _initLayout?: Boolean;
+    _initAssets?: Boolean;
     stage: Container;
-    loader?: Loader;
-    bindStage?(stage: Container): void;
+    components: Record<string, any>;
+    changeStage?(name: string, opts?: { isHolderLast?: boolean }): void;
+    loadBundle?(): void;
+    unLoadBundle?(): void;
     layout?(): void;
     onLoad?(): void;
     onUnLoad?(): void;
-    lateUpdate?(dt: number, name: string): void;
-    update?(dt: number, name: string): void;
+    lateUpdate?(dt: number, name: string, ticker: Ticker): void;
+    update?(dt: number, name: string, ticker: Ticker): void;
+}
+
+export function GG(name: string){
+    console.log(windows);
+    console.log(residentList);
+    const win = windows[name]
+    return win
 }
 
 function initGame() {
+    initStage()
+
     // 场景切换监听
-    stageManager.watchStageChange((stage, lastStage) => {
-        if (lastStage && lastStage.type === EP.Normal) {
-            let lastWindow = windows[lastStage.name];
-            lastWindow.onUnLoad && lastWindow.onUnLoad();
-        }
+    stageManager.watchStageChange(async (stage, lastStage) => {
         if (stage && stage.type === EP.Normal) {
             let curWindow = windows[stage.name];
+            if (lastStage && lastStage.type === EP.Normal) {
+                let lastWindow = windows[lastStage.name];
+                // @ts-ignore
+                if (lastWindow._initAssets && lastWindow.stage && !lastWindow.stage.$isHolderLast) {
+                    await lastWindow.unLoadBundle?.()
+                    lastWindow._initAssets = false
+                }
+                lastWindow.onUnLoad && await lastWindow.onUnLoad();
+                lastWindow.stage = stageManager.getStage(lastStage.name)
+            }
             const isSameStage = curWindow.stage === stage.stage
-            !isSameStage && curWindow.bindStage(stage.stage)
-            if(!curWindow._initLayout || !isSameStage) {
+            !isSameStage && (curWindow.stage = stage.stage)
+            if (!curWindow._initAssets) {
+                await curWindow.loadBundle?.()
+                curWindow._initAssets = true
+            }
+            if (!curWindow._initLayout || !isSameStage) {
                 // console.log("不同的舞台");
-                curWindow.layout?.()
+                await curWindow.layout?.()
                 curWindow._initLayout = true
             }
-            curWindow.onLoad && curWindow.onLoad();
+            curWindow.onLoad && await curWindow.onLoad();
+            console.log(curWindow);
+            console.log(windows);
+            console.log(stageManager);
         }
     });
-    residentList.forEach((v) => v.onLoad && v.onLoad());
-    gameManager.ticker.add((dt: number) => {
+    (async () => {
+        for (let i = 0; i < residentList.length; i++) {
+            const v = residentList[i];
+            if (!v._initAssets) {
+                await v.loadBundle?.()
+                v._initAssets = true
+            }
+            if (!v._initLayout) {
+                await v.layout?.()
+                v._initLayout = true
+            }
+            v.onLoad && await v.onLoad()
+        }
+    })()
+    gameManager.ticker.add(async (ticker: Ticker) => {
+        const dt = ticker.deltaTime
         if (!stageManager.curStage) return;
         let curWindow = windows[stageManager.curStage.name];
-        gameManager.tween.update();
-        residentList.forEach((v) => v.update && v.update(dt, v.stage.name));
+        if (!curWindow.stage) return;
+        for (let i = 0; i < residentList.length; i++) {
+            const v = residentList[i];
+            v.update && await v.update(dt, v.stage.label, ticker)
+        }
         stageManager.curStage &&
             curWindow &&
             curWindow.update &&
-            curWindow.update(dt, curWindow.stage.name);
+            await curWindow.update(dt, curWindow.stage.label, ticker);
         gameManager.render();
         stageManager.curStage &&
             curWindow &&
             curWindow.lateUpdate &&
-            curWindow.lateUpdate(dt, curWindow.stage.name);
-        residentList.forEach((v) => v.lateUpdate && v.lateUpdate(dt, v.stage.name));
+            await curWindow.lateUpdate(dt, curWindow.stage.label, ticker);
+        for (let i = 0; i < residentList.length; i++) {
+            const v = residentList[i];
+            v.update && await v.lateUpdate && v.lateUpdate(dt, v.stage.label, ticker)
+        }
     });
 }
 
@@ -95,7 +152,6 @@ export {
     initGame,
     gameManager,
     stageManager,
-    defineLoadResource,
     defineWindow,
     windows,
     residentList,
diff --git a/src/Game/type.ts b/src/Game/type.ts
new file mode 100644
index 0000000..f05b5f5
--- /dev/null
+++ b/src/Game/type.ts
@@ -0,0 +1,21 @@
+import { EP } from "@/enmu";
+import { IWindow } from ".";
+import { Container, Ticker } from "pixi.js";
+
+export abstract class PWindow implements IWindow {
+    components: Record<string, any>;
+    _type?: EP;
+    _initLayout?: Boolean;
+    _initAssets?: Boolean;
+    _layoutChild?: void | any[];
+    stage: Container;
+    loader?: Loader;
+    changeStage?(name: string, opts?: {isHolderLast?: boolean}): void;
+    loadBundle?(): void;
+    unLoadBundle?(): void;
+    layout?(): void;
+    onLoad?(): void;
+    onUnLoad?(): void;
+    lateUpdate?(dt: number, name: string, ticker: Ticker): void;
+    update?(dt: number, name: string, ticker: Ticker): void;
+}
\ No newline at end of file
diff --git a/src/components/Button.ts b/src/components/Button.ts
index b366699..05d3ef8 100644
--- a/src/components/Button.ts
+++ b/src/components/Button.ts
@@ -1,18 +1,20 @@
-import { Text, Graphics, Container, TextStyle, NineSlicePlane, Texture } from "pixi.js";
+import { Text, Graphics, Container, TextStyle, NineSlicePlane, Texture, NineSliceSprite, Ticker } from "pixi.js";
 
 interface IOpts {
     text: string;
-    bg: string;
-    pressBg: string;
+    autoUpdate: Boolean;
+    bg: Texture;
+    pressBg: Texture;
     position: null | any;
     click(): void;
 }
 
 const defaultOpts: IOpts = {
+    autoUpdate: true,
     text: "",
-    bg: "",
+    bg: null,
     position: null,
-    pressBg: "",
+    pressBg: null,
     click() { },
 };
 
@@ -20,85 +22,138 @@ function getConfig() {
     return Object.assign({}, defaultOpts)
 }
 
-export default function Button(opts: Partial<IOpts>) {
-    let curOpts: IOpts = getConfig();
-    ; (Object.keys(defaultOpts) as (keyof IOpts)[]).forEach((key) => {
-        if (opts[key] != undefined) {
-            curOpts[key] = opts[key] as any;
-        }
-    });
+export class Button {
+    config: IOpts
+    _comp: Container
+    textObj: Text
+    bgRect: Graphics
+    bgNine: NineSliceSprite
+    padding = { x: 60, y: 40 }
+    getComp(){
+        return this._comp
+    }
+    constructor(opts: Partial<IOpts>) {
+        this.config = getConfig();
+        ; (Object.keys(defaultOpts) as (keyof IOpts)[]).forEach((key) => {
+            if (opts[key] != undefined) {
+                this.config[key] = opts[key] as any;
+            }
+        });
 
-    let textStyle = new TextStyle({
-        fontFamily: "Arial",
-        fontSize: 30,
-        fill: 0xffffff,
-        align: "center",
-    });
-    let textStr = new Text(curOpts.text, textStyle);
-    let xPadding = 60;
-    let yPadding = 40;
+        this._comp = new Container();
+        this._comp.cursor = 'pointer';
+        this._comp.interactive = true;
 
-    let button = new Container();
-    let width = textStr.width + xPadding;
-    let height = textStr.height + yPadding;
-    // https://www.cnblogs.com/ningmin/p/11412170.html
-    // https://blog.csdn.net/weixin_52919504/article/details/131854745
-    // https://blog.csdn.net/weixin_52919504/article/details/131854745
-    button.pivot.set(width / 2, height / 2)
+        if (!this.config.bg) {
+            this.createRect()
+            this._comp.addChild(this.bgRect)
+        } else {
+            this.createNine()
+            this._comp.addChild(this.bgNine)
+        }
+        this.createText()
+        this._comp.addChild(this.textObj)
+        if (this.config.autoUpdate) {
+            const update = () => {
+                this.updateView()
+            }
+            Ticker.shared.add(update)
+            this._comp.on("destroyed", ()=>{
+                console.log("销毁了");
+                Ticker.shared.remove(update, this)
+            })
+        }
+        const downFN = () => {
+            if (this.config.pressBg && this.bgNine) {
+                this.bgNine.texture = this.config.pressBg
+            } else {
+                this._comp.alpha = 0.8;
+                this._comp.scale = { x: .8, y: .8 }
+            }
+        }
+        this._comp.on("mousedown", downFN);
+        this._comp.on("touchstart", downFN);
+        const upFN = () => {
+            if (this.config.pressBg && this.bgNine) {
+                this.bgNine.texture = this.config.bg
+            } else {
+                this._comp.alpha = 1;
+                this._comp.scale = { x: 1, y: 1 }
+            }
+            this.config.click();
+        }
+        this._comp.on('mouseup', upFN);
+        this._comp.on('touchend', upFN);
+        const upOutsideFN = () => {
+            if (this.config.pressBg) {
+                this.bgNine.texture = this.config.bg
+            } else {
+                this._comp.alpha = 1;
+                this._comp.scale = { x: 1, y: 1 }
+            }
+        }
+        this._comp.on("mouseupoutside", upOutsideFN);
+        this._comp.on("touchendoutside", upOutsideFN);
+    }
 
-    textStr.x = xPadding / 2;
-    textStr.y = yPadding / 2 - 2;
+    updateView() {
+        if(this._comp.destroyed)  return
+        let width = this.textObj.width + this.padding.x;
+        let height = this.textObj.height + this.padding.y;
+        this._comp.pivot.set(width / 2, height / 2)
+        this.textObj.x = this.padding.x / 2;
+        this.textObj.y = this.padding.y / 2 - 2;
 
-    if (!curOpts.bg) {
-        const rect = new Graphics();
-        rect.name = "rect";
-        rect.beginFill(0xff0000);
-        rect.drawRect(0, 0, width, height);
-        rect.endFill();
-        rect.interactive = true;
-        rect.buttonMode = true;
-        button.addChild(rect);
-    } else {
-        const plane9 = new NineSlicePlane(Texture.from(curOpts.bg), 10, 10, 10, 10);
-        plane9.name = "nine-pic"
-        plane9.width = width
-        plane9.height = height
-        plane9.interactive = true;
-        plane9.buttonMode = true;
-        button.addChild(plane9);
-    }
-    button.addChild(textStr);
-    button.interactive = true;
-    if(curOpts.position) {
-        button.position = curOpts.position
-    }
-    button.on("touchstart", () => {
-        if (curOpts.pressBg) {
-            button.getChildByName<NineSlicePlane>("nine-pic").texture = Texture.from(curOpts.pressBg)
-        } else {
-            button.alpha = 0.8;
-            button.scale = { x: .8, y: .8 }
+        if (this.bgRect) {
+            this.bgRect.rect(0, 0, width, height);
+            this.bgRect.fill(0xff0000);
         }
-    });
-    button.on("touchend", () => {
-        // 点击成功
-        console.log("touchend success");
-        if (curOpts.pressBg) {
-            button.getChildByName<NineSlicePlane>("nine-pic").texture = Texture.from(curOpts.bg)
-        } else {
-            button.alpha = 1;
-            button.scale = { x: 1, y: 1 }
+        if (this.bgNine) {
+            this.bgNine.width = width
+            this.bgNine.height = height
         }
-        curOpts.click();
-    });
-    button.on("touchendoutside", () => {
-        console.log("touchendoutside success");
-        if (curOpts.pressBg) {
-            button.getChildByName<NineSlicePlane>("nine-pic").texture = Texture.from(curOpts.bg)
-        } else {
-            button.alpha = 1;
-            button.scale = { x: 1, y: 1 }
+
+        if (this.config.position) {
+            this._comp.position = this.config.position()
         }
-    });
-    return button;
+    }
+
+    createNine() {
+        this.bgNine = new NineSliceSprite({
+            texture: this.config.bg,
+            leftWidth: 10,
+            topHeight: 10,
+            rightWidth: 10,
+            bottomHeight: 10,
+        });
+        this.bgNine.cursor = 'pointer';
+        this.bgNine.label = "nine-pic"
+        this.bgNine.interactive = true;
+        // plane9.buttonMode = true;
+    }
+
+    createRect() {
+        this.bgRect = new Graphics();
+        this.bgRect.label = "rect";
+        this.bgRect.interactive = true;
+        this.bgRect.cursor = 'pointer';
+        // rect.buttonMode = true;
+    }
+
+    createText() {
+        let textStyle = new TextStyle({
+            fontFamily: "Arial",
+            fontSize: 30,
+            fill: 0xffffff,
+            align: "center",
+        });
+        this.textObj = new Text({
+            text: this.config.text,
+            style: textStyle
+        });
+        this.textObj.cursor = 'pointer';
+        this.textObj.label = "text"
+    }
 }
+
+export default Button
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index cf66cda..05e7370 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,21 +1,32 @@
+import { Assets } from "pixi.js";
 import { EDirection } from "./enmu";
-import { gameManager, initGame, stageManager, windows } from "./Game";
-import { addSound } from "./Game/Sound";
+import { gameManager, initGame, stageManager } from "./Game";
+import Game from "./Game/Game";
+import { initAssets } from "./Game/Assets";
 
-gameManager.loader
-    // .add("my-sound", "/bg.mp3", (e) => addSound(e)) // 背景音乐
-    .add("bg", "/bg.png") // 背景图片
-    .add("dnf", "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png") // 背景图片
-    .add("btn-bg", "/assets/images/button_square_depth_gloss.png") // 背景图片
-    .add("btn-bg-press", "/assets/images/button_square_depth_gradient.png") // 背景图片
-    .load();
+// gameManager.loader
+//     // .add("my-sound", "/bg.mp3", (e) => addSound(e)) // 背景音乐
+//     .add("bg", "/bg.png") // 背景图片
+//     .add("dnf", "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png") // 背景图片
+//     .add("btn-bg", "/assets/images/button_square_depth_gloss.png") // 背景图片
+//     .add("btn-bg-press", "/assets/images/button_square_depth_gradient.png") // 背景图片
+//     .load();
 
-gameManager.loader.onProgress.add((loader) => {
-    console.log(loader.progress);
-});
-gameManager.loader.onComplete.once((loader) => {
-    console.log(loader.resources);
-    initGame();
-    gameManager.setDirection(EDirection.Landscape);
-    stageManager.initStage("init");
-});
+// gameManager.loader.onProgress.add((loader) => {
+//     console.log(loader.progress);
+// });
+// gameManager.loader.onComplete.once((loader) => {
+//     console.log(loader.resources);
+//     initGame();
+//     gameManager.setDirection(EDirection.Landscape);
+//     stageManager.initStage("init");
+// });
+
+setTimeout(() => {
+    ;(async ()=>{
+        await initAssets();
+        await Game.getInstance().init()
+        initGame();
+        gameManager.setDirection(EDirection.Landscape);
+    })()
+}, 200);
\ No newline at end of file
diff --git a/src/stages/_global/page_0global.ts b/src/stages/_global/page_0global.ts
index 830761a..8474d8b 100644
--- a/src/stages/_global/page_0global.ts
+++ b/src/stages/_global/page_0global.ts
@@ -1,22 +1,42 @@
+import { Button } from "@/components/Button";
 import { EP } from "@/enmu";
 import { defineWindow } from "@/Game";
-import { Container } from "pixi.js";
+import { loadAsset } from "@/Game/Assets";
+import Position from "@/Game/Position";
+import { PWindow } from "@/Game/type";
+import { Assets, Container } from "pixi.js";
 
 export default defineWindow(
-    class {
-        stage: Container = null;
-
-        constructor(stage: Container) {
-            this.stage = stage;
+    class extends PWindow {
+        btn: Button;
+        async loadBundle() {
+            console.log(this.stage);
+            console.log("加载资源");
+            Assets.add({ alias: 'btn-bgaa', src: '/assets/images/button_square_depth_gloss.png' })
+            Assets.add({ alias: 'btn-bg-pressaa', src: '/assets/images/button_square_depth_gradient.png' })
+            const aa = await Assets.load('btn-bgaa')
+            console.log(aa);
+            
         }
-        bindStage(stage: Container){
-            this.stage = stage;
+        async layout() {
+            this.stage.zIndex = 9999
+            this.btn = new Button({
+                text: "全局",
+                bg: await Assets.load('btn-bgaa'),
+                pressBg: await Assets.load("btn-bg-pressaa"),
+                position: () => Position.get("center", "center", { y: 100, x: 0 })
+            })
+            this.stage.addChild(this.btn._comp)
         }
-
         onLoad() {
             console.log("global page loaded");
         }
-
+        hide() {
+            // this.btn._comp.visible = false
+        }
+        show() {
+            // this.btn._comp.visible = true
+        }
         onUnLoad() {
         }
     },
diff --git a/src/stages/page_init.ts b/src/stages/page_init.ts
index 8f81118..338358f 100644
--- a/src/stages/page_init.ts
+++ b/src/stages/page_init.ts
@@ -1,76 +1,120 @@
-import Button from "@/components/Button";
+import { Button } from "@/components/Button";
 import { gameManager, defineWindow, stageManager } from "@/Game";
 import Position from "@/Game/Position";
 import Sound from "@/Game/Sound";
-import { Container, Sprite, Text, NineSlicePlane, Texture, AnimatedSprite, Rectangle, utils } from "pixi.js";
-
-// defineLoadResource([
-//     { name: "my-sound", url: "/bg.mp3", callback: (e) => addSound(e) },
-//     { name: "bg", url: "/bg.png" },
-// ])
+import { Container, Sprite, Text, NineSlicePlane, Texture, AnimatedSprite, Rectangle, Assets, AssetsBundle, NineSliceSprite, Ticker } from "pixi.js";
+import { PWindow } from "@/Game/type";
+import { loadAsset, unLoadAsset } from "@/Game/Assets";
+// import { Button } from '@pixi/ui';
 
 export default defineWindow(
-    class {
+    class extends PWindow {
         stage: Container = null;
         title: Text; // 标题
+        startBtn: Button; // 标题
         pixie: AnimatedSprite; // 标题
-        bindStage(stage: Container) {
-            this.stage = stage;
+        assets: any; // 标题
+        async loadBundle() {
+            const btn = new Button({
+                text: "加载中",
+                position: () => Position.get("center", "center"),
+            });
+            btn._comp.zIndex = 111111
+            this.stage.addChild(btn._comp);
+            this.assets = await loadAsset("load-screen", (progress: number) => {
+                console.log(progress);
+                btn.textObj.text = "进度：" + progress
+                if (progress == 1) {
+                    this.stage.removeChild(btn._comp)
+                }
+            })
+        }
+        async unLoadBundle() {
+            // await unLoadAsset("load-screen");
+            // this.assets = undefined
         }
         layout() {
-            const bg = new Sprite(Texture.from("bg"));
-            bg.width = gameManager.getInfo().width
-            bg.height = gameManager.getInfo().height
-            this.stage.addChild(bg)
-            this.title = new Text("时间魔法", {
-                fontSize: 80,
-                fill: "red",
-            });
-            this.title.x = gameManager.getInfo().width / 2;
-            this.title.y = gameManager.getInfo().height / 2 - 200;
-            this.title.position = Position.get("center", "center", { y: -200, x: 0 })
-            this.title.anchor.set(0.5, 0.5);
-            this.stage.addChild(this.title);
+            const allChild = []
+            // const bg = new Sprite(this.assets["cbg"]);
+            // bg.width = gameManager.getInfo().width
+            // bg.height = gameManager.getInfo().height
+            // allChild.push(bg)
+            // this.title = new Text("时间魔法", {
+            //     fontSize: 80,
+            //     fill: "red",
+            // });
+            // this.title.x = gameManager.getInfo().width / 2;
+            // this.title.y = gameManager.getInfo().height / 2 - 200;
+            // this.title.position = Position.get("center", "center", { y: -200, x: 0 })
+            // this.title.anchor.set(0.5, 0.5);
+            // this.stage.addChild(this.title);
 
-            const plane9 = new NineSlicePlane(Texture.from("btn-bg"), 10, 10, 10, 10);
+            const plane9 = new NineSliceSprite({
+                texture: this.assets["btn-bg"],
+                leftWidth: 10,
+                topHeight: 10,
+                rightWidth: 10,
+                bottomHeight: 10,
+            });
             plane9.width = 100
             plane9.height = 50
-            this.stage.addChild(plane9);
+            allChild.push(plane9)
 
-            const btn = Button({
-                text: "开始游戏",
-                position: Position.get("center", "center", { y: 200, x: 0 }),
-                bg: "btn-bg",
-                pressBg: "btn-bg-press",
+            this.startBtn = new Button({
+                text: "aaaa",
+                bg: this.assets["btn-bg"],
+                pressBg: this.assets["btn-bg-press"],
+                position: () => Position.get("center", "center", { y: 200, x: 0 }),
                 click: () => {
-                    Sound.play("my-sound")
-                    // new gameManager.tween.Tween(btn.position).interpolation(gameManager.tween.Interpolation.Bezier)
-                    //     .to({ alpha: .2, x: btn.width / 2, y: btn.height / 2 }, 1300)
-                    //     .onComplete(() => {
-                    // stageManager.changeStage("welcome", { isHolderLast: true })
-                    //播放动画精灵
-                    this.pixie.gotoAndPlay(0);
-                    //         })
-                    //         .start()
-                },
-            });
-            this.stage.addChild(btn);
-            console.log(this.stage);
+                    this.changeStage("welcome", { isHolderLast: false })
+                    // this.pixie.gotoAndPlay(0);
+                    // this.startBtn.textObj.text = "1111111111111111111111111111111111111"
+                }
+            })
+            allChild.push(this.startBtn._comp)
+            // console.log(button);
+
+            // this.startBtn = Button({
+            //     text: "开始游戏",
+            //     bg: this.assets["btn-bg"],
+            //     pressBg: this.assets["btn-bg-press"],
+            //     click: () => {
+            //         // Sound.play("my-sound")
+            //         // new gameManager.tween.Tween(btn.position).interpolation(gameManager.tween.Interpolation.Bezier)
+            //         //     .to({ alpha: .2, x: btn.width / 2, y: btn.height / 2 }, 1300)
+            //         //     .onComplete(() => {
+            //         (this.startBtn.getChildByLabel("text") as Text).text = "1111111111111111111111111111111111111111111111111"
+            //         // this.changeStage("welcome", { isHolderLast: false })
+            //         //播放动画精灵
+            //         // this.pixie.gotoAndPlay(0);
+            //         //         })
+            //         //         .start()
+            //     },
+            // });
+            // this.stage.addChild(this.startBtn);
+            // console.log(this.stage);
 
-            let TextureCache = utils.TextureCache;
-            let base = TextureCache["dnf"];
+            let base = this.assets["dnf"];
             //第一个纹理
-            let texture0 = new Texture(base as any)
-            texture0.frame = new Rectangle(0, 0, 80, 143);
+            let texture0 = new Texture({
+                source: base as any,
+                frame: new Rectangle(0, 0, 80, 143)
+            })
             //第二个纹理
-            let texture1 = new Texture(base as any)
-            texture1.frame = new Rectangle(80, 0, 80, 143);
+            let texture1 = new Texture({
+                source: base as any,
+                frame: new Rectangle(80, 0, 80, 143)
+            })
             //第三个纹理
-            let texture2 = new Texture(base as any)
-            texture2.frame = new Rectangle(160, 0, 80, 143);
+            let texture2 = new Texture({
+                source: base as any,
+                frame: new Rectangle(160, 0, 80, 143)
+            })
             //第四个纹理
-            let texture3 = new Texture(base as any)
-            texture3.frame = new Rectangle(240, 0, 80, 143);
+            let texture3 = new Texture({
+                source: base as any,
+                frame: new Rectangle(240, 0, 80, 143)
+            })
 
             //创建纹理数组
             let textures = [texture0, texture1, texture2, texture3];
@@ -80,8 +124,9 @@ export default defineWindow(
             //设置动画精灵的速度
             this.pixie.animationSpeed = 0.1;
             this.pixie.loop = true;
-            this.stage.addChild(this.pixie)
             this.pixie.y = 200
+            allChild.push(this.pixie)
+            this.stage.addChild(...allChild)
         }
         onLoad() {
             console.log("onLoad init");
@@ -92,9 +137,11 @@ export default defineWindow(
             console.log("onUnLoad loading");
         }
 
-        update(dt: number) {
-            this.pixie.update(dt)
-            this.title.rotation -= 0.01 * dt;
+        update(dt: number, name: string, ticker: Ticker) {
+            if (this.pixie) {
+                this.pixie.update(ticker)
+            }
+            // this.title.rotation -= 0.01 * dt;
         }
 
     },
diff --git a/src/stages/welcome/circle.ts b/src/stages/welcome/circle.ts
index 6af75b0..6bd0342 100644
--- a/src/stages/welcome/circle.ts
+++ b/src/stages/welcome/circle.ts
@@ -4,14 +4,13 @@ import { Graphics} from "pixi.js"
 export default new (class Circle{
     render(){
         const circle = new Graphics();
-        circle.name = "circle";
-        circle.beginFill(0xfb6a8f);
-        circle.drawCircle(0, 0, 32);
-        circle.endFill();
+        circle.label  = "circle";
+        circle.circle(0, 0, 32);
+        circle.fill(0xfb6a8f);
         circle.x = 130;
         circle.y = 130;
         circle.interactive = true;
-        circle.buttonMode = true;
+        // circle.buttonMode = true;
         return circle
     }
 })
\ No newline at end of file
diff --git a/src/stages/welcome/page_welcome.ts b/src/stages/welcome/page_welcome.ts
index 7d67e7c..cf2f6d7 100644
--- a/src/stages/welcome/page_welcome.ts
+++ b/src/stages/welcome/page_welcome.ts
@@ -1,44 +1,45 @@
 import Button from "@/components/Button";
-import { gameManager,defineWindow, stageManager } from "@/Game";
+import { gameManager, defineWindow, stageManager } from "@/Game";
 import Sound from "@/Game/Sound";
 import { Container, Graphics, Text } from "pixi.js";
 
 import Circle from "./circle"
+import { PWindow } from "@/Game/type";
+import Position from "@/Game/Position";
 
 
-export default defineWindow("welcome", class{
-    stage:Container = null
-    elements: Record<string, Graphics> = {}
+export default defineWindow("welcome", class extends PWindow {
+    stage: Container = null
     text: any
-    bindStage(stage: Container){
-        this.stage = stage;
-    }
-    layout(){
+    layout() {
         const circle = Circle.render()
         this.stage.addChild(circle)
-        circle.on("touchend", ()=>{
-            stageManager.changeStage("welcome2")
+        circle.on("touchend", () => {
+            this.changeStage("welcome2")
+        })
+        circle.on("mousedown", () => {
+            this.changeStage("welcome2")
         })
-        this.text = new Text("修仙人生日常")
-        
-        this.stage.addChild(this.text)
-        const btn = Button({text: "修仙人生日常"})
-        btn.on("touchend", ()=>{
-            // Sound.play('my-sound');
-            stageManager.changeStage("init")
+        // this.text = new Text({text: "修仙人生日常"})
+
+        // this.stage.addChild(this.text)
+        const btn = new Button({
+            text: "修仙人生日常", position: () => Position.get("center", "center"), click: () => {
+                this.changeStage("init")
+            }
         })
-        this.stage.addChild(btn)
+        this.stage.addChild(btn._comp)
     }
-    onLoad(){
+    onLoad() {
         console.log("onLoad 1");
     }
-    onUnLoad(){
+    onUnLoad() {
         Sound.stop("my-sound")
         console.log("onUnLoad 1");
     }
-    update(){
-        this.text.x = gameManager.getInfo().width-this.text.width
-        this.text.y = gameManager.getInfo().height-this.text.height
-    //     console.log(22);
+    update() {
+        // this.text.x = gameManager.getInfo().width-this.text.width
+        // this.text.y = gameManager.getInfo().height-this.text.height
+        //     console.log(22);
     }
 })
\ No newline at end of file
diff --git a/src/stages/welcome2/page_welcome2.ts b/src/stages/welcome2/page_welcome2.ts
index a43e6b4..1ac1353 100644
--- a/src/stages/welcome2/page_welcome2.ts
+++ b/src/stages/welcome2/page_welcome2.ts
@@ -1,27 +1,28 @@
 import { EP } from "@/enmu";
-import { stageManager, defineWindow } from "@/Game";
+import { stageManager, defineWindow, GG } from "@/Game";
 import { Graphics, Container } from "pixi.js";
+import { PWindow } from "@/Game/type";
 
-const circle = new Graphics();
-circle.name = "circle";
-circle.beginFill(0xfb6a8f);
-circle.drawCircle(0, 0, 32);
-circle.endFill();
-circle.x = 130;
-circle.y = 300;
-circle.interactive = true;
-circle.buttonMode = true;
-circle.on("touchend", () => {
-    circle.x += 10;
-    stageManager.changeStage("welcome")
-})
-
-export default defineWindow("welcome2", class {
-    stage: Container = null
-    bindStage(stage: Container) {
-        this.stage = stage;
-    }
+export default defineWindow("welcome2", class extends PWindow {
     layout() {
+        const circle = new Graphics();
+        circle.label = "circle";
+        circle.circle(0, 0, 32);
+        circle.fill(0xfb6a8f);
+        circle.x = 130;
+        circle.y = 300;
+        circle.interactive = true;
+        // circle.buttonMode = true;
+
+        circle.on("touchend", () => {
+            circle.x += 10;
+            this.changeStage("welcome")
+        })
+        circle.on("mousedown", () => {
+            circle.x += 10;
+            // GG('0global')
+            // this.changeStage("welcome")
+        })
         this.stage.addChild(circle)
     }
     onLoad() {