✨ 細長ノーツを実装

src/class/ChartPlayer.ts

@@ -88,9 +88,11 @@ export class ChartPlayer {
       }
 
       let noteImage: string = ""
+      let noteLightImage: string | null = null
       let longNoteImage: string = ""
       let displaySizeX: number = 0
       let displaySizeY: number = 0
+      let bandDisplaySizeX: number = 0
       let positionX: number = 0
       let visible: boolean = true
       if (key == 4) {
@@ -118,6 +120,7 @@ export class ChartPlayer {
 
         displaySizeX = { 4: 214, 5: 170, 6: 139, 7: 119 }[key]
         displaySizeY = 40
+        bandDisplaySizeX = displaySizeX
 
         if (laneIndex == 1 || laneIndex == 5) {
           noteImage = "note-rectangle-2"
@@ -139,7 +142,20 @@ export class ChartPlayer {
         longNoteImage = "longnote-circle"
         displaySizeX = 100
         displaySizeY = 100
+        bandDisplaySizeX = 100
         visible = true
+      } else if (playConfig.noteType === "line") {
+        if (isLongNoteEnd || isLongNoteStart) {
+          noteImage = "note-line-3"
+          noteLightImage = "note-line-light-3"
+        } else {
+          noteImage = "note-line-1"
+          noteLightImage = "note-line-light-1"
+        }
+        longNoteImage = "longnote-line"
+        displaySizeX = { 4: 246, 5: 195, 6: 160, 7: 137 }[key]
+        displaySizeY = 60
+        bandDisplaySizeX = { 4: 185, 5: 147, 6: 120, 7: 103 }[key]
       }
 
       if (isLongNoteEnd && isLatestEndLongNote[laneIndex] && beatLatestEndLongNote[laneIndex] != beat) {
@@ -150,7 +166,7 @@ export class ChartPlayer {
           beat,
           scene.add
             .image(positionX, -100, longNoteImage)
-            .setDisplaySize(displaySizeX, 0)
+            .setDisplaySize(bandDisplaySizeX, 0)
             .setOrigin(0.5, 0)
             .setDepth(-1)
             .setAlpha(1),
@@ -169,6 +185,9 @@ export class ChartPlayer {
           .setDisplaySize(displaySizeX, displaySizeY)
           .setDepth(1)
           .setVisible(visible),
+        noteLightImage !== null
+          ? scene.add.image(positionX, -100, noteLightImage).setDisplaySize(displaySizeX, displaySizeY).setDepth(2)
+          : null,
         isBGM,
         false,
         isLongNoteStart,
@@ -237,6 +256,7 @@ export class ChartPlayer {
 
       for (const [noteIndex, note] of this.lanes[laneIndex].entries()) {
         note.image.y = 640 + Math.min((beat - note.beat) * noteSpeed, 0)
+
         if (
           !note.isJudged &&
           ((!note.isLongEnd && note.sec + this.judgeRanges.slice(-1)[0] / 1000 < playingSec) ||
@@ -278,6 +298,11 @@ export class ChartPlayer {
             this.combo = 0
           }
         }
+        if (note.lightImage !== null) {
+          note.lightImage.setVisible(note.image.visible)
+          note.lightImage.y = note.image.y
+          note.lightImage.setAlpha(1 - 0.6 * ((beat % 1) % 1))
+        }
       }
     }
     for (const judgeMeter of this.judgeMeters) {

src/class/Note.ts

@@ -1,10 +1,9 @@
-import bms from "bms"
-
 export class Note {
   public beat: number
   public sec: number
   public value: number
   public image: Phaser.GameObjects.Image
+  public lightImage: Phaser.GameObjects.Image | null
   public isBGM: boolean
   public isJudged: boolean
   public isLongStart: boolean
@@ -15,6 +14,7 @@ export class Note {
     sec: number,
     value: number,
     image: Phaser.GameObjects.Image,
+    lightImage: Phaser.GameObjects.Image | null,
     isBGM: boolean,
     isJudged: boolean,
     isLongStart: boolean,
@@ -24,6 +24,7 @@ export class Note {
     this.sec = sec
     this.value = value
     this.image = image
+    this.lightImage = lightImage
     this.isBGM = isBGM
     this.isJudged = isJudged
     this.isLongStart = isLongStart

src/class/PlayConfig.ts

@@ -1,4 +1,4 @@
-export type NoteType = "circle" | "rectangle"
+export type NoteType = "circle" | "rectangle" | "line"
 type Key = 4 | 5 | 6 | 7
 type Difficulty = 1 | 2 | 3 | 4
 

src/scene/ConfigScene.ts

@@ -94,7 +94,7 @@ export class ConfigScene extends Phaser.Scene {
       .setScale(0.5)
       .setDepth(1)
 
-    const noteTypeList: NoteType[] = ["circle", "rectangle"]
+    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)
@@ -143,6 +143,8 @@ export class ConfigScene extends Phaser.Scene {
       this.previewNote.setTexture("note-circle-1").setDisplaySize(100, 100)
     } else if (this.playConfig.noteType === "rectangle") {
       this.previewNote.setTexture("note-rectangle-2").setDisplaySize(120, 40)
+    } else if (this.playConfig.noteType === "line") {
+      this.previewNote.setTexture("note-line-1").setDisplaySize(138, 60)
     }
     const previewTime = new Date().getTime() - this.previewTimer.getTime()
     this.previewNote.setY(

src/scene/LoadingScene.ts

@@ -67,12 +67,22 @@ export class LoadingScene extends Phaser.Scene {
     this.load.image("note-circle-2", "./assets/skin/note_circle_2.png")
     this.load.image("note-circle-3", "./assets/skin/note_circle_3.png")
 
+    this.load.image("note-line-1", "./assets/skin/note_line_1.png")
+    this.load.image("note-line-2", "./assets/skin/note_line_1.png")
+    this.load.image("note-line-3", "./assets/skin/note_line_3.png")
+
+    this.load.image("note-line-light-1", "./assets/skin/note_line_light_1.png")
+    this.load.image("note-line-light-2", "./assets/skin/note_line_light_1.png")
+    this.load.image("note-line-light-3", "./assets/skin/note_line_light_3.png")
+
     this.load.image("longnote-1", "./assets/skin/longnote1.png")
     this.load.image("longnote-2", "./assets/skin/longnote2.png")
     this.load.image("longnote-3", "./assets/skin/longnote3.png")
 
     this.load.image("longnote-circle", "./assets/skin/longnote_circle.png")
 
+    this.load.image("longnote-line", "./assets/skin/longnote_line.png")
+
     this.load.image("judge-0", "./assets/skin/judge_0.png")
     this.load.image("judge-1", "./assets/skin/judge_1.png")
     this.load.image("judge-2", "./assets/skin/judge_2.png")