add

index.html

@@ -5,6 +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> -->
     <style>
         html,body{
             padding: 0;
@@ -12,10 +14,14 @@
             height: 100vh;
             width: 100vw;
         }
+        body{
+            display: flex;
+        }
         canvas{
             display: block;
             position: absolute;
             inset: 0;
+            margin: auto;
         }
         .loading{
             height: 100%;

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "check": "taze major",
     "dev": "vite --host",
     "build": "vite build"
   },
@@ -11,13 +12,15 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@pixi/sound": "^4.3.0",
+    "@pixi/sound": "^6.0.1",
-    "@tweenjs/tween.js": "^18.6.4",
+    "@pixi/ui": "^2.1.2",
-    "pixi.js": "^6.5.3",
+    "@tweenjs/tween.js": "^25.0.0",
-    "vite": "^2.9.15",
+    "pixi.js": "^8.2.5",
-    "vite-tsconfig-paths": "^3.5.0"
+    "vite": "^5.3.5",
+    "vite-tsconfig-paths": "^4.3.2"
   },
   "devDependencies": {
-    "typescript": "^4.8.3"
+    "@pixi/devtools": "^2.0.1",
+    "typescript": "^5.5.4"
   }
 }

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"
+             }
+          ]
+       }
+    ]
+ }

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)
+        }
+    }
+}

src/Game/Game.ts

@@ -1,17 +1,17 @@
 import {
     autoDetectRenderer,
     Container,
-    AbstractRenderer,
+    Renderer,
     Ticker,
     Loader,
-    utils, Graphics,
 } from "pixi.js";
 import detectOrient from "./detectOrient";
 import { EDirection } from "@/enmu";
+import { initDevtools } from '@pixi/devtools';
 
 export default class Game {
     constructor() {
-        this.init()
+        // this.init()
     }
 
     private static instance: Game = new Game();
@@ -23,33 +23,59 @@ export default class Game {
     }
 
     private _stage: Container;
-    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 ticker(): Ticker {
         return this._ticker;
     }
     public get loader(): Loader {
         return this._loader;
     }
-    public get utils() {
-        return utils;
-    }
 
     public info = {
         width: 0,
         height: 0,
     };
 
+    private screenInfo() {
+        const curDirection = detectOrient();
+        if (curDirection === EDirection.Portrait) {
+            // 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: width,
+                height: height,
+            }
+        }
+        // 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,
+            height: height,
+        }
+    }
+
     getInfo() {
         return this.info;
     }
@@ -60,8 +86,9 @@ export default class Game {
     }
 
     updateView() {
-        let screenWidght = document.documentElement.clientWidth;
+        const screenInfo = this.screenInfo()
-        let screenHeight = document.documentElement.clientHeight;
+        let screenWidght = screenInfo.widght;
+        let screenHeight = screenInfo.height;
         this.renderer.resize(screenWidght, screenHeight);
         let offsetWidth = 0;
         let offsetHeight = 0;
@@ -113,34 +140,40 @@ export default class Game {
         }
     }
 
-    init() {
+    async init() {
-        let screenWidght = document.documentElement.clientWidth;
+        const screenInfo = this.screenInfo()
-        let screenHeight = document.documentElement.clientHeight;
+        let screenWidght = screenInfo.widght;
+        let screenHeight = screenInfo.height;
         const stage = new Container();
-        stage.name = "root";
+        stage.label = "root";
-        let renderer = autoDetectRenderer({
+        let renderer = await autoDetectRenderer({
+            autoDensity: true,
             width: screenWidght,
             height: screenHeight,
             antialias: true,
             backgroundAlpha: 255,
-            resolution: 1,
+            resolution: 2,
             backgroundColor: 0x1d9ce0,
-            forceCanvas: true,
         });
         this._stage = stage;
         this._renderer = renderer;
-        document.body.appendChild(renderer.view);
+        // https://www.cnblogs.com/haqiao/p/12515775.html
+        this.renderer.resize(screenWidght, screenHeight)
+        document.body.appendChild(renderer.canvas);
 
         window.addEventListener("resize", () => {
             this.updateView();
         });
-
+        
-        const ticker = new Ticker();
+        // const ticker = new Ticker();
+        const ticker = Ticker.shared; // 单例
         ticker.autoStart = true;
         this._ticker = ticker;
 
         const loader = new Loader();
         this._loader = loader;
+        
+        initDevtools({ stage, renderer });
     }
 
     render() {

src/Game/Position.ts

@@ -0,0 +1,26 @@
+import { gameManager } from "@/Game";
+import { PointData } from "pixi.js";
+
+class Position {
+    static instance: Position = null
+    private constructor() { }
+    static getInstance() {
+        if (Position.instance == null) {
+            Position.instance = new Position
+        }
+        return Position.instance
+    }
+
+    get(xType: "center", yType: "center", offset?: Partial<PointData>): PointData {
+        let x, y
+        if (xType === 'center') {
+            x = gameManager.getInfo().width / 2 + (offset?.x ?? 0)
+        }
+        if (yType === 'center') {
+            y = gameManager.getInfo().height / 2 + (offset?.y ?? 0)
+        }
+        return { x, y }
+    }
+}
+
+export default Position.getInstance()

src/Game/Sound.ts

@@ -1,13 +1,17 @@
 import { sound } from "@pixi/sound";
-import { LoaderResource } from "pixi.js";
+// import { LoaderResource } from "pixi.js";
 
-
+sound.add('my-sound', {
-export function addSound(e: LoaderResource) {
+    url: "/bg.mp3",
-    console.log(e);
+    singleInstance: true,
-    sound.add(e.name, {
+    autoPlay: false,
-        source: e.data,
+});
-        singleInstance: true,
+// export function addSound(e: LoaderResource) {
-        autoPlay: false,
+//     console.log(e);
-    });
+//     sound.add(e.name, {
-}
+//         source: e.data,
+//         singleInstance: true,
+//         autoPlay: false,
+//     });
+// }
 export default sound;

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,10 +29,16 @@ 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]){
-            throw new Error("不存在该舞台")
+            throw new Error("不存在该舞台: " + name)
         }
         let curStage = this._stages[name];
         this.curStage = curStage
@@ -44,12 +51,12 @@ 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){
+    changeStage(name: string, opts?: {isHolderLast?: boolean}){
         if(!this._stages[name]){
-            throw new Error("不存在该舞台")
+            throw new Error("不存在该舞台: " + name)
         }
         if(!this.curStage){
             console.warn("请先初始化一个场景")
@@ -57,32 +64,55 @@ export default class Stage {
         }
         let lastStage = this.curStage
         if(lastStage&&lastStage.type === EP.Normal){
-            this.gameManager.stage.removeChild(lastStage.stage)
+            if(opts?.isHolderLast) {
+                lastStage.stage.visible = false
+                // @ts-ignore
+                lastStage.stage.$isHolderLast = opts.isHolderLast
+            } else {
+                lastStage.stage.destroy({
+                    children: true
+                })
+                this.gameManager.stage.removeChild(lastStage.stage)
+            }
         }else if(lastStage&&lastStage.type === EP.Resident){
             lastStage.stage.visible = false
         }
         let curStage = this._stages[name];
-        if(curStage && typeof curStage === "string"){
+        if(curStage && typeof curStage === "string" && curStage === "已销毁"){
             this.create(name, EP.Normal)
             curStage = this._stages[name]
             console.log(curStage);
-            
         }
         this.curStage = curStage
         if(curStage&&curStage.type === EP.Normal){
-            this.gameManager.stage.addChild(curStage.stage)
+            // @ts-ignore
+            if(curStage.stage.$isHolderLast) {
+                curStage.stage.visible = true
+            } else {
+                this.gameManager.stage.addChild(curStage.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){
+        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("最好换过一个名字")
         }
@@ -97,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

src/Game/index.ts

@@ -1,74 +1,150 @@
 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";
-import TWEEN from "@tweenjs/tween.js";
 
 const gameManager = Game.getInstance();
 const stageManager = Stage.getInstance();
 
-const windows: Record<string, IWindow>= {}
+const windows: Record<string, IWindow> = {}
 const residentList: IWindow[] = []
 
-function defineLoadResource(resources: {name: string, url: string, callback?: LoaderResource.OnCompleteSignal}[]) {
+function defineWindow(name: string, abstractClass: Constructor<IWindow>, type?: EP): any
-    return resources
+function defineWindow(abstractClass: Constructor<IWindow>, type?: EP): any
-}
+function defineWindow(name: string | Constructor<IWindow>, abstractClass?: Constructor<IWindow> | EP, type?: EP) {
-
+    if (typeof name === "string") {
-function defineWindow(name: string, abstractClass: Constructor<IWindow>, type?: EP) {
+        return { name, abstractClass, type }
-    return { name, abstractClass, type}
+    }
+    return { abstractClass: name, type: abstractClass }
 }
 
-const t = import.meta.globEager("../stages/**/page_*.ts");
+function initStage() {
-for (const tKey in t) {
+    const t = import.meta.glob("../stages/**/page_*.ts", { eager: true });
-    const mod = t[tKey].default || t[tKey]
+    for (const tKey in t) {
-    const {name, abstractClass, type} = mod as ReturnType<typeof defineWindow>
+        const mod = (t[tKey] as any).default || t[tKey]
-    const stage = stageManager.getStage(name, type);
+        const [_, tKeyName] = tKey.match(/page_(.*?)\.ts$/)
-    const stageClass = new abstractClass(stage)
+        const { name, abstractClass, type } = mod as ReturnType<typeof defineWindow>
-    if(EP.Resident === type) {
+        // stageManager.getInitStage(name || tKeyName, type);
-        residentList.push(stageClass)
+        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
     }
-    windows[name] = stageClass
+    // @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;
+    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;
+    lateUpdate?(dt: number, name: string, ticker: Ticker): void;
-    update?(dt: number, name: string): 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) => {
+    stageManager.watchStageChange(async (stage, lastStage) => {
-        if (lastStage && lastStage.type === EP.Normal) {
-            let lastWindow = windows[lastStage.name];
-            lastWindow.onUnLoad && lastWindow.onUnLoad();
-        }
         if (stage && stage.type === EP.Normal) {
             let curWindow = windows[stage.name];
-            curWindow.onLoad && curWindow.onLoad();
+            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.stage = stage.stage)
+            if (!curWindow._initAssets) {
+                await curWindow.loadBundle?.()
+                curWindow._initAssets = true
+            }
+            if (!curWindow._initLayout || !isSameStage) {
+                // console.log("不同的舞台");
+                await curWindow.layout?.()
+                curWindow._initLayout = true
+            }
+            curWindow.onLoad && await curWindow.onLoad();
+            console.log(curWindow);
+            console.log(windows);
+            console.log(stageManager);
         }
     });
-    residentList.forEach((v) => v.onLoad && v.onLoad());
+    (async () => {
-    gameManager.ticker.add((dt: number) => {
+        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];
-        TWEEN.update();
+        if (!curWindow.stage) return;
-        residentList.forEach((v) => v.update && v.update(dt, v.stage.name));
+        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 &&
-        curWindow.update &&
+            curWindow.update &&
-        curWindow.update(dt, curWindow.stage.name);
+            await curWindow.update(dt, curWindow.stage.label, ticker);
         gameManager.render();
         stageManager.curStage &&
-        curWindow &&
+            curWindow &&
-        curWindow.lateUpdate &&
+            curWindow.lateUpdate &&
-        curWindow.lateUpdate(dt, curWindow.stage.name);
+            await curWindow.lateUpdate(dt, curWindow.stage.label, ticker);
-        residentList.forEach((v) => v.lateUpdate && v.lateUpdate(dt, v.stage.name));
+        for (let i = 0; i < residentList.length; i++) {
+            const v = residentList[i];
+            v.update && await v.lateUpdate && v.lateUpdate(dt, v.stage.label, ticker)
+        }
     });
 }
 
@@ -76,7 +152,6 @@ export {
     initGame,
     gameManager,
     stageManager,
-    defineLoadResource,
     defineWindow,
     windows,
     residentList,

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;
+}

src/components/Button.ts

@@ -1,66 +1,159 @@
-import { Text, Graphics, Container, TextStyle } from "pixi.js";
+import { Text, Graphics, Container, TextStyle, NineSlicePlane, Texture, NineSliceSprite, Ticker } from "pixi.js";
 
 interface IOpts {
     text: string;
+    autoUpdate: Boolean;
+    bg: Texture;
+    pressBg: Texture;
+    position: null | any;
     click(): void;
 }
 
 const defaultOpts: IOpts = {
+    autoUpdate: true,
     text: "",
-    click() {},
+    bg: null,
+    position: null,
+    pressBg: null,
+    click() { },
 };
 
-export default function Button(opts: Partial<IOpts>) {
+function getConfig() {
-    let curOpts: Partial<IOpts> = {};
+    return Object.assign({}, defaultOpts)
-    (Object.keys(defaultOpts) as (keyof IOpts)[]).forEach((key) => {
+}
-        if (opts[key] != undefined) {
+
-            curOpts[key] = opts[key];
+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;
+            }
+        });
+
+        this._comp = new Container();
+        this._comp.cursor = 'pointer';
+        this._comp.interactive = true;
+
+        if (!this.config.bg) {
+            this.createRect()
+            this._comp.addChild(this.bgRect)
         } else {
-            curOpts[key] = defaultOpts[key];
+            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);
+    }
 
-    let textStyle = new TextStyle({
+    updateView() {
-        fontFamily: "Arial",
+        if(this._comp.destroyed)  return
-        fontSize: 50,
+        let width = this.textObj.width + this.padding.x;
-        fill: 0xffffff,
+        let height = this.textObj.height + this.padding.y;
-        align: "center",
+        this._comp.pivot.set(width / 2, height / 2)
-    });
+        this.textObj.x = this.padding.x / 2;
-    let textStr = new Text(curOpts.text, textStyle);
+        this.textObj.y = this.padding.y / 2 - 2;
-    let xPadding = 60;
-    let yPadding = 40;
 
-    let button = new Container();
+        if (this.bgRect) {
-    let width = textStr.width + xPadding;
+            this.bgRect.rect(0, 0, width, height);
-    let height = textStr.height + yPadding;
+            this.bgRect.fill(0xff0000);
-    
+        }
-    textStr.x = xPadding / 2;
+        if (this.bgNine) {
-    textStr.y = yPadding / 2;
+            this.bgNine.width = width
+            this.bgNine.height = height
+        }
 
-    const rect = new Graphics();
+        if (this.config.position) {
-    rect.name = "rect";
+            this._comp.position = this.config.position()
-    rect.beginFill(0xff0000);
+        }
-    rect.drawRect(0, 0, width, height);
+    }
-    rect.endFill();
-    rect.interactive = true;
-    rect.buttonMode = true;
 
-    button.addChild(rect);
+    createNine() {
-    button.addChild(textStr);
+        this.bgNine = new NineSliceSprite({
-    button.x = 100;
+            texture: this.config.bg,
-    button.y = 50;
+            leftWidth: 10,
-    button.interactive = true;
+            topHeight: 10,
-    button.on("touchstart", () => {
+            rightWidth: 10,
-        button.alpha = 0.8;
+            bottomHeight: 10,
-    });
+        });
-    button.on("touchend", () => {
+        this.bgNine.cursor = 'pointer';
-        // 点击成功
+        this.bgNine.label = "nine-pic"
-        console.log("success");
+        this.bgNine.interactive = true;
-        curOpts.click();
+        // plane9.buttonMode = true;
-        button.alpha = 1;
+    }
-    });
+
-    button.on("touchendoutside", () => {
+    createRect() {
-        button.alpha = 1;
+        this.bgRect = new Graphics();
-    });
+        this.bgRect.label = "rect";
-    return button;
+        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

src/main.ts

@@ -1,20 +1,32 @@
+import { Assets } from "pixi.js";
 import { EDirection } from "./enmu";
-import { gameManager, initGame, stageManager, windows } from "./Game";
+import { gameManager, initGame, stageManager } from "./Game";
-import { addSound } from "./Game/Sound";
+import Game from "./Game/Game";
+import { initAssets } from "./Game/Assets";
 
-console.log();
+// 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
+// gameManager.loader.onProgress.add((loader) => {
-    .add("my-sound", "/bg.mp3", (e) => addSound(e))
+//     console.log(loader.progress);
-    .add("bg", "/bg.png")
+// });
-    .load();
+// gameManager.loader.onComplete.once((loader) => {
-gameManager.loader.onProgress.add((loader) => {
+//     console.log(loader.resources);
-    console.log(loader.progress);
+//     initGame();
-});
+//     gameManager.setDirection(EDirection.Landscape);
-gameManager.loader.onComplete.once((loader) => {
+//     stageManager.initStage("init");
-    console.log(loader.resources);
+// });
-    initGame();
-    gameManager.setDirection(EDirection.Portrait);
-    stageManager.initStage("loading");
 
-});
+setTimeout(() => {
+    ;(async ()=>{
+        await initAssets();
+        await Game.getInstance().init()
+        initGame();
+        gameManager.setDirection(EDirection.Landscape);
+    })()
+}, 200);

src/stages/_global/page_0global.ts

@@ -0,0 +1,44 @@
+import { Button } from "@/components/Button";
+import { EP } from "@/enmu";
+import { defineWindow } from "@/Game";
+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 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);
+            
+        }
+        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() {
+        }
+    },
+    EP.Resident
+);

src/stages/page_control.ts

@@ -1,26 +0,0 @@
-import { EP } from "@/enmu";
-import { defineWindow } from "@/Game";
-import { Container, Loader } from "pixi.js";
-import { addSound } from "@/Game/Sound";
-
-const loader = new Loader().add("my-sound", "/bg.mp3", (e) => addSound(e));
-
-export default defineWindow("control", class {
-    stage: Container = null;
-    loader: Loader = loader;
-
-    constructor(stage: Container) {
-        this.stage = stage;
-    }
-
-    onLoad() {
-        console.log("onLoad control");
-    }
-
-    onUnLoad() {
-        console.log("onUnLoad control");
-    }
-
-    update() {
-    }
-}, EP.Resident);