diff --git a/package.json b/package.json index c6aac17..b8a45ff 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "", "main": "index.js", "scripts": { + "check": "taze major", "dev": "vite --host", "build": "vite build" }, diff --git a/src/Game/Game.ts b/src/Game/Game.ts index 6dfc519..0ad81f1 100644 --- a/src/Game/Game.ts +++ b/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 { diff --git a/src/Game/Sound.ts b/src/Game/Sound.ts index 2789b5f..3ec1951 100644 --- a/src/Game/Sound.ts +++ b/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; diff --git a/src/Game/index.ts b/src/Game/index.ts index 2dc1d80..5fec482 100644 --- a/src/Game/index.ts +++ b/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 = 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()); diff --git a/src/components/Button.ts b/src/components/Button.ts index a7d03ff..b366699 100644 --- a/src/components/Button.ts +++ b/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) { 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) { 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("plane9plane9").texture = Texture.from(curOpts.pressBg) + button.getChildByName("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) { // 点击成功 console.log("touchend success"); if (curOpts.pressBg) { - button.getChildByName("plane9plane9").texture = Texture.from(curOpts.bg) + button.getChildByName("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) { button.on("touchendoutside", () => { console.log("touchendoutside success"); if (curOpts.pressBg) { - button.getChildByName("plane9plane9").texture = Texture.from(curOpts.bg) + button.getChildByName("nine-pic").texture = Texture.from(curOpts.bg) } else { button.alpha = 1; button.scale = { x: 1, y: 1 } diff --git a/src/main.ts b/src/main.ts index e87a52d..cf66cda 100644 --- a/src/main.ts +++ b/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"); }); diff --git a/src/stages/page_init.ts b/src/stages/page_init.ts index dff92e7..8f81118 100644 --- a/src/stages/page_init.ts +++ b/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; }