🎨 選曲シーンの各メニューのウィンドウにアニメーションを追加 (#22)

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,27 +21,27 @@ 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({
         useHandCursor: false,
       })
       .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) {