diff --git a/bun.lockb b/bun.lockb index b5b1130..106fe37 100644 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index a6071c2..52c7cf1 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "eslint-plugin-import": "^2.29.0", "eslint-plugin-n": "^16.3.0", "eslint-plugin-promise": "^6.1.1", - "phaser": "^3.55.2", "prettier": "^3.0.3", "process": "^0.11.10", "ts-loader": "^9.5.0", @@ -36,6 +35,7 @@ "axios": "^0.26.1", "bms": "github:bemusic/bms-js#v2.1.0-beta.1", "lil-gui": "^0.17.0", + "phaser": "^3.60.0", "phaser3-rex-plugins": "^1.1.75", "webfontloader": "^1.6.28" } diff --git a/src/class/MusicTileManager.ts b/src/class/MusicTileManager.ts index 9bb66f3..e41f43c 100644 --- a/src/class/MusicTileManager.ts +++ b/src/class/MusicTileManager.ts @@ -1,4 +1,4 @@ -import { type Music, Beatmap } from "./Music" +import { type Music } from "./Music" import { MusicTile } from "./MusicTile" export class MusicTileManager { @@ -33,6 +33,7 @@ export class MusicTileManager { scene.add.existing(this.musicTiles[musicTileIndex]) this.ascTweens.push( scene.tweens.add({ + persist: true, targets: this.musicTiles[musicTileIndex], x: { value: 70 + 10 * musicTileIndex, @@ -52,6 +53,7 @@ export class MusicTileManager { ) this.descTweens.push( scene.tweens.add({ + persist: true, targets: this.musicTiles[musicTileIndex], x: { value: 70 + 10 * musicTileIndex, diff --git a/src/scene/PlayScene.ts b/src/scene/PlayScene.ts index 7a3ba12..ea18f7d 100644 --- a/src/scene/PlayScene.ts +++ b/src/scene/PlayScene.ts @@ -1,14 +1,12 @@ -import bms from "bms" -import axios, { type AxiosResponse, type AxiosError } from "axios" -import WebFont from "webfontloader" +import axios, { type AxiosError, type AxiosResponse } from "axios" import { Chart } from "../class/Chart" import { ChartPlayer } from "../class/ChartPlayer" -import { KeySoundPlayer } from "../class/KeySoundPlayer" import { DebugGUI } from "../class/DebugGUI" -import { PlayResult } from "../class/PlayResult" -import { type PlayConfig } from "../class/PlayConfig" +import { KeySoundPlayer } from "../class/KeySoundPlayer" import { type Beatmap, type Music } from "../class/Music" +import { type PlayConfig } from "../class/PlayConfig" +import { PlayResult } from "../class/PlayResult" export class PlayScene extends Phaser.Scene { private debugGUI: DebugGUI private beatmap: Beatmap @@ -21,6 +19,7 @@ export class PlayScene extends Phaser.Scene { private loadEndTime?: Date + private isLoading: boolean private hasLoaded: boolean private hasFadedOut: boolean @@ -35,7 +34,7 @@ export class PlayScene extends Phaser.Scene { private noteSpeed: number = 100 - private keys: Phaser.Input.Keyboard.Key[] + private keys: Phaser.Input.Keyboard.Key[] | null private keyLabels: Phaser.GameObjects.Text[] private screenMask: Phaser.GameObjects.Rectangle @@ -65,7 +64,7 @@ export class PlayScene extends Phaser.Scene { private judgeText: Phaser.GameObjects.Image private judgeFSText: Phaser.GameObjects.Image - private readonly keyFlashes: Phaser.GameObjects.Image[] + private keyFlashImages: Phaser.GameObjects.Image[] private jacketImage: Phaser.GameObjects.Image @@ -82,8 +81,6 @@ export class PlayScene extends Phaser.Scene { private inputZones: Phaser.GameObjects.Zone[] - private particleYellow: Phaser.GameObjects.Particles.ParticleEmitterManager - private normalTapSounds: Phaser.Sound.BaseSound[] private playConfig: PlayConfig @@ -97,6 +94,8 @@ export class PlayScene extends Phaser.Scene { this.loadEndTime = undefined + this.isLoading = false + this.hasLoaded = false this.hasFadedOut = false @@ -109,15 +108,19 @@ export class PlayScene extends Phaser.Scene { this.isTouching = new Array(7).fill(false) - this.keys = [ - this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S), - this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D), - this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F), - this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE), - this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.J), - this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.K), - this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.L), - ] + if (this.input.keyboard !== null) { + this.keys = [ + this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S), + this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D), + this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F), + this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE), + this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.J), + this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.K), + this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.L), + ] + } else { + this.keys = null + } this.input.addPointer(9) @@ -152,6 +155,7 @@ export class PlayScene extends Phaser.Scene { this.keySoundPlayer = new KeySoundPlayer(this.chart) this.keySoundPlayer.loadKeySounds(this, url) this.load.start() + this.isLoading = true }) .catch((error: AxiosError) => { console.log(error) @@ -201,6 +205,7 @@ export class PlayScene extends Phaser.Scene { .setDepth(8) this.judgeTween = this.tweens.add({ + persist: true, targets: this.judgeText, duration: 1200, scale: { @@ -230,6 +235,7 @@ export class PlayScene extends Phaser.Scene { .setDepth(0) .setAlpha(0.5) this.comboTween = this.tweens.add({ + persist: true, targets: this.comboText, y: 210, ease: (t: number): number => { @@ -267,8 +273,7 @@ export class PlayScene extends Phaser.Scene { .setAlpha(1) .setScale(0.5) - this.particleYellow = this.add.particles("particle-yellow") - + this.keyFlashImages = [] this.keyFlashTweens = [] this.holdParticleEmitters = [] this.inputZones = [] @@ -297,13 +302,22 @@ export class PlayScene extends Phaser.Scene { } else if (this.playConfig.key == 7) { positionX = 322 + 106 * laneIndex } + this.keyFlashImages.push( + this.add + .image(positionX, 720, "key-flash") + .setOrigin(0.5, 1) + .setDisplaySize((900 / this.playConfig.key) * 0.81, 720) + .setVisible(false) + .setDepth(-2), + ) this.keyFlashTweens.push( this.tweens.add({ + persist: true, targets: this.add .image(positionX, 720, "key-flash") .setOrigin(0.5, 1) - .setDisplaySize((900 / this.playConfig.key) * 1.02, 720) + .setDisplaySize((900 / this.playConfig.key) * 0.81, 720) .setDepth(-2), scaleX: { value: 0, duration: 80, ease: "Linear" }, ease: "Quintic.Out", @@ -311,9 +325,9 @@ export class PlayScene extends Phaser.Scene { }), ) this.holdParticleEmitters.push( - this.particleYellow.createEmitter({ - x: positionX - widths[this.playConfig.key] / 2, - y: 640, + this.add.particles(positionX - widths[this.playConfig.key] / 2, 640, "particle-yellow", { + x: 0, + y: 0, angle: { min: 265, max: 275 }, speed: 400, emitZone: { @@ -327,7 +341,7 @@ export class PlayScene extends Phaser.Scene { lifespan: { min: 100, max: 350 }, quantity: 1.5, blendMode: "ADD", - on: false, + emitting: false, }), ) @@ -344,6 +358,7 @@ export class PlayScene extends Phaser.Scene { }) .on("pointerout", () => { this.isTouching[laneIndex] = false + this.keyFlashTweens[laneIndex].restart() }), ) this.keyLabels.push( @@ -469,6 +484,9 @@ export class PlayScene extends Phaser.Scene { this.debugText.setText(`${value}`) }) this.load.on("complete", () => { + if (!this.isLoading || this.hasLoaded) { + return + } this.hasLoaded = true this.loadEndTime = new Date() this.cameras.main.fadeIn(500) @@ -564,12 +582,15 @@ export class PlayScene extends Phaser.Scene { this.beat = this.chart.secondsToBeat(this.playingSec) this.chartPlayer.update(this, this.beat, this.playingSec, this.noteSpeed, this.keySoundPlayer) - for (const laneIndex of Array(7).keys()) { - if (this.keys[laneIndex].isDown || this.isTouching[laneIndex]) { - this.keyFlashTweens[laneIndex].restart() + if (this.keys !== null) { + for (const laneIndex of Array(7).keys()) { + if (this.keys[laneIndex].isDown || this.isTouching[laneIndex]) { + this.keyFlashImages[laneIndex].setVisible(true) + } else { + this.keyFlashImages[laneIndex].setVisible(false) + } } } - // change back light if (this.chartPlayer.judges[3] == 0 && this.chartPlayer.judges[4] == 0) { if (this.chartPlayer.judges[1] == 0 && this.chartPlayer.judges[2] == 0) { @@ -588,19 +609,29 @@ export class PlayScene extends Phaser.Scene { this.hasFadedOut = true } - // key down - for (const laneIndex of Array(7).keys()) { - if (Phaser.Input.Keyboard.JustDown(this.keys[laneIndex])) { - this.judgeKeyDown(laneIndex) + if (this.keys !== null) { + for (const laneIndex of Array(7).keys()) { + // key down + if (Phaser.Input.Keyboard.JustDown(this.keys[laneIndex])) { + this.judgeKeyDown(laneIndex) + } + // key up + if (Phaser.Input.Keyboard.JustUp(this.keys[laneIndex])) { + this.keyFlashTweens[laneIndex].restart() + } } } // key hold for (const laneIndex of Array(7).keys()) { - if (this.chartPlayer.isHolds[laneIndex] && !this.keys[laneIndex].isDown && !this.isTouching[laneIndex]) { + if ( + this.chartPlayer.isHolds[laneIndex] && + (this.keys === null || (this.keys !== null && !this.keys[laneIndex].isDown)) && + !this.isTouching[laneIndex] + ) { this.chartPlayer.judgeKeyHold(this.playingSec, laneIndex) } - this.holdParticleEmitters[laneIndex].on = this.chartPlayer.isHolds[laneIndex] + this.holdParticleEmitters[laneIndex].emitting = this.chartPlayer.isHolds[laneIndex] if (this.chartPlayer.isHolds[laneIndex] && time % 130 <= 17) { this.addBomb(laneIndex) } diff --git a/src/scene/ResultScene.ts b/src/scene/ResultScene.ts index 711001a..f542b27 100644 --- a/src/scene/ResultScene.ts +++ b/src/scene/ResultScene.ts @@ -232,25 +232,25 @@ export class ResultScene extends Phaser.Scene { quality: 8, }) - const particleYellow = this.add.particles("particle-yellow").setDepth(20) - - this.particleEmitter = particleYellow.createEmitter({ - x: -1280, - y: 0, - angle: { min: 0, max: 360 }, - speed: 60, - emitZone: { - type: "random", - source: new Phaser.Geom.Circle(0, 0, 6), - quantity: 12, - yoyo: false, - }, - scale: { start: 0.08, end: 0 }, - lifespan: { min: 300, max: 1000 }, - quantity: 0.6, - blendMode: "ADD", - on: true, - }) + this.particleEmitter = this.add + .particles(0, 0, "particle-yellow", { + x: -1280, + y: 0, + angle: { min: 0, max: 360 }, + speed: 60, + emitZone: { + type: "random", + source: new Phaser.Geom.Circle(0, 0, 6), + quantity: 12, + yoyo: false, + }, + scale: { start: 0.08, end: 0 }, + lifespan: { min: 300, max: 1000 }, + quantity: 0.6, + blendMode: "ADD", + emitting: true, + }) + .setDepth(20) this.titleFrame = this.add.image(100, 125, "frame-title").setScale(0.67, 0).setOrigin(0, 0.5).setDepth(-2) @@ -652,7 +652,8 @@ export class ResultScene extends Phaser.Scene { } update(time: number, dt: number) { - this.particleEmitter.setPosition(this.input.x, this.input.y) + this.particleEmitter.particleX = this.input.x + this.particleEmitter.particleY = this.input.y switch (Math.floor(time / 40) % 4) { case 0: this.judgeLabelTexts[0].setColor("#e530e5") diff --git a/src/scene/SelectScene.ts b/src/scene/SelectScene.ts index b2bce6d..6ae0344 100644 --- a/src/scene/SelectScene.ts +++ b/src/scene/SelectScene.ts @@ -141,25 +141,25 @@ export class SelectScene extends Phaser.Scene { quality: 8, }) - const particleYellow = this.add.particles("particle-yellow").setDepth(20) - - this.particleEmitter = particleYellow.createEmitter({ - x: -1280, - y: 0, - angle: { min: 0, max: 360 }, - speed: 60, - emitZone: { - type: "random", - source: new Phaser.Geom.Circle(0, 0, 6), - quantity: 12, - yoyo: false, - }, - scale: { start: 0.08, end: 0 }, - lifespan: { min: 300, max: 1000 }, - quantity: 0.6, - blendMode: "ADD", - on: true, - }) + this.particleEmitter = this.add + .particles(0, 0, "particle-yellow", { + x: -1280, + y: 0, + angle: { min: 0, max: 360 }, + speed: 60, + emitZone: { + type: "random", + source: new Phaser.Geom.Circle(0, 0, 6), + quantity: 12, + yoyo: false, + }, + scale: { start: 0.08, end: 0 }, + lifespan: { min: 300, max: 1000 }, + quantity: 0.6, + blendMode: "ADD", + emitting: true, + }) + .setDepth(20) this.add.image(52, 15, "frame-title").setScale(0.7, 0.45).setOrigin(0, 0) @@ -573,7 +573,8 @@ export class SelectScene extends Phaser.Scene { update(time: number, dt: number) { this.musicTileManager.update(time) - this.particleEmitter.setPosition(this.input.x, this.input.y) + this.particleEmitter.particleX = this.input.x + this.particleEmitter.particleY = this.input.y this.selectedMusicTitleText.setText(this.musicTileManager.getMusic().title) diff --git a/src/scene/TitleScene.ts b/src/scene/TitleScene.ts index c01f7b8..831672a 100644 --- a/src/scene/TitleScene.ts +++ b/src/scene/TitleScene.ts @@ -49,25 +49,25 @@ export class TitleScene extends Phaser.Scene { quality: 8, }) - const particleYellow = this.add.particles("particle-yellow").setDepth(20) - - this.particleEmitter = particleYellow.createEmitter({ - x: -1280, - y: 0, - angle: { min: 0, max: 360 }, - speed: 60, - emitZone: { - type: "random", - source: new Phaser.Geom.Circle(0, 0, 6), - quantity: 12, - yoyo: false, - }, - scale: { start: 0.08, end: 0 }, - lifespan: { min: 300, max: 1000 }, - quantity: 0.6, - blendMode: "ADD", - on: true, - }) + this.particleEmitter = this.add + .particles(0, 0, "particle-yellow", { + x: -1280, + y: 0, + angle: { min: 0, max: 360 }, + speed: 60, + emitZone: { + type: "random", + source: new Phaser.Geom.Circle(0, 0, 6), + quantity: 12, + yoyo: false, + }, + scale: { start: 0.08, end: 0 }, + lifespan: { min: 300, max: 1000 }, + quantity: 0.6, + blendMode: "ADD", + emitting: true, + }) + .setDepth(20) this.add.image(640, 260, "logo").setScale(0.9) @@ -169,7 +169,8 @@ export class TitleScene extends Phaser.Scene { } update(time: number, dt: number) { - this.particleEmitter.setPosition(this.input.x, this.input.y) + this.particleEmitter.particleX = this.input.x + this.particleEmitter.particleY = this.input.y this.startText.setAlpha(0.5 + 0.5 * 0.5 * (0.25 * Math.sin((time * 2 * Math.PI) / 1000) + 1)) }