08. Beat Lines
In this chapter, we will implementing drawing beat lines.
Lines
Lines let players more precisely determine a note's position.
Similar to printing, let's make a utility function for drawing lines:
// ...
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)
}
Declaring
Standard grid sprites can be used for drawing lines:
export const skin = defineSkin({
sprites: {
// ...
beatLine: SkinSpriteName.GridNeutral,
},
})
export const skin = defineSkin({
sprites: {
// ...
beatLine: SkinSpriteName.GridNeutral,
},
})
Beat Lines
Now we can loop over the beats, and draw a line for every beat with emphasis on measure lines:
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)
}
}
// ...
}