08. 节拍刻度线
在本章中，我们将实现节拍刻度线绘制。
刻度线
刻度线可以让玩家更精确地测量音符的位置。
就像打印一样，让我们使用一个实用函数来绘制刻度线：
// ...
export const line = (sprite: SkinSprite, beat: number, a: number) => {
const pos = panel.getPos(bpmChanges.at(beat).time)
sprite.draw(Rect.one.scale(1.5, 0.005).add(pos), 1, a)
}
// ...
export const line = (sprite, beat, a) => {
const pos = panel.getPos(bpmChanges.at(beat).time)
sprite.draw(Rect.one.scale(1.5, 0.005).add(pos), 1, a)
}
声明
标准方格精灵可以被用来绘制刻度线：
export const skin = defineSkin({
sprites: {
// ...
beatLine: SkinSpriteName.GridNeutral,
},
})
export const skin = defineSkin({
sprites: {
// ...
beatLine: SkinSpriteName.GridNeutral,
},
})
节拍刻度线
现在我们可以循环节拍，并在每一拍绘制一条刻度线来强调当前刻度：
export class Stage extends Archetype {
// ...
render() {
// ...
this.renderBeats()
// ...
}
// ...
renderBeats() {
for (let i = 0; i <= Math.floor(chart.beats); i++) {
line(skin.sprites.beatLine, i, i % 4 === 0 ? 0.25 : 0.125)
}
}
// ...
}
export class Stage extends Archetype {
// ...
render() {
// ...
this.renderBeats()
// ...
}
// ...
renderBeats() {
for (let i = 0; i <= Math.floor(chart.beats); i++) {
line(skin.sprites.beatLine, i, i % 4 === 0 ? 0.25 : 0.125)
}
}
// ...
}