add

package.json

@@ -4,6 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
+    "check": "taze major",
     "dev": "vite --host",
     "build": "vite build"
   },

src/Game/Game.ts

@@ -158,13 +158,16 @@ export default class Game {
         });
         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;
 
@@ -173,12 +176,7 @@ 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/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,
-        singleInstance: true,
-        autoPlay: false,
-    });
-}
+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/index.ts

@@ -31,7 +31,7 @@ for (const tKey in t) {
     const stage = stageManager.getStage(name || tKeyName, type);
     const stageClass = new abstractClass(stage)
     stageClass.bindStage(stage)
-    stageClass._init = false
+    stageClass._initLayout = false
     stageClass.$name = name || tKeyName
     if (EP.Resident === type) {
         residentList.push(stageClass)
@@ -42,7 +42,7 @@ residentList.sort((a, b) => a.$name.localeCompare(b.$name, 'en'))
 
 type Constructor<T> = new (...args: any[]) => T;
 interface IWindow {
-    _init?: Boolean;
+    _initLayout?: Boolean;
     stage: Container;
     loader?: Loader;
     bindStage?(stage: Container): void;
@@ -64,12 +64,12 @@ function initGame() {
             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("不同的舞台");
+            if(!curWindow._initLayout || !isSameStage) {
+                // console.log("不同的舞台");
                 curWindow.layout?.()
-                curWindow._init = true
+                curWindow._initLayout = true
             }
+            curWindow.onLoad && curWindow.onLoad();
         }
     });
     residentList.forEach((v) => v.onLoad && v.onLoad());

src/components/Button.ts

@@ -4,12 +4,14 @@ interface IOpts {
     text: string;
     bg: string;
     pressBg: string;
+    position: null | any;
     click(): void;
 }
 
 const defaultOpts: IOpts = {
     text: "",
     bg: "",
+    position: null,
     pressBg: "",
     click() { },
 };
@@ -58,7 +60,7 @@ export default function Button(opts: Partial<IOpts>) {
         button.addChild(rect);
     } else {
         const plane9 = new NineSlicePlane(Texture.from(curOpts.bg), 10, 10, 10, 10);
-        plane9.name = "plane9plane9"
+        plane9.name = "nine-pic"
         plane9.width = width
         plane9.height = height
         plane9.interactive = true;
@@ -66,12 +68,13 @@ export default function Button(opts: Partial<IOpts>) {
         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>("plane9plane9").texture = Texture.from(curOpts.pressBg)
+            button.getChildByName<NineSlicePlane>("nine-pic").texture = Texture.from(curOpts.pressBg)
         } else {
             button.alpha = 0.8;
             button.scale = { x: .8, y: .8 }
@@ -81,7 +84,7 @@ export default function Button(opts: Partial<IOpts>) {
         // 点击成功
         console.log("touchend success");
         if (curOpts.pressBg) {
-            button.getChildByName<NineSlicePlane>("plane9plane9").texture = Texture.from(curOpts.bg)
+            button.getChildByName<NineSlicePlane>("nine-pic").texture = Texture.from(curOpts.bg)
         } else {
             button.alpha = 1;
             button.scale = { x: 1, y: 1 }
@@ -91,7 +94,7 @@ export default function Button(opts: Partial<IOpts>) {
     button.on("touchendoutside", () => {
         console.log("touchendoutside success");
         if (curOpts.pressBg) {
-            button.getChildByName<NineSlicePlane>("plane9plane9").texture = Texture.from(curOpts.bg)
+            button.getChildByName<NineSlicePlane>("nine-pic").texture = Texture.from(curOpts.bg)
         } else {
             button.alpha = 1;
             button.scale = { x: 1, y: 1 }

src/main.ts

@@ -2,11 +2,10 @@ 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("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();
@@ -17,6 +16,6 @@ gameManager.loader.onProgress.add((loader) => {
 gameManager.loader.onComplete.once((loader) => {
     console.log(loader.resources);
     initGame();
-    gameManager.setDirection(EDirection.Portrait);
+    gameManager.setDirection(EDirection.Landscape);
     stageManager.initStage("init");
 });

src/stages/page_init.ts

@@ -2,7 +2,7 @@ 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 { Container, Sprite, Text, NineSlicePlane, Texture, AnimatedSprite, Rectangle, utils } from "pixi.js";
 
 // defineLoadResource([
 //     { name: "my-sound", url: "/bg.mp3", callback: (e) => addSound(e) },
@@ -13,10 +13,15 @@ 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",
@@ -34,21 +39,49 @@ export default defineWindow(
 
             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")
+                    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 })
+                    // stageManager.changeStage("welcome", { isHolderLast: true })
+                    //播放动画精灵
+                    this.pixie.gotoAndPlay(0);
                     //         })
                     //         .start()
                 },
             });
-            btn.position = Position.get("center", "center", { y: 200, x: 0 })
             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");
@@ -60,6 +93,7 @@ export default defineWindow(
         }
 
         update(dt: number) {
+            this.pixie.update(dt)
             this.title.rotation -= 0.01 * dt;
         }