03. Stage
In this chapter, we will setup Stage and implement panel drawing logic.
Stage Archetype
Let's first set up Stage:
export class Stage extends Archetype {}
export class Stage extends Archetype {}
export const archetypes = defineArchetypes({
// ...
Stage,
})
export const archetypes = defineArchetypes({
// ...
Stage,
})
Declaring
Even though our stage in play mode is only a judgment line without lane or stage, for preview it's best to draw one so players can visualize each panel. We will use standard stage sprites:
export const skin = defineSkin({
sprites: {
stageMiddle: SkinSpriteName.StageMiddle,
stageLeftBorder: SkinSpriteName.StageLeftBorder,
stageRightBorder: SkinSpriteName.StageRightBorder,
},
})
export const skin = defineSkin({
sprites: {
stageMiddle: SkinSpriteName.StageMiddle,
stageLeftBorder: SkinSpriteName.StageLeftBorder,
stageRightBorder: SkinSpriteName.StageRightBorder,
},
})
Drawing
Drawing panels is simply looping over the panel count and drawing each:
export class Stage extends Archetype {
render() {
this.renderPanels()
}
renderPanels() {
for (let i = 0; i < panel.count; i++) {
const x = i * panel.w
const b = 0
const t = panel.h
skin.sprites.stageMiddle.draw(
new Rect({
l: -1.5,
r: 1.5,
b,
t,
}).translate(x, 0),
0,
1,
)
skin.sprites.stageLeftBorder.draw(
new Rect({
l: -1.75,
r: -1.5,
b,
t,
}).translate(x, 0),
0,
1,
)
skin.sprites.stageRightBorder.draw(
new Rect({
l: 1.5,
r: 1.75,
b,
t,
}).translate(x, 0),
0,
1,
)
}
}
}
export class Stage extends Archetype {
render() {
this.renderPanels()
}
renderPanels() {
for (let i = 0; i < panel.count; i++) {
const x = i * panel.w
const b = 0
const t = panel.h
skin.sprites.stageMiddle.draw(
new Rect({
l: -1.5,
r: 1.5,
b,
t,
}).translate(x, 0),
0,
1,
)
skin.sprites.stageLeftBorder.draw(
new Rect({
l: -1.75,
r: -1.5,
b,
t,
}).translate(x, 0),
0,
1,
)
skin.sprites.stageRightBorder.draw(
new Rect({
l: 1.5,
r: 1.75,
b,
t,
}).translate(x, 0),
0,
1,
)
}
}
}