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

**URL:** <https://phaser.discourse.group/t/i-created-a-rhythmic-note-but-its-not-synchronized-or-animated-properly/13557>\
**Category:** Phaser 3\
**Created:** [September 14, 2023, 3:00pm UTC](https://phaser.discourse.group/t/i-created-a-rhythmic-note-but-its-not-synchronized-or-animated-properly/13557 "2023-09-14T15:00:59Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mynerva0x13](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mynerva0x13/32/7760_2.png) [@mynerva0x13](https://phaser.discourse.group/u/mynerva0x13)\
**Post date:** [September 14, 2023, 3:00pm UTC](https://phaser.discourse.group/t/i-created-a-rhythmic-note-but-its-not-synchronized-or-animated-properly/13557/1 "2023-09-14T15:00:59Z")

</div>

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:

```javascript
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);
        }
    });
}

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 14, 2023, 3:29pm UTC](https://phaser.discourse.group/t/i-created-a-rhythmic-note-but-its-not-synchronized-or-animated-properly/13557/2 "2023-09-14T15:29:24Z")

</div>

👋

First I would try a [looped timer event](https://labs.phaser.io/edit.html?src=src%5Ctime%5Clooped%20event.js).

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

---

<div class="post-metadata">

**Author:** ![mynerva0x13](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mynerva0x13/32/7760_2.png) [@mynerva0x13](https://phaser.discourse.group/u/mynerva0x13)\
**Post date:** [September 15, 2023, 8:06am UTC](https://phaser.discourse.group/t/i-created-a-rhythmic-note-but-its-not-synchronized-or-animated-properly/13557/3 "2023-09-15T08:06:24Z")

</div>

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](https://youtu.be/9gkfh92oIAQ?si=o5tSb6pM_CosBTOm)

**and the reference** : [https://youtu.be/49gLC9yiGOg?si=wWcldHWIiAhswDRq&t=39](https://youtu.be/49gLC9yiGOg?si=wWcldHWIiAhswDRq&t=39)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 15, 2023, 4:16pm UTC](https://phaser.discourse.group/t/i-created-a-rhythmic-note-but-its-not-synchronized-or-animated-properly/13557/4 "2023-09-15T16:16:35Z")

</div>

> [@mynerva0x13](#):
>
> **here the video** : [https://youtu.be/9gkfh92oIAQ?si=o5tSb6pM\_CosBTOm](https://youtu.be/9gkfh92oIAQ?si=o5tSb6pM_CosBTOm)

Which part is wrong?

---

<div class="post-metadata">

**Author:** ![mynerva0x13](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mynerva0x13/32/7760_2.png) [@mynerva0x13](https://phaser.discourse.group/u/mynerva0x13)\
**Post date:** [September 17, 2023, 5:18am UTC](https://phaser.discourse.group/t/i-created-a-rhythmic-note-but-its-not-synchronized-or-animated-properly/13557/5 "2023-09-17T05:18:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![mynerva0x13](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/mynerva0x13/32/7760_2.png) [@mynerva0x13](https://phaser.discourse.group/u/mynerva0x13)\
**Post date:** [September 17, 2023, 7:37am UTC](https://phaser.discourse.group/t/i-created-a-rhythmic-note-but-its-not-synchronized-or-animated-properly/13557/6 "2023-09-17T07:37:29Z")

</div>

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

thank you very much for helping 🥰

```javascript
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()
            }
        });
        
        
    }

```