Sonolus Wiki

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:

play/src/engine/playData/particle.ts
export const particle = defineParticle({
    effects: {
        note: ParticleEffectName.NoteCircularTapCyan,
    },
})

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:

play/src/engine/playData/archetypes/Note.ts
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)

            // ...
        }
    }

    // ...
}

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)

            // ...
        }
    }

    // ...
}