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:

TypeScript

export class BpmChange extends Archetype {}

JavaScript

export class BpmChange extends Archetype {}

TypeScript

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

JavaScript

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

Data

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

TypeScript

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

JavaScript

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

Declaring

TypeScript

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

JavaScript

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

Printing and Line

Now we can print the BPM value and draw line:

TypeScript

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',
        )
    }
}

JavaScript

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',
        )
    }
}