feat: 增加很多功能

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;

src/Game/Game.ts

@@ -8,6 +8,7 @@ import {
 } from "pixi.js";
 import detectOrient from "./detectOrient";
 import { EDirection } from "@/enmu";
+import TWEEN from "@tweenjs/tween.js";
 
 export default class Game {
     constructor() {
@@ -23,6 +24,7 @@ export default class Game {
     }
 
     private _stage: Container;
+    private _tween: typeof TWEEN;
     private _renderer: AbstractRenderer;
     private _ticker: Ticker;
     private _loader: Loader;
@@ -34,6 +36,12 @@ export default class Game {
     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;
@@ -139,11 +147,12 @@ export default class Game {
         const stage = new Container();
         stage.name = "root";
         let renderer = autoDetectRenderer({
+            autoDensity: true,
             width: screenWidght,
             height: screenHeight,
             antialias: true,
             backgroundAlpha: 255,
-            resolution: 1,
+            resolution: 2,
             backgroundColor: 0x1d9ce0,
             forceCanvas: true,
         });
@@ -164,7 +173,12 @@ export default class Game {
     }
 
     render() {
+        // https://www.cnblogs.com/haqiao/p/12515775.html
         this.renderer.render(this.stage);
+        const screenInfo = this.screenInfo()
+        let screenWidght = screenInfo.widght;
+        let screenHeight = screenInfo.height;
+        this.renderer.resize(screenWidght, screenHeight)
     }
 
     // init(): Application {

src/Game/Position.ts

@@ -0,0 +1,26 @@
+import { gameManager } from "@/Game";
+import { IPointData } 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<IPointData>): IPointData {
+        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/Stage.ts

@@ -31,7 +31,7 @@ export default class Stage {
 
     initStage(name: string){
         if(!this._stages[name]){
-            throw new Error("不存在该舞台")
+            throw new Error("不存在该舞台: " + name)
         }
         let curStage = this._stages[name];
         this.curStage = curStage
@@ -47,9 +47,9 @@ export default class Stage {
         this._wscb.forEach(v=>v(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,26 +57,34 @@ 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 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))
 
-        if(lastStage&&lastStage.type === EP.Normal){
+        if(lastStage&&lastStage.type === EP.Normal && !opts?.isHolderLast){
             lastStage.stage.destroy()
             this._stages[lastStage.name] = "已销毁" as any
         }

src/Game/index.ts

@@ -1,40 +1,52 @@
 import Game from "./Game";
 import Stage from "./Stage";
 import { Container, LoaderResource, Loader } 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 defineLoadResource(resources: { name: string, url: string, callback?: LoaderResource.OnCompleteSignal }[]) {
     return resources
 }
 
-function defineWindow(name: string, abstractClass: Constructor<IWindow>, type?: EP) {
-    return { name, abstractClass, type}
+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) {
+    if (typeof name === "string") {
+        return { name, abstractClass, type }
+    }
+    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 {name, abstractClass, type} = mod as ReturnType<typeof defineWindow>
-    const stage = stageManager.getStage(name, type);
+    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)
-    if(EP.Resident === type) {
+    stageClass.bindStage(stage)
+    stageClass._init = false
+    stageClass.$name = name || tKeyName
+    if (EP.Resident === type) {
         residentList.push(stageClass)
-    }
-    windows[name] = stageClass
+    } else windows[name || tKeyName] = stageClass
 }
-
+// @ts-ignore
+residentList.sort((a, b) => a.$name.localeCompare(b.$name, 'en'))
 
 type Constructor<T> = new (...args: any[]) => T;
 interface IWindow {
+    _init?: Boolean;
     stage: Container;
     loader?: Loader;
+    bindStage?(stage: Container): void;
+    layout?(): void;
     onLoad?(): void;
     onUnLoad?(): void;
     lateUpdate?(dt: number, name: string): void;
@@ -50,24 +62,31 @@ function initGame() {
         }
         if (stage && stage.type === EP.Normal) {
             let curWindow = windows[stage.name];
+            const isSameStage = curWindow.stage === stage.stage
+            !isSameStage && curWindow.bindStage(stage.stage)
             curWindow.onLoad && curWindow.onLoad();
+            if(!curWindow._init || !isSameStage) {
+                console.log("不同的舞台");
+                curWindow.layout?.()
+                curWindow._init = true
+            }
         }
     });
     residentList.forEach((v) => v.onLoad && v.onLoad());
     gameManager.ticker.add((dt: number) => {
         if (!stageManager.curStage) return;
         let curWindow = windows[stageManager.curStage.name];
-        TWEEN.update();
+        gameManager.tween.update();
         residentList.forEach((v) => v.update && v.update(dt, v.stage.name));
         stageManager.curStage &&
-        curWindow &&
-        curWindow.update &&
-        curWindow.update(dt, curWindow.stage.name);
+            curWindow &&
+            curWindow.update &&
+            curWindow.update(dt, curWindow.stage.name);
         gameManager.render();
         stageManager.curStage &&
-        curWindow &&
-        curWindow.lateUpdate &&
-        curWindow.lateUpdate(dt, curWindow.stage.name);
+            curWindow &&
+            curWindow.lateUpdate &&
+            curWindow.lateUpdate(dt, curWindow.stage.name);
         residentList.forEach((v) => v.lateUpdate && v.lateUpdate(dt, v.stage.name));
     });
 }

src/components/Button.ts

@@ -1,28 +1,34 @@
-import { Text, Graphics, Container, TextStyle } from "pixi.js";
+import { Text, Graphics, Container, TextStyle, NineSlicePlane, Texture } from "pixi.js";
 
 interface IOpts {
     text: string;
+    bg: string;
+    pressBg: string;
     click(): void;
 }
 
 const defaultOpts: IOpts = {
     text: "",
-    click() {},
+    bg: "",
+    pressBg: "",
+    click() { },
 };
 
+function getConfig() {
+    return Object.assign({}, defaultOpts)
+}
+
 export default function Button(opts: Partial<IOpts>) {
-    let curOpts: Partial<IOpts> = {};
-    (Object.keys(defaultOpts) as (keyof IOpts)[]).forEach((key) => {
+    let curOpts: IOpts = getConfig();
+    ; (Object.keys(defaultOpts) as (keyof IOpts)[]).forEach((key) => {
         if (opts[key] != undefined) {
-            curOpts[key] = opts[key];
-        } else {
-            curOpts[key] = defaultOpts[key];
+            curOpts[key] = opts[key] as any;
         }
     });
 
     let textStyle = new TextStyle({
         fontFamily: "Arial",
-        fontSize: 50,
+        fontSize: 30,
         fill: 0xffffff,
         align: "center",
     });
@@ -33,34 +39,63 @@ export default function Button(opts: Partial<IOpts>) {
     let button = new Container();
     let width = textStr.width + xPadding;
     let height = textStr.height + yPadding;
-    
-    textStr.x = xPadding / 2;
-    textStr.y = yPadding / 2;
+    // 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)
 
-    const rect = new Graphics();
-    rect.name = "rect";
-    rect.beginFill(0xff0000);
-    rect.drawRect(0, 0, width, height);
-    rect.endFill();
-    rect.interactive = true;
-    rect.buttonMode = true;
+    textStr.x = xPadding / 2;
+    textStr.y = yPadding / 2 - 2;
 
-    button.addChild(rect);
+    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 = "plane9plane9"
+        plane9.width = width
+        plane9.height = height
+        plane9.interactive = true;
+        plane9.buttonMode = true;
+        button.addChild(plane9);
+    }
     button.addChild(textStr);
     button.x = 100;
     button.y = 50;
     button.interactive = true;
     button.on("touchstart", () => {
-        button.alpha = 0.8;
+        if (curOpts.pressBg) {
+            button.getChildByName<NineSlicePlane>("plane9plane9").texture = Texture.from(curOpts.pressBg)
+        } else {
+            button.alpha = 0.8;
+            button.scale = { x: .8, y: .8 }
+        }
     });
     button.on("touchend", () => {
         // 点击成功
-        console.log("success");
+        console.log("touchend success");
+        if (curOpts.pressBg) {
+            button.getChildByName<NineSlicePlane>("plane9plane9").texture = Texture.from(curOpts.bg)
+        } else {
+            button.alpha = 1;
+            button.scale = { x: 1, y: 1 }
+        }
         curOpts.click();
-        button.alpha = 1;
     });
     button.on("touchendoutside", () => {
-        button.alpha = 1;
+        console.log("touchendoutside success");
+        if (curOpts.pressBg) {
+            button.getChildByName<NineSlicePlane>("plane9plane9").texture = Texture.from(curOpts.bg)
+        } else {
+            button.alpha = 1;
+            button.scale = { x: 1, y: 1 }
+        }
     });
     return button;
 }

src/main.ts

@@ -5,9 +5,12 @@ import { addSound } from "./Game/Sound";
 console.log();
 
 gameManager.loader
-    .add("my-sound", "/bg.mp3", (e) => addSound(e))
-    .add("bg", "/bg.png")
+    .add("my-sound", "/bg.mp3", (e) => addSound(e)) // 背景音乐
+    .add("bg", "/bg.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);
 });
@@ -15,6 +18,5 @@ gameManager.loader.onComplete.once((loader) => {
     console.log(loader.resources);
     initGame();
     gameManager.setDirection(EDirection.Portrait);
-    stageManager.initStage("loading");
-
+    stageManager.initStage("init");
 });

src/stages/_global/page_0global.ts

@@ -0,0 +1,24 @@
+import { EP } from "@/enmu";
+import { defineWindow } from "@/Game";
+import { Container } from "pixi.js";
+
+export default defineWindow(
+    class {
+        stage: Container = null;
+
+        constructor(stage: Container) {
+            this.stage = stage;
+        }
+        bindStage(stage: Container){
+            this.stage = stage;
+        }
+
+        onLoad() {
+            console.log("global page loaded");
+        }
+
+        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);

src/stages/page_loading.ts → src/stages/page_init.ts

@@ -1,8 +1,8 @@
 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 } from "pixi.js";
-import TWEEN from "@tweenjs/tween.js";
 
 // defineLoadResource([
 //     { name: "my-sound", url: "/bg.mp3", callback: (e) => addSound(e) },
@@ -10,45 +10,48 @@ import TWEEN from "@tweenjs/tween.js";
 // ])
 
 export default defineWindow(
-    "loading",
     class {
         stage: Container = null;
         title: Text; // 标题
-
-        constructor(stage: Container) {
+        bindStage(stage: Container) {
             this.stage = stage;
         }
-
-        onLoad() {
-            console.log("onLoad loading");
-            
+        layout() {
             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("bg"), 100, 100, 100, 100);
-            plane9.width = 300
-            plane9.height = 300
+            const plane9 = new NineSlicePlane(Texture.from("btn-bg"), 10, 10, 10, 10);
+            plane9.width = 100
+            plane9.height = 50
             this.stage.addChild(plane9);
 
             const btn = Button({
                 text: "开始游戏",
+                bg: "btn-bg",
+                pressBg: "btn-bg-press",
                 click: () => {
-                    stageManager.changeStage("welcome")
                     // Sound.play("my-sound")
-                    // new TWEEN.Tween(btn).interpolation( TWEEN.Interpolation.Bezier )
-                    // .to({ alpha: .2,x:100, y:100 }, 1300)
-                    // .start()
+                    // 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 })
+                    //         })
+                    //         .start()
                 },
             });
-            btn.x = gameManager.getInfo().width / 2 - btn.width / 2;
-            btn.y = gameManager.getInfo().height / 2 - btn.height / 2 + 200;
+            btn.position = Position.get("center", "center", { y: 200, x: 0 })
             this.stage.addChild(btn);
+            console.log(this.stage);
+        }
+        onLoad() {
+            console.log("onLoad init");
         }
 
         onUnLoad() {

src/stages/welcome/page_welcome.ts

@@ -10,12 +10,10 @@ export default defineWindow("welcome", class{
     stage:Container = null
     elements: Record<string, Graphics> = {}
     text: any
-
-    constructor(stage: Container){
-        this.stage = stage
+    bindStage(stage: Container){
+        this.stage = stage;
     }
-    onLoad(){
-        console.log("onLoad 1");
+    layout(){
         const circle = Circle.render()
         this.stage.addChild(circle)
         circle.on("touchend", ()=>{
@@ -27,10 +25,13 @@ export default defineWindow("welcome", class{
         const btn = Button({text: "修仙人生日常"})
         btn.on("touchend", ()=>{
             // Sound.play('my-sound');
-            stageManager.changeStage("loading")
+            stageManager.changeStage("init")
         })
         this.stage.addChild(btn)
     }
+    onLoad(){
+        console.log("onLoad 1");
+    }
     onUnLoad(){
         Sound.stop("my-sound")
         console.log("onUnLoad 1");

src/stages/welcome2/page_welcome2.ts

@@ -16,18 +16,20 @@ circle.on("touchend", () => {
     stageManager.changeStage("welcome")
 })
 
-export default defineWindow("welcome2", class{
-    stage:Container = null
-    constructor(stage: Container){
-        this.stage = stage
+export default defineWindow("welcome2", class {
+    stage: Container = null
+    bindStage(stage: Container) {
+        this.stage = stage;
     }
-    onLoad(){
-        console.log("onLoad 2");
+    layout() {
         this.stage.addChild(circle)
     }
-    onUnLoad(){
+    onLoad() {
+        console.log("onLoad 2");
+    }
+    onUnLoad() {
         console.log("onUnLoad 2");
     }
-    update(){
+    update() {
     }
 })