02. 屏幕
在本章中，我们将设置屏幕。
面板(Panels)
在 VSRG (Vertical Scroll Rhythm Games，纵向滚动节奏游戏) 中，预览模式通常会渲染从左到右水平排列的多个垂直面板。
让我们设置面板的一些参数，我们假设每个面板宽度为 7 个单位 (3 个单位的轨道大小与两边大小为 2 个单位的填充)，展示两秒的游玩过程。随后，我们将根据关卡中的音符计算正确的面板数量，但就目前让我们假设只有 10 个面板。
export const panel = {
w: 7,
h: 2,
count: 10,
}
export const panel = {
w: 7,
h: 2,
count: 10,
}
屏幕坐标系
与引擎游玩模式类似，我们也应该转换我们的屏幕坐标系。
为了让渲染计算更简单，让我们将原点转换为第一个面板的中下方，1/20 的屏幕高度为 X 方向的单位长度，以及一秒的游玩过程为 Y 方向的单位长度。
export class Initialization extends Archetype {
preprocess() {
const transform = Mat.identity
.translate(panel.w / 2, 0)
.scale(screen.h / 20, screen.h / panel.h)
.translate(screen.l, screen.b)
skin.transform.set(transform)
// ...
}
}
export class Initialization extends Archetype {
preprocess() {
const transform = Mat.identity
.translate(panel.w / 2, 0)
.scale(screen.h / 20, screen.h / panel.h)
.translate(screen.l, screen.b)
skin.transform.set(transform)
// ...
}
}
画布(Canvas)
对于画布，我们让它可以从左向右滚动，其滚动方向的大小会由面板数量计算得来。
export class Initialization extends Archetype {
preprocess() {
// ...
canvas.set({
scroll: Scroll.LeftToRight,
size: (panel.count * panel.w * screen.h) / 20,
})
// ...
}
}
export class Initialization extends Archetype {
preprocess() {
// ...
canvas.set({
scroll: Scroll.LeftToRight,
size: (panel.count * panel.w * screen.h) / 20,
})
// ...
}
}