Sonolus Wiki

07. 绘制刻度

在本章中，我们将实现刻度绘制。

节拍

为了知道有多少刻度需要绘制，我们首先需要知道在一个关卡中多有少节拍。

与获取关卡长度类似，我们可以使用一个变量存储节拍，并让音符持续更新它。

preview/src/engine/previewData/chart.ts
export const chart = previewData({
    beats: Number,
    // ...
})

export const chart = previewData({
    beats: Number,
    // ...
})
preview/src/engine/previewData/archetypes/Note.ts
export class Note extends Archetype {
    // ...

    preprocess() {
        chart.beats = Math.max(chart.beats, this.import.beat)
        // ...
    }

    // ...
}

export class Note extends Archetype {
    // ...

    preprocess() {
        chart.beats = Math.max(chart.beats, this.import.beat)
        // ...
    }

    // ...
}

刻度

现在我们可以循环节拍，并在每 4 拍打印一次：

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

    render() {
        // ...
        this.printMeasures()
    }

    // ...

    printMeasures() {
        for (let i = 4; i <= Math.floor(chart.beats); i += 4) {
            print(
                i / 4 + 1,
                bpmChanges.at(i).time,
                PrintFormat.MeasureCount,
                0,
                PrintColor.Neutral,
                'right',
            )
        }
    }
}

export class Stage extends Archetype {
    // ...

    render() {
        // ...
        this.printMeasures()
    }

    // ...

    printMeasures() {
        for (let i = 4; i <= Math.floor(chart.beats); i += 4) {
            print(
                i / 4 + 1,
                bpmChanges.at(i).time,
                PrintFormat.MeasureCount,
                0,
                PrintColor.Neutral,
                'right',
            )
        }
    }
}