Sonolus Wiki

09. BPM

In this chapter, we will setup and implement BPM Change.

BPM Change

In play mode, we don't need to implement BPM Change archetype, because BPM changes are automatically picked up by related functions and we don't need to do anything with it.

However in preview, we would like to show when BPM changes and the value it changes to by printing it to the side.

BPM Change Archetype

Let's first set up BPM Change:

preview/src/engine/previewData/archetypes/BpmChange.ts
export class BpmChange extends Archetype {}

export class BpmChange extends Archetype {}
preview/src/engine/previewData/archetypes/index.ts
export const archetypes = defineArchetypes({
    // ...
    [EngineArchetypeName.BpmChange]: BpmChange,
})

export const archetypes = defineArchetypes({
    // ...
    [EngineArchetypeName.BpmChange]: BpmChange,
})

Data

We would like to access BPM Change's beat and BPM values via Entity Data:

preview/src/engine/previewData/archetypes/BpmChange.ts
export class BpmChange extends Archetype {
    import = this.defineImport({
        beat: { name: EngineArchetypeDataName.Beat, type: Number },
        bpm: { name: EngineArchetypeDataName.Bpm, type: Number },
    })
}

export class BpmChange extends Archetype {
    import = this.defineImport({
        beat: { name: EngineArchetypeDataName.Beat, type: Number },
        bpm: { name: EngineArchetypeDataName.Bpm, type: Number },
    })
}

Declaring

preview/src/engine/previewData/skin.ts
export const skin = defineSkin({
    sprites: {
        // ...
        bpmChangeLine: SkinSpriteName.GridPurple,
    },
})

export const skin = defineSkin({
    sprites: {
        // ...
        bpmChangeLine: SkinSpriteName.GridPurple,
    },
})

Printing and Line

Now we can print the BPM value and draw line:

preview/src/engine/previewData/archetypes/BpmChange.ts
export class BpmChange extends Archetype {
    // ...

    render() {
        line(skin.sprites.bpmChangeLine, this.import.beat, 0.5)

        print(
            this.import.bpm,
            bpmChanges.at(this.import.beat).time,
            PrintFormat.BPM,
            'auto',
            PrintColor.Purple,
            'right',
        )
    }
}

export class BpmChange extends Archetype {
    // ...

    render() {
        line(skin.sprites.bpmChangeLine, this.import.beat, 0.5)

        print(
            this.import.bpm,
            bpmChanges.at(this.import.beat).time,
            PrintFormat.BPM,
            'auto',
            PrintColor.Purple,
            'right',
        )
    }
}