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"
   },

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;
@@ -50,6 +58,24 @@ export default class Game {
         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.clientHeight * 1136 / 640
+        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;
-        let screenHeight = document.documentElement.clientHeight;
+        const screenInfo = this.screenInfo()
+        let screenWidght = screenInfo.widght;
+        let screenHeight = screenInfo.height;
         this.renderer.resize(screenWidght, screenHeight);
         let offsetWidth = 0;
         let offsetHeight = 0;
@@ -114,28 +141,33 @@ export default class Game {
     }
 
     init() {
-        let screenWidght = document.documentElement.clientWidth;
-        let screenHeight = document.documentElement.clientHeight;
+        const screenInfo = this.screenInfo()
+        let screenWidght = screenInfo.widght;
+        let screenHeight = screenInfo.height;
         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,
         });
         this._stage = stage;
         this._renderer = renderer;
+        // https://www.cnblogs.com/haqiao/p/12515775.html
+        this.renderer.resize(screenWidght, screenHeight)
         document.body.appendChild(renderer.view);
 
         window.addEventListener("resize", () => {
             this.updateView();
         });
         
-        const ticker = new Ticker();
+        // const ticker = new Ticker();
+        const ticker = Ticker.shared; // 单例
         ticker.autoStart = true;
         this._ticker = ticker;
 

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/Sound.ts

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

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){
+            // @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,8 +1,8 @@
 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();
@@ -14,27 +14,39 @@ function defineLoadResource(resources: {name: string, url: string, callback?: Lo
     return resources
 }
 
-function defineWindow(name: string, abstractClass: Constructor<IWindow>, type?: EP) {
+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 [_, tKeyName] = tKey.match(/page_(.*?)\.ts$/)
     const { name, abstractClass, type } = mod as ReturnType<typeof defineWindow>
-    const stage = stageManager.getStage(name, type);
+    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
 }
-    windows[name] = stageClass
-}
-
+// @ts-ignore
+residentList.sort((a, b) => a.$name.localeCompare(b.$name, 'en'))
 
 type Constructor<T> = new (...args: any[]) => T;
 interface IWindow {
+    _initLayout?: Boolean;
     stage: Container;
     loader?: Loader;
+    bindStage?(stage: Container): void;
+    layout?(): void;
     onLoad?(): void;
     onUnLoad?(): void;
     lateUpdate?(dt: number, name: string): void;
@@ -50,6 +62,13 @@ function initGame() {
         }
         if (stage && stage.type === EP.Normal) {
             let curWindow = windows[stage.name];
+            const isSameStage = curWindow.stage === stage.stage
+            !isSameStage && curWindow.bindStage(stage.stage)
+            if(!curWindow._initLayout || !isSameStage) {
+                // console.log("不同的舞台");
+                curWindow.layout?.()
+                curWindow._initLayout = true
+            }
             curWindow.onLoad && curWindow.onLoad();
         }
     });
@@ -57,7 +76,7 @@ function initGame() {
     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 &&

src/components/Button.ts

@@ -1,28 +1,36 @@
-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;
+    position: null | any;
     click(): void;
 }
 
 const defaultOpts: IOpts = {
     text: "",
+    bg: "",
+    position: null,
+    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,10 +41,15 @@ export default function Button(opts: Partial<IOpts>) {
     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)
 
     textStr.x = xPadding / 2;
-    textStr.y = yPadding / 2;
+    textStr.y = yPadding / 2 - 2;
 
+    if (!curOpts.bg) {
         const rect = new Graphics();
         rect.name = "rect";
         rect.beginFill(0xff0000);
@@ -44,23 +57,48 @@ export default function Button(opts: Partial<IOpts>) {
         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.x = 100;
-    button.y = 50;
     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 }
+        }
     });
     button.on("touchend", () => {
         // 点击成功
-        console.log("success");
-        curOpts.click();
+        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 }
+        }
+        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 }
+        }
     });
     return button;
 }

src/main.ts

@@ -2,19 +2,20 @@ import { EDirection } from "./enmu";
 import { gameManager, initGame, stageManager, windows } from "./Game";
 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("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.Portrait);
-    stageManager.initStage("loading");
-
+    gameManager.setDirection(EDirection.Landscape);
+    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_init.ts

@@ -0,0 +1,101 @@
+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" },
+// ])
+
+export default defineWindow(
+    class {
+        stage: Container = null;
+        title: Text; // 标题
+        pixie: AnimatedSprite; // 标题
+        bindStage(stage: Container) {
+            this.stage = stage;
+        }
+        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 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: "开始游戏",
+                position: Position.get("center", "center", { y: 200, x: 0 }),
+                bg: "btn-bg",
+                pressBg: "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(() => {
+                    // stageManager.changeStage("welcome", { isHolderLast: true })
+                    //播放动画精灵
+                    this.pixie.gotoAndPlay(0);
+                    //         })
+                    //         .start()
+                },
+            });
+            this.stage.addChild(btn);
+            console.log(this.stage);
+
+            let TextureCache = utils.TextureCache;
+            let base = TextureCache["dnf"];
+            //第一个纹理
+            let texture0 = new Texture(base as any)
+            texture0.frame = new Rectangle(0, 0, 80, 143);
+            //第二个纹理
+            let texture1 = new Texture(base as any)
+            texture1.frame = new Rectangle(80, 0, 80, 143);
+            //第三个纹理
+            let texture2 = new Texture(base as any)
+            texture2.frame = new Rectangle(160, 0, 80, 143);
+            //第四个纹理
+            let texture3 = new Texture(base as any)
+            texture3.frame = new Rectangle(240, 0, 80, 143);
+
+            //创建纹理数组
+            let textures = [texture0, texture1, texture2, texture3];
+
+            //创建动画精灵
+            this.pixie = new AnimatedSprite(textures, false);
+            //设置动画精灵的速度
+            this.pixie.animationSpeed = 0.1;
+            this.pixie.loop = true;
+            this.stage.addChild(this.pixie)
+            this.pixie.y = 200
+        }
+        onLoad() {
+            console.log("onLoad init");
+        }
+
+        onUnLoad() {
+            Sound.stop("my-sound");
+            console.log("onUnLoad loading");
+        }
+
+        update(dt: number) {
+            this.pixie.update(dt)
+            this.title.rotation -= 0.01 * dt;
+        }
+
+    },
+);

src/stages/page_loading.ts

@@ -1,64 +0,0 @@
-import Button from "@/components/Button";
-import { gameManager, defineWindow, stageManager } from "@/Game";
-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) },
-//     { name: "bg", url: "/bg.png" },
-// ])
-
-export default defineWindow(
-    "loading",
-    class {
-        stage: Container = null;
-        title: Text; // 标题
-
-        constructor(stage: Container) {
-            this.stage = stage;
-        }
-
-        onLoad() {
-            console.log("onLoad loading");
-            
-            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.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
-            this.stage.addChild(plane9);
-
-            const btn = Button({
-                text: "开始游戏",
-                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()
-                },
-            });
-            btn.x = gameManager.getInfo().width / 2 - btn.width / 2;
-            btn.y = gameManager.getInfo().height / 2 - btn.height / 2 + 200;
-            this.stage.addChild(btn);
-        }
-
-        onUnLoad() {
-            Sound.stop("my-sound");
-            console.log("onUnLoad loading");
-        }
-
-        update(dt: number) {
-            this.title.rotation -= 0.01 * dt;
-        }
-
-    },
-);

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

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