09 Particle Effect

In this chapter, we will add particle effect to Note.

Declaring

As before, declare the particle effect to be used:

TypeScript

export const particle = defineParticle({
    effects: {
        note: ParticleEffectName.NoteCircularTapCyan,
    },
})

JavaScript

export const particle = defineParticle({
    effects: {
        note: ParticleEffectName.NoteCircularTapCyan,
    },
})

Playing

Unlike play mode where we play particle effect reactively when player taps the note, in watch mode we play particle effect when note despawns.

However note might despawn due to time skip, in which case we would not want particle effect to play. We can check time.skip and early return.

TypeScript

export class Note extends Archetype {
    // ...

    terminate() {
        if (time.skip) return

        const layout = Rect.one
            .mul(2 * note.radius)
            .scale(1, -1)
            .translate(0, 1)

        particle.effects.note.spawn(layout, 0.3, false)
    }
}

JavaScript

export class Note extends Archetype {
    // ...

    terminate() {
        if (time.skip) return

        const layout = Rect.one
            .mul(2 * note.radius)
            .scale(1, -1)
            .translate(0, 1)

        particle.effects.note.spawn(layout, 0.3, false)
    }
}