fixed bug

2 years ago · 1a1e12ca04
12 changed files with 125 additions and 55 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,4 @@
 node_modules
 .cache
-dist
+dist
+.idea
--- a/index.html
+++ b/index.html
@ -14,10 +14,19 @@
        }
        canvas{
            display: block;
+            position: absolute;
+            inset: 0;
+        }
+        .loading{
+            height: 100%;
+            width: 100%;
+            background: #000;
+            position: relative;
        }
    </style>
 </head>
 <body>
+    <div class="loading"></div>
    <script type="module" src="./src/main.ts"></script>
 </body>
 </html>
--- a/src/Game/Game.ts
+++ b/src/Game/Game.ts
@ -4,7 +4,7 @@ import {
    AbstractRenderer,
    Ticker,
    Loader,
-    utils,
+    utils, Graphics,
 } from "pixi.js";
 import detectOrient from "./detectOrient";
 import { EDirection } from "@/enmu";
@ -144,7 +144,7 @@ export default class Game {
        this._loader = loader;
    }

-    render(dt?: number) {
+    render() {
        this.renderer.render(this.stage);
    }

--- a/src/Game/Sound.ts
+++ b/src/Game/Sound.ts
@ -3,6 +3,7 @@ import { LoaderResource } from "pixi.js";


 export function addSound(e: LoaderResource) {
+    console.log(e);
    sound.add(e.name, {
        source: e.data,
        singleInstance: true,
--- a/src/Game/index.ts
+++ b/src/Game/index.ts
@ -1,6 +1,6 @@
 import Game from "./Game";
 import Stage from "./Stage";
-import {Container} from "pixi.js"
+import { Container, LoaderResource, Loader } from "pixi.js";
 import { EP } from "@/enmu";
 import TWEEN from "@tweenjs/tween.js";

@ -10,11 +10,21 @@ 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) {
+    return { name, abstractClass, type}
+}
+
+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 stageClass = new abstractClass(stage)
    if(EP.Resident === type) {
-        stageClass.onLoad&&stageClass.onLoad()
        residentList.push(stageClass)
    }
    windows[name] = stageClass
@ -24,44 +34,49 @@ function defineWindow(name: string, abstractClass: Constructor<IWindow>, type?:
 type Constructor<T> = new (...args: any[]) => T;
 interface IWindow {
    stage: Container;
+    loader?: Loader;
    onLoad?(): void;
    onUnLoad?(): void;
    lateUpdate?(dt: number, name: string): void;
    update?(dt: number, name: string): void;
 }

-// 场景切换监听
-stageManager.watchStageChange((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();
-    }
-});
-
-gameManager.ticker.add((dt: number) => {
-    if (!stageManager.curStage) return;
-    let curWindow = windows[stageManager.curStage.name];
-    TWEEN.update();
-    residentList.forEach((v) => v.update && v.update(dt, v.stage.name));
-    stageManager.curStage &&
+function initGame() {
+    // 场景切换监听
+    stageManager.watchStageChange((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();
+        }
+    });
+    residentList.forEach((v) => v.onLoad && v.onLoad());
+    gameManager.ticker.add((dt: number) => {
+        if (!stageManager.curStage) return;
+        let curWindow = windows[stageManager.curStage.name];
+        TWEEN.update();
+        residentList.forEach((v) => v.update && v.update(dt, v.stage.name));
+        stageManager.curStage &&
        curWindow &&
        curWindow.update &&
        curWindow.update(dt, curWindow.stage.name);
-    gameManager.render(dt);
-    stageManager.curStage &&
+        gameManager.render();
+        stageManager.curStage &&
        curWindow &&
        curWindow.lateUpdate &&
        curWindow.lateUpdate(dt, curWindow.stage.name);
-    residentList.forEach((v) => v.lateUpdate && v.lateUpdate(dt, v.stage.name));
-});
+        residentList.forEach((v) => v.lateUpdate && v.lateUpdate(dt, v.stage.name));
+    });
+}

 export {
+    initGame,
    gameManager,
    stageManager,
+    defineLoadResource,
    defineWindow,
    windows,
    residentList,
--- a/src/main.ts
+++ b/src/main.ts
@ -1,12 +1,8 @@
 import { EDirection } from "./enmu";
-import { gameManager, stageManager } from "./Game";
+import { gameManager, initGame, stageManager, windows } from "./Game";
 import { addSound } from "./Game/Sound";

-// @ts-ignore
-const t = import.meta.globEager("./stages/**/page_*.ts");
-
-gameManager.setDirection(EDirection.Landscape);
-stageManager.initStage("loading");
+console.log();

 gameManager.loader
    .add("my-sound", "/bg.mp3", (e) => addSound(e))
@ -17,4 +13,8 @@ gameManager.loader.onProgress.add((loader) => {
 });
 gameManager.loader.onComplete.once((loader) => {
    console.log(loader.resources);
+    initGame();
+    gameManager.setDirection(EDirection.Portrait);
+    stageManager.initStage("loading");
+
 });
--- a/src/shims.d.ts
+++ b/src/shims.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/src/stages/page_control.ts
+++ b/src/stages/page_control.ts
@ -0,0 +1,26 @@
+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);
--- a/src/stages/page_loading.ts
+++ b/src/stages/page_loading.ts
@ -1,46 +1,63 @@
 import Button from "@/components/Button";
-import { gameManager, defineWindow } from "@/Game";
+import { gameManager, defineWindow, stageManager } from "@/Game";
 import Sound from "@/Game/Sound";
-import { Container, Text } from "pixi.js";
+import { Container, Sprite, Text, NineSlicePlane, Texture } from "pixi.js";
 import TWEEN from "@tweenjs/tween.js";

-defineWindow(
+// 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");
-            let text = new Text("时间魔法", {
+            this.title = new Text("时间魔法", {
                fontSize: 80,
-                fill: "#fff",
+                fill: "red",
            });
-            text.x = gameManager.getInfo().width / 2 - text.width / 2;
-            text.y = gameManager.getInfo().height / 2 - text.height / 2 - 500;
-            this.stage.addChild(text);
+            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:()=>{
+                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 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;
        }
-        
-    }
+
+    },
 );
--- a/src/stages/welcome/page_welcome.ts
+++ b/src/stages/welcome/page_welcome.ts
@ -6,7 +6,7 @@ import { Container, Text } from "pixi.js";
 import Circle from "./circle"


-defineWindow("welcome", class{
+export default defineWindow("welcome", class{
    stage:Container = null

    constructor(stage: Container){
--- a/src/stages/welcome2/page_welcome2.ts
+++ b/src/stages/welcome2/page_welcome2.ts
@ -1,6 +1,6 @@
 import { EP } from "@/enmu";
-import { stageManager, gameManager,defineWindow } from "@/Game";
-import { Graphics, Sprite, Container } from "pixi.js";
+import { stageManager, defineWindow } from "@/Game";
+import { Graphics, Container } from "pixi.js";

 const circle = new Graphics();
 circle.name = "circle";
@ -16,7 +16,7 @@ circle.on("touchend", () => {
    stageManager.changeStage("welcome")
 })

-defineWindow("welcome2", class{
+export default defineWindow("welcome2", class{
    stage:Container = null
    constructor(stage: Container){
        this.stage = stage
@ -30,4 +30,4 @@ defineWindow("welcome2", class{
    }
    update(){
    }
-}, EP.Resident)
+})
--- a/tsconfig.json
+++ b/tsconfig.json
@ -3,8 +3,8 @@
      "outDir": "./dist/",
      "noImplicitAny": true,
      "sourceMap": true,
-      "lib": ["ES2015", "DOM"],
-      "module": "ES6",
+      "lib": ["ESNext", "DOM"],
+      "module": "ESNext",
      "moduleResolution": "node",
      "allowSyntheticDefaultImports": true,
      "experimentalDecorators": true,