diff --git a/.gitignore b/.gitignore index 587e4ec..8da68ed 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules .cache -dist \ No newline at end of file +dist +.idea \ No newline at end of file diff --git a/index.html b/index.html index 30ed52f..76d77fd 100644 --- 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; } +
\ No newline at end of file diff --git a/src/Game/Game.ts b/src/Game/Game.ts index 21e51f5..d977d23 100644 --- 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); } diff --git a/src/Game/Sound.ts b/src/Game/Sound.ts index b2166bc..2789b5f 100644 --- 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, diff --git a/src/Game/index.ts b/src/Game/index.ts index 4bc60dd..a1a9d6b 100644 --- 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= {} const residentList: IWindow[] = [] +function defineLoadResource(resources: {name: string, url: string, callback?: LoaderResource.OnCompleteSignal}[]) { + return resources +} + function defineWindow(name: string, abstractClass: Constructor, 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 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, type?: type Constructor = 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, diff --git a/src/main.ts b/src/main.ts index 10309d3..eb4701c 100644 --- 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"); + }); diff --git a/src/shims.d.ts b/src/shims.d.ts new file mode 100644 index 0000000..151aa68 --- /dev/null +++ b/src/shims.d.ts @@ -0,0 +1 @@ +/// \ No newline at end of file diff --git a/src/stages/page_control.ts b/src/stages/page_control.ts new file mode 100644 index 0000000..b3fc047 --- /dev/null +++ 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); \ No newline at end of file diff --git a/src/stages/page_loading.ts b/src/stages/page_loading.ts index a837344..0753d20 100644 --- 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; } - - } + + }, ); diff --git a/src/stages/welcome/page_welcome.ts b/src/stages/welcome/page_welcome.ts index 791021a..b1636b4 100644 --- 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){ diff --git a/src/stages/welcome2/page_welcome2.ts b/src/stages/welcome2/page_welcome2.ts index 44cdd0f..5f0d054 100644 --- 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) \ No newline at end of file +}) \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 53f2f2c..f0cd4e9 100644 --- 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,