Sonolus Wiki

06. 舞台

本章我们将实现舞台的绘制逻辑。

皮肤精灵图

默认情况下，引擎无法访问玩家所选皮肤中的任何精灵图。为了使用精灵图，引擎必须通过引用它的名字来声明它。

皮肤精灵图的名称只是一个字符串，每个皮肤都应该有已知名称的标准精灵图。这些标准精灵图允许跨引擎使用，如果所需的自定义精灵图不存在，引擎应该回退到使用标准精灵图。

声明

我们的舞台很简单：就是判定线。由于我们没有使用自定义精灵图，我们可以使用标准判定线精灵图：

play/src/engine/playData/skin.ts
export const skin = defineSkin({
    sprites: {
        judgeLine: SkinSpriteName.JudgmentLine,
    },
})

export const skin = defineSkin({
    sprites: {
        judgeLine: SkinSpriteName.JudgmentLine,
    },
})

绘制

假设我们希望判定线的粗细为音符半径的 1/4，并且由于我们已经将屏幕坐标系转换为在y = 1处有判定线，因此计算非常简单：

play/src/engine/playData/archetypes/Stage.ts
export class Stage extends Archetype {
    // ...

    updateParallel() {
        const layout = new Rect({
            l: judgeLine.l,
            r: judgeLine.r,
            t: 1 - note.radius / 4,
            b: 1 + note.radius / 4,
        })

        skin.sprites.judgeLine.draw(layout, 0, 1)
    }
}

export class Stage extends Archetype {
    // ...

    updateParallel() {
        const layout = new Rect({
            l: judgeLine.l,
            r: judgeLine.r,
            t: 1 - note.radius / 4,
            b: 1 + note.radius / 4,
        })

        skin.sprites.judgeLine.draw(layout, 0, 1)
    }
}

响应触摸

让我们通过让它响应触摸来变更我们的判定线的样子：

play/src/engine/playData/archetypes/Stage.ts
export class Stage extends Archetype {
    // ...

    updateParallel() {
        // ...

        skin.sprites.judgeLine.draw(layout, 0, touches.count ? 1 : 0.5)
    }
}

export class Stage extends Archetype {
    // ...

    updateParallel() {
        // ...

        skin.sprites.judgeLine.draw(layout, 0, touches.count ? 1 : 0.5)
    }
}