19 Particle Effect

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

Particle Effects

Just like skin sprites, we need to declare which particle effects we want access to by referencing their names:

TypeScript

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

JavaScript

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

Note

To add particle effect on judgment, we can simply call spawn on the particle effect.

Let's say we want the particle effect to be twice the size of note, lasts for 0.3 seconds, and don't loop:

TypeScript

export class Note extends Archetype {
    // ...
    touch() {
        // ...

        for (const touch of touches) {
            // ...

            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 {
    // ...
    touch() {
        // ...

        for (const touch of touches) {
            // ...

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

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

            // ...
        }
    }

    // ...
}