Demo
/
pixi-demo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

fixed bug

master
npmrun 3 years ago
parent
e6b2a7f802
commit
1a1e12ca04
12 changed files with 125 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 9
      index.html
  3. 4
      src/Game/Game.ts
  4. 1
      src/Game/Sound.ts
  5. 23
      src/Game/index.ts
  6. 12
      src/main.ts
  7. 1
      src/shims.d.ts
  8. 26
      src/stages/page_control.ts
  9. 43
      src/stages/page_loading.ts
  10. 2
      src/stages/welcome/page_welcome.ts
  11. 8
      src/stages/welcome2/page_welcome2.ts
  12. 4
      tsconfig.json

1
.gitignore
View File

@ -1,3 +1,4 @@
node_modules node_modules
.cache .cache
dist dist
.idea

9
index.html
View File

@ -14,10 +14,19 @@
} }
canvas{ canvas{
display: block; display: block;
position: absolute;
inset: 0;
}
.loading{
height: 100%;
width: 100%;
background: #000;
position: relative;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="loading"></div>
<script type="module" src="./src/main.ts"></script> <script type="module" src="./src/main.ts"></script>
</body> </body>
</html> </html>

4
src/Game/Game.ts
View File

@ -4,7 +4,7 @@ import {
AbstractRenderer, AbstractRenderer,
Ticker, Ticker,
Loader, Loader,
utils, utils, Graphics,
} from "pixi.js"; } from "pixi.js";
import detectOrient from "./detectOrient"; import detectOrient from "./detectOrient";
import { EDirection } from "@/enmu"; import { EDirection } from "@/enmu";
@ -144,7 +144,7 @@ export default class Game {
this._loader = loader; this._loader = loader;
} }
render(dt?: number) { render() {
this.renderer.render(this.stage); this.renderer.render(this.stage);
} }

1
src/Game/Sound.ts
View File

@ -3,6 +3,7 @@ import { LoaderResource } from "pixi.js";
export function addSound(e: LoaderResource) { export function addSound(e: LoaderResource) {
console.log(e);
sound.add(e.name, { sound.add(e.name, {
source: e.data, source: e.data,
singleInstance: true, singleInstance: true,

23
src/Game/index.ts
View File

@ -1,6 +1,6 @@
import Game from "./Game"; import Game from "./Game";
import Stage from "./Stage"; import Stage from "./Stage";
import {Container} from "pixi.js" import { Container, LoaderResource, Loader } from "pixi.js";
import { EP } from "@/enmu"; import { EP } from "@/enmu";
import TWEEN from "@tweenjs/tween.js"; import TWEEN from "@tweenjs/tween.js";
@ -10,11 +10,21 @@ const stageManager = Stage.getInstance();
const windows: Record<string, IWindow>= {} const windows: Record<string, IWindow>= {}
const residentList: 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) { 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 stage = stageManager.getStage(name, type);
const stageClass = new abstractClass(stage) const stageClass = new abstractClass(stage)
if(EP.Resident === type) { if(EP.Resident === type) {
stageClass.onLoad&&stageClass.onLoad()
residentList.push(stageClass) residentList.push(stageClass)
} }
windows[name] = stageClass windows[name] = stageClass
@ -24,12 +34,14 @@ function defineWindow(name: string, abstractClass: Constructor<IWindow>, type?:
type Constructor<T> = new (...args: any[]) => T; type Constructor<T> = new (...args: any[]) => T;
interface IWindow { interface IWindow {
stage: Container; stage: Container;
loader?: Loader;
onLoad?(): void; onLoad?(): void;
onUnLoad?(): void; onUnLoad?(): void;
lateUpdate?(dt: number, name: string): void; lateUpdate?(dt: number, name: string): void;
update?(dt: number, name: string): void; update?(dt: number, name: string): void;
} }
function initGame() {
// 场景切换监听 // 场景切换监听
stageManager.watchStageChange((stage, lastStage) => { stageManager.watchStageChange((stage, lastStage) => {
if (lastStage && lastStage.type === EP.Normal) { if (lastStage && lastStage.type === EP.Normal) {
@ -41,7 +53,7 @@ stageManager.watchStageChange((stage, lastStage) => {
curWindow.onLoad && curWindow.onLoad(); curWindow.onLoad && curWindow.onLoad();
} }
}); });
residentList.forEach((v) => v.onLoad && v.onLoad());
gameManager.ticker.add((dt: number) => { gameManager.ticker.add((dt: number) => {
if (!stageManager.curStage) return; if (!stageManager.curStage) return;
let curWindow = windows[stageManager.curStage.name]; let curWindow = windows[stageManager.curStage.name];
@ -51,17 +63,20 @@ gameManager.ticker.add((dt: number) => {
curWindow && curWindow &&
curWindow.update && curWindow.update &&
curWindow.update(dt, curWindow.stage.name); curWindow.update(dt, curWindow.stage.name);
gameManager.render(dt); gameManager.render();
stageManager.curStage && stageManager.curStage &&
curWindow && curWindow &&
curWindow.lateUpdate && curWindow.lateUpdate &&
curWindow.lateUpdate(dt, curWindow.stage.name); 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 { export {
initGame,
gameManager, gameManager,
stageManager, stageManager,
defineLoadResource,
defineWindow, defineWindow,
windows, windows,
residentList, residentList,

12
src/main.ts
View File

@ -1,12 +1,8 @@
import { EDirection } from "./enmu"; import { EDirection } from "./enmu";
import { gameManager, stageManager } from "./Game"; import { gameManager, initGame, stageManager, windows } from "./Game";
import { addSound } from "./Game/Sound"; import { addSound } from "./Game/Sound";
// @ts-ignore console.log();
const t = import.meta.globEager("./stages/**/page_*.ts");
gameManager.setDirection(EDirection.Landscape);
stageManager.initStage("loading");
gameManager.loader gameManager.loader
.add("my-sound", "/bg.mp3", (e) => addSound(e)) .add("my-sound", "/bg.mp3", (e) => addSound(e))
@ -17,4 +13,8 @@ gameManager.loader.onProgress.add((loader) => {
}); });
gameManager.loader.onComplete.once((loader) => { gameManager.loader.onComplete.once((loader) => {
console.log(loader.resources); console.log(loader.resources);
initGame();
gameManager.setDirection(EDirection.Portrait);
stageManager.initStage("loading");
}); });

1
src/shims.d.ts
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

26
src/stages/page_control.ts
View File

@ -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);

43
src/stages/page_loading.ts
View File

@ -1,46 +1,63 @@
import Button from "@/components/Button"; import Button from "@/components/Button";
import { gameManager, defineWindow } from "@/Game"; import { gameManager, defineWindow, stageManager } from "@/Game";
import Sound from "@/Game/Sound"; 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"; 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", "loading",
class { class {
stage: Container = null; stage: Container = null;
title: Text; // 标题
constructor(stage: Container) { constructor(stage: Container) {
this.stage = stage; this.stage = stage;
} }
onLoad() { onLoad() {
console.log("onLoad loading"); console.log("onLoad loading");
let text = new Text("时间魔法", { this.title = new Text("时间魔法", {
fontSize: 80, fontSize: 80,
fill: "#fff", fill: "red",
}); });
text.x = gameManager.getInfo().width / 2 - text.width / 2; this.title.x = gameManager.getInfo().width / 2;
text.y = gameManager.getInfo().height / 2 - text.height / 2 - 500; this.title.y = gameManager.getInfo().height / 2 - 200;
this.stage.addChild(text); 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({ const btn = Button({
text: "开始游戏", text: "开始游戏",
click: () => { click: () => {
// stageManager.changeStage("welcome")
// Sound.play("my-sound") // Sound.play("my-sound")
new TWEEN.Tween(btn).interpolation( TWEEN.Interpolation.Bezier ) // new TWEEN.Tween(btn).interpolation( TWEEN.Interpolation.Bezier )
.to({ alpha: .2,x:100, y:100 }, 1300) // .to({ alpha: .2,x:100, y:100 }, 1300)
.start() // .start()
}, },
}); });
btn.x = gameManager.getInfo().width / 2 - btn.width / 2; btn.x = gameManager.getInfo().width / 2 - btn.width / 2;
btn.y = gameManager.getInfo().height / 2 - btn.height / 2 + 200; btn.y = gameManager.getInfo().height / 2 - btn.height / 2 + 200;
this.stage.addChild(btn); this.stage.addChild(btn);
} }
onUnLoad() { onUnLoad() {
Sound.stop("my-sound"); Sound.stop("my-sound");
console.log("onUnLoad loading"); console.log("onUnLoad loading");
} }
update(dt: number) {
update(dt: number) {
this.title.rotation -= 0.01 * dt;
} }
} },
); );

2
src/stages/welcome/page_welcome.ts
View File

@ -6,7 +6,7 @@ import { Container, Text } from "pixi.js";
import Circle from "./circle" import Circle from "./circle"
defineWindow("welcome", class{ export default defineWindow("welcome", class{
stage:Container = null stage:Container = null
constructor(stage: Container){ constructor(stage: Container){

8
src/stages/welcome2/page_welcome2.ts
View File

@ -1,6 +1,6 @@
import { EP } from "@/enmu"; import { EP } from "@/enmu";
import { stageManager, gameManager,defineWindow } from "@/Game"; import { stageManager, defineWindow } from "@/Game";
import { Graphics, Sprite, Container } from "pixi.js"; import { Graphics, Container } from "pixi.js";
const circle = new Graphics(); const circle = new Graphics();
circle.name = "circle"; circle.name = "circle";
@ -16,7 +16,7 @@ circle.on("touchend", () => {
stageManager.changeStage("welcome") stageManager.changeStage("welcome")
}) })
defineWindow("welcome2", class{ export default defineWindow("welcome2", class{
stage:Container = null stage:Container = null
constructor(stage: Container){ constructor(stage: Container){
this.stage = stage this.stage = stage
@ -30,4 +30,4 @@ defineWindow("welcome2", class{
} }
update(){ update(){
} }
}, EP.Resident) })

4
tsconfig.json
View File

@ -3,8 +3,8 @@
"outDir": "./dist/", "outDir": "./dist/",
"noImplicitAny": true, "noImplicitAny": true,
"sourceMap": true, "sourceMap": true,
"lib": ["ES2015", "DOM"], "lib": ["ESNext", "DOM"],
"module": "ES6", "module": "ESNext",
"moduleResolution": "node", "moduleResolution": "node",
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"experimentalDecorators": true, "experimentalDecorators": true,

Write Preview
Loading…
Cancel
Save