From 88fbdeb8cab9d94b10009d41341d0da6c68faf32 Mon Sep 17 00:00:00 2001 From: 3w36zj6 <52315048+3w36zj6@users.noreply.github.com> Date: Mon, 20 Nov 2023 08:26:38 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=E9=81=B8=E6=9B=B2=E3=82=B7?= =?UTF-8?q?=E3=83=BC=E3=83=B3=E3=81=AE=E5=90=84=E3=83=A1=E3=83=8B=E3=83=A5?= =?UTF-8?q?=E3=83=BC=E3=81=AE=E3=82=A6=E3=82=A3=E3=83=B3=E3=83=89=E3=82=A6?= =?UTF-8?q?=E3=81=AB=E3=82=A2=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7?= =?UTF-8?q?=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0=20(#22)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/scene/ConfigScene.ts | 151 +++++++++++++++++++++++++++++++++++---- src/scene/CreditScene.ts | 136 ++++++++++++++++++++++++++++++----- src/scene/LoginScene.ts | 128 ++++++++++++++++++++++++++++----- 3 files changed, 365 insertions(+), 50 deletions(-) diff --git a/src/scene/ConfigScene.ts b/src/scene/ConfigScene.ts index 36622f3..84e91a5 100644 --- a/src/scene/ConfigScene.ts +++ b/src/scene/ConfigScene.ts @@ -1,4 +1,4 @@ -import { type PlayConfig, type NoteType } from "../class/PlayConfig" +import { type NoteType, type PlayConfig } from "../class/PlayConfig" import { ToggleButton } from "../class/ToggleButton" export class ConfigScene extends Phaser.Scene { @@ -21,8 +21,6 @@ export class ConfigScene extends Phaser.Scene { create() { const { width, height } = this.game.canvas - this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 128).setDepth(-10) - this.add .zone(width / 2, height / 2, width, height) .setInteractive({ @@ -30,18 +28,20 @@ export class ConfigScene extends Phaser.Scene { }) .on("pointerdown", () => {}) - this.add + const frame = this.add .image(width / 2, height / 2, "frame-detail") .setOrigin(0.5, 0.5) .setDepth(-9) + .setScale(1, 0) - this.add + const icon = this.add .image(width / 2 - 260, height / 2 - 225, "icon-config") .setOrigin(0, 1) .setDepth(1) .setScale(0.8) + .setAlpha(0) - this.add + const titleLabel = this.add .text(width / 2 - 260 + 60, height / 2 - 230, "プレー設定", { fontFamily: "Noto Sans JP", fontSize: "55px", @@ -50,14 +50,22 @@ export class ConfigScene extends Phaser.Scene { .setOrigin(0, 1) .setScale(0.5) .setDepth(1) + .setAlpha(0) - this.add.rectangle(width / 2, height / 2 - 220, 530, 3, 0xeeeeee).setDepth(2) + const line = this.add + .rectangle(width / 2, height / 2 - 220, 530, 3, 0xeeeeee) + .setDepth(2) + .setScale(0, 1) - this.add.rectangle(1100, height / 2, 150, 720, 0x0a0a0a, 30).setDepth(2) + const previewNoteFrame = this.add + .rectangle(1100, 0, 150, 720, 0x0a0a0a, 30) + .setDepth(2) + .setOrigin(0.5, 0) + .setScale(0, 0) this.previewNote = this.add.image(1100, height / 2, "").setDepth(3) - this.add + const noteSpeedLabel = this.add .text(width / 2 - 260, height / 2 - 180 + 360 * 0, "ノーツの速さ", { fontFamily: "Noto Sans JP", fontSize: "35px", @@ -66,10 +74,12 @@ export class ConfigScene extends Phaser.Scene { .setOrigin(0, 0.5) .setScale(0.5) .setDepth(1) + .setAlpha(0) const noteSpeedToggleButton = new ToggleButton(this, `${this.playConfig.noteSpeed}`) .setPosition(width / 2 + 260 - 95.5, height / 2 - 180 + 360 * 0) .setDepth(2) + .setAlpha(0) noteSpeedToggleButton.leftZone.on("pointerdown", () => { this.sound.play("cursor") this.playConfig.noteSpeed = Math.max((Math.round(this.playConfig.noteSpeed * 10) - 1) / 10, 1) @@ -84,7 +94,7 @@ export class ConfigScene extends Phaser.Scene { }) this.add.existing(noteSpeedToggleButton) - this.add + const noteTypeLabel = this.add .text(width / 2 - 260, height / 2 - 180 + 360 * 0.2, "ノーツの見た目", { fontFamily: "Noto Sans JP", fontSize: "35px", @@ -93,12 +103,14 @@ export class ConfigScene extends Phaser.Scene { .setOrigin(0, 0.5) .setScale(0.5) .setDepth(1) + .setAlpha(0) const noteTypeList: NoteType[] = ["circle", "rectangle", "line"] this.noteTypeIndex = noteTypeList.indexOf(this.playConfig.noteType) const noteTypeToggleButton = new ToggleButton(this, `${this.playConfig.noteType}`) .setPosition(width / 2 + 260 - 95.5, height / 2 - 180 + 360 * 0.2) .setDepth(2) + .setAlpha(0) noteTypeToggleButton.leftZone.on("pointerdown", () => { this.sound.play("cursor") this.noteTypeIndex = (this.noteTypeIndex - 1 + noteTypeList.length) % noteTypeList.length @@ -113,7 +125,7 @@ export class ConfigScene extends Phaser.Scene { }) this.add.existing(noteTypeToggleButton) - this.add + const closeLabel = this.add .text(width / 2, height / 2 - 180 + 360 * 1.15, "閉じる", { fontFamily: "Noto Sans JP", fontSize: "35px", @@ -122,20 +134,129 @@ export class ConfigScene extends Phaser.Scene { .setOrigin(0.5, 0.5) .setScale(0.5) .setDepth(2) + .setAlpha(0) - this.add + const closeButton = this.add .image(width / 2, height / 2 - 180 + 360 * 1.15, "frame-button") .setOrigin(0.5, 0.5) .setDepth(1) + .setAlpha(0) .setInteractive({ useHandCursor: true, }) - .on("pointerdown", () => { + .once("pointerdown", () => { this.sound.play("cancel") localStorage.setItem("play_config", JSON.stringify(this.playConfig)) - this.scene.stop() - this.scene.resume("select", { playConfig: this.playConfig }) + + this.tweens.add({ + targets: [ + icon, + titleLabel, + noteSpeedLabel, + noteSpeedToggleButton, + noteTypeLabel, + noteTypeToggleButton, + closeLabel, + closeButton, + this.previewNote, + ], + delay: 0, + alpha: { + value: 0, + duration: 150, + }, + }) + + this.tweens.add({ + targets: [line], + delay: 100, + scaleX: { + value: 0, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + }) + this.tweens.add({ + targets: [frame], + delay: 200, + scaleY: { + value: 0, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + alpha: { + value: 0, + duration: 200, + }, + onComplete: () => { + this.scene.stop() + this.scene.resume("select", { playConfig: this.playConfig }) + }, + }) + + this.tweens.add({ + targets: [previewNoteFrame], + delay: 100, + scaleX: { + value: 0, + duration: 100, + }, + }) }) + + this.tweens.add({ + targets: [frame], + delay: 0, + scaleY: { + value: 1, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + }) + + this.tweens.add({ + targets: [line], + delay: 100, + scaleX: { + value: 1, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + }) + + this.tweens.add({ + targets: [ + icon, + titleLabel, + noteSpeedLabel, + noteSpeedToggleButton, + noteTypeLabel, + noteTypeToggleButton, + closeLabel, + closeButton, + this.previewNote, + ], + delay: 200, + alpha: { + value: 1, + duration: 150, + }, + }) + + this.tweens.add({ + targets: [previewNoteFrame], + delay: 0, + scaleX: { + value: 1, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + scaleY: { + value: 1, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + }) } update(time: number, dt: number) { diff --git a/src/scene/CreditScene.ts b/src/scene/CreditScene.ts index f7d4cdd..8b8817a 100644 --- a/src/scene/CreditScene.ts +++ b/src/scene/CreditScene.ts @@ -8,8 +8,6 @@ export class CreditScene extends Phaser.Scene { create() { const { width, height } = this.game.canvas - this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 128).setDepth(-10) - this.add .zone(width / 2, height / 2, width, height) .setInteractive({ @@ -17,18 +15,20 @@ export class CreditScene extends Phaser.Scene { }) .on("pointerdown", () => {}) - this.add + const frame = this.add .image(width / 2, height / 2, "frame-detail") .setOrigin(0.5, 0.5) .setDepth(-9) + .setScale(1, 0) - this.add + const icon = this.add .image(width / 2 - 260, height / 2 - 225, "icon-credit") .setOrigin(0, 1) .setDepth(1) .setScale(0.8) + .setAlpha(0) - this.add + const titleLabel = this.add .text(width / 2 - 260 + 60, height / 2 - 230, "クレジット", { fontFamily: "Noto Sans JP", fontSize: "55px", @@ -37,8 +37,12 @@ export class CreditScene extends Phaser.Scene { .setOrigin(0, 1) .setScale(0.5) .setDepth(1) + .setAlpha(0) - this.add.rectangle(width / 2, height / 2 - 220, 530, 3, 0xeeeeee).setDepth(2) + const line = this.add + .rectangle(width / 2, height / 2 - 220, 530, 3, 0xeeeeee) + .setDepth(2) + .setScale(0, 1) const leftCredits = [ "企画立案", @@ -54,7 +58,7 @@ export class CreditScene extends Phaser.Scene { const rightCredits = (process.env.CREDITS || "").split(/\\r\\n|\\n|\\r/) - this.add + const headerText = this.add .text(width / 2 - 260, height / 2 - 200 - 5, "RICORA Beats", { fontFamily: "Noto Sans JP", fontSize: "50px", @@ -63,8 +67,9 @@ export class CreditScene extends Phaser.Scene { .setOrigin(0, 0) .setScale(0.5) .setDepth(1) + .setAlpha(0) - this.add + const leftCreditsText = this.add .text(width / 2 - 260, height / 2 - 200 + 40, leftCredits, { fontFamily: "Noto Sans JP", fontSize: "32px", @@ -73,8 +78,9 @@ export class CreditScene extends Phaser.Scene { .setOrigin(0, 0) .setScale(0.5) .setDepth(1) + .setAlpha(0) - this.add + const rightCreditsText = this.add .text(width / 2 + 260, height / 2 - 200 + 40, rightCredits, { fontFamily: "Noto Sans JP", fontSize: "32px", @@ -84,8 +90,9 @@ export class CreditScene extends Phaser.Scene { .setOrigin(1, 0) .setScale(0.5) .setDepth(1) + .setAlpha(0) - this.add + const linkLabel1 = this.add .text(width / 2 - 260, height / 2 - 180 + 280, "RICORA", { fontFamily: "Noto Sans JP", fontSize: "25px", @@ -94,7 +101,8 @@ export class CreditScene extends Phaser.Scene { .setOrigin(0, 0) .setScale(0.5) .setDepth(1) - this.add + .setAlpha(0) + const link1 = this.add .text(width / 2 - 260, height / 2 - 180 + 280 + 17, "https://tus-ricora.com/", { fontFamily: "Noto Sans JP", fontSize: "25px", @@ -103,6 +111,7 @@ export class CreditScene extends Phaser.Scene { .setOrigin(0, 0) .setScale(0.5) .setDepth(1) + .setAlpha(0) .setInteractive({ useHandCursor: true, }) @@ -112,7 +121,7 @@ export class CreditScene extends Phaser.Scene { } }) - this.add + const linkLabel2 = this.add .text(width / 2 - 260, height / 2 - 180 + 330, "View on GitHub", { fontFamily: "Noto Sans JP", fontSize: "25px", @@ -121,8 +130,8 @@ export class CreditScene extends Phaser.Scene { .setOrigin(0, 0) .setScale(0.5) .setDepth(1) - - this.add + .setAlpha(0) + const link2 = this.add .text(width / 2 - 260, height / 2 - 180 + 330 + 17, "https://github.com/RICORA/ricora-beats/", { fontFamily: "Noto Sans JP", fontSize: "25px", @@ -131,6 +140,7 @@ export class CreditScene extends Phaser.Scene { .setOrigin(0, 0) .setScale(0.5) .setDepth(1) + .setAlpha(0) .setInteractive({ useHandCursor: true, }) @@ -140,7 +150,7 @@ export class CreditScene extends Phaser.Scene { } }) - this.add + const closeLabel = this.add .text(width / 2, height / 2 - 180 + 360 * 1.15, "閉じる", { fontFamily: "Noto Sans JP", fontSize: "35px", @@ -149,18 +159,106 @@ export class CreditScene extends Phaser.Scene { .setOrigin(0.5, 0.5) .setScale(0.5) .setDepth(2) + .setAlpha(0) - this.add + const closeButton = this.add .image(width / 2, height / 2 - 180 + 360 * 1.15, "frame-button") .setOrigin(0.5, 0.5) .setDepth(1) + .setAlpha(0) .setInteractive({ useHandCursor: true, }) - .on("pointerdown", () => { + .once("pointerdown", () => { this.sound.play("cancel") - this.scene.stop() - this.scene.resume("select") + this.tweens.add({ + targets: [ + icon, + titleLabel, + headerText, + leftCreditsText, + rightCreditsText, + linkLabel1, + link1, + linkLabel2, + link2, + closeLabel, + closeButton, + ], + delay: 0, + alpha: { + value: 0, + duration: 150, + }, + }) + + this.tweens.add({ + targets: [line], + delay: 100, + scaleX: { + value: 0, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + }) + this.tweens.add({ + targets: [frame], + delay: 200, + scaleY: { + value: 0, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + alpha: { + value: 0, + duration: 200, + }, + onComplete: () => { + this.scene.stop() + this.scene.resume("select") + }, + }) }) + + this.tweens.add({ + targets: [frame], + delay: 0, + scaleY: { + value: 1, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + }) + + this.tweens.add({ + targets: [line], + delay: 100, + scaleX: { + value: 1, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + }) + + this.tweens.add({ + targets: [ + icon, + titleLabel, + headerText, + leftCreditsText, + rightCreditsText, + linkLabel1, + link1, + linkLabel2, + link2, + closeLabel, + closeButton, + ], + delay: 200, + alpha: { + value: 1, + duration: 150, + }, + }) } } diff --git a/src/scene/LoginScene.ts b/src/scene/LoginScene.ts index 3dc8c42..b9162bd 100644 --- a/src/scene/LoginScene.ts +++ b/src/scene/LoginScene.ts @@ -15,8 +15,6 @@ export class LoginScene extends Phaser.Scene { create() { const { width, height } = this.game.canvas - this.add.rectangle(width / 2, height / 2, width, height, 0x000000, 128).setDepth(-10) - this.add .zone(width / 2, height / 2, width, height) .setInteractive({ @@ -24,14 +22,21 @@ export class LoginScene extends Phaser.Scene { }) .on("pointerdown", () => {}) - this.add + const frame = this.add .image(width / 2, height / 2, "frame-detail") .setOrigin(0.5, 0.5) .setDepth(-9) + .setScale(1, 0) - this.loginForm = this.add.dom(width / 2 - 150, 320).createFromCache("login-form") + this.loginForm = this.add + .dom(width / 2 - 150, 320) + .createFromCache("login-form") + .setAlpha(0) - this.registerForm = this.add.dom(width / 2 + 150, 320).createFromCache("register-form") + this.registerForm = this.add + .dom(width / 2 + 150, 320) + .createFromCache("register-form") + .setAlpha(0) const loginFormElement = document.getElementById("login-form")?.getElementsByTagName("form")[0] if (loginFormElement) { @@ -98,13 +103,14 @@ export class LoginScene extends Phaser.Scene { }) } - this.add + const icon = this.add .image(width / 2 - 260, height / 2 - 225, "icon-ir") .setOrigin(0, 1) .setDepth(1) .setScale(0.8) + .setAlpha(0) - this.add + const titleLabel = this.add .text(width / 2 - 260 + 60, height / 2 - 230, "インターネットランキング", { fontFamily: "Noto Sans JP", fontSize: "55px", @@ -113,10 +119,14 @@ export class LoginScene extends Phaser.Scene { .setOrigin(0, 1) .setScale(0.5) .setDepth(1) + .setAlpha(0) - this.add.rectangle(width / 2, height / 2 - 220, 530, 3, 0xeeeeee).setDepth(2) + const line = this.add + .rectangle(width / 2, height / 2 - 220, 530, 3, 0xeeeeee) + .setDepth(2) + .setScale(0, 1) - this.add + const loginLabel = this.add .text(width / 2 - 150, height / 2 - 180, "ログイン", { fontFamily: "Noto Sans JP", fontSize: "35px", @@ -125,8 +135,9 @@ export class LoginScene extends Phaser.Scene { .setOrigin(0.5, 0.5) .setScale(0.5) .setDepth(1) + .setAlpha(0) - this.add + const registerLabel = this.add .text(width / 2 + 150, height / 2 - 180, "アカウントを新規作成", { fontFamily: "Noto Sans JP", fontSize: "35px", @@ -135,8 +146,9 @@ export class LoginScene extends Phaser.Scene { .setOrigin(0.5, 0.5) .setScale(0.5) .setDepth(1) + .setAlpha(0) - this.add + const text = this.add .text( width / 2 - 260, height / 2 - 180 + 330, @@ -150,8 +162,9 @@ export class LoginScene extends Phaser.Scene { .setOrigin(0, 0.5) .setScale(0.5) .setDepth(1) + .setAlpha(0) - this.add + const closeLabel = this.add .text(width / 2, height / 2 - 180 + 360 * 1.15, "閉じる", { fontFamily: "Noto Sans JP", fontSize: "35px", @@ -160,19 +173,102 @@ export class LoginScene extends Phaser.Scene { .setOrigin(0.5, 0.5) .setScale(0.5) .setDepth(2) + .setAlpha(0) - this.add + const closeButton = this.add .image(width / 2, height / 2 - 180 + 360 * 1.15, "frame-button") .setOrigin(0.5, 0.5) .setDepth(1) + .setAlpha(0) .setInteractive({ useHandCursor: true, }) - .on("pointerdown", () => { + .once("pointerdown", () => { this.sound.play("cancel") - this.scene.stop() - this.scene.resume("select") + this.tweens.add({ + targets: [ + icon, + titleLabel, + loginLabel, + this.loginForm, + registerLabel, + this.registerForm, + text, + closeLabel, + closeButton, + ], + delay: 0, + alpha: { + value: 0, + duration: 150, + }, + }) + + this.tweens.add({ + targets: [line], + delay: 100, + scaleX: { + value: 0, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + }) + this.tweens.add({ + targets: [frame], + delay: 200, + scaleY: { + value: 0, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + alpha: { + value: 0, + duration: 200, + }, + onComplete: () => { + this.scene.stop() + this.scene.resume("select") + }, + }) }) + this.tweens.add({ + targets: [frame], + delay: 0, + scaleY: { + value: 1, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + }) + + this.tweens.add({ + targets: [line], + delay: 100, + scaleX: { + value: 1, + duration: 200, + ease: Phaser.Math.Easing.Cubic.Out, + }, + }) + + this.tweens.add({ + targets: [ + icon, + titleLabel, + loginLabel, + this.loginForm, + registerLabel, + this.registerForm, + text, + closeLabel, + closeButton, + ], + delay: 200, + alpha: { + value: 1, + duration: 150, + }, + }) } update(time: number, dt: number) {