"I created a rhythmic note, but it's not synchronized or animated properly."

Phaser 3
1

I’m encountering an issue when creating spawning notes. They’re not synchronized, and I’m unsure how to address this problem. I could use some assistance.

Here are my codes:

update(time, delta) {
    const deltaSeconds = delta / 1000;
    elapsedTime += deltaSeconds;
    if (elapsedTime >= this.beatDuration) {
        beatCount++;
        elapsedTime -= this.beatDuration;
        this.metronome.play();
        this.scoreText.setText(`Beat Count: ${beatCount}`);
        this.spawnNote();
    }
}

spawnNote() {
    const finalRadius = 2000;


    this.circle = new Phaser.Geom.Circle(1200 / 2, 700 / 2, 10);
    this.path = this.add.graphics({
        lineStyle: {
            width: 5,
            color: 0xffffff
        } 
    });

    this.tweens.add({
        targets: this.circle,
        radius: finalRadius,
        duration: 4000,
        ease: 'Linear', 
        onComplete: () => {
          
            this.path.clear();
            this.tweens.remove(this); 
        },
        onUpdate: () => {
            this.path.clear();
            this.path.strokeCircleShape(this.circle);
        }
    });
}
2

:wave:

First I would try a looped timer event.

For very precise synchronization you may need to use the Web Audio currentTime.

1 Like
3

But I can’t create a beat properly.
I have a note map array for this. The only thing is to fix this and create a note per beat.

here the video: https://youtu.be/9gkfh92oIAQ?si=o5tSb6pM_CosBTOm

and the reference: https://youtu.be/49gLC9yiGOg?si=wWcldHWIiAhswDRq&t=39

4

Which part is wrong?

5

in part 0:20: I couldn’t destroy the shape of the shape when the tween animation finished.

6

It’s okay now. I can generate my notes through this code and could make a rhythm game.

thank you very much for helping :smiling_face_with_three_hearts:

spawnNote() {
        const finalRadius = 2000;    
  
        const r3 = this.add.circle(1200/2, 700/2, 10);
        r3.setStrokeStyle(2, 0x1a65ac);

        this.tweens.add({
            targets: r3,
            radius: finalRadius,
            duration: 4000,
            ease: 'Linear', // Use 'Linear' or other easing functions for desired effect
            onComplete: () => {
                r3.destroy()
            }
        });
        
        
    }