03. 舞台
在本章中，我们将设置舞台并实现面板绘制逻辑。
舞台原型
让我们首先设置舞台原型：
export class Stage extends Archetype {}
export class Stage extends Archetype {}
export const archetypes = defineArchetypes({
// ...
Stage,
})
export const archetypes = defineArchetypes({
// ...
Stage,
})
声明
即使在游玩模式中，我们的舞台只有一条没有轨道或舞台的判定线，但在预览模式中，绘制一条是最好的选择，这样玩家能够看到每一个面板。我们将使用标准舞台精灵：
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,
},
})
绘制
绘制面板就是简单地循环面板数量并对每个面板进行绘制：
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,
)
}
}
}