04 舞台

在本章中，我们将实现舞台组件。

舞台组件

让我们首先设置一个舞台：

TypeScript

export const stage = {}

JavaScript

export const stage = {}

TypeScript

// ...

const components = [initialization, stage] as const

// ...

JavaScript

// ...

const components = [initialization, stage]

// ...

声明

我们也需要声明皮肤精灵：

TypeScript

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

JavaScript

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

绘制

我们可以在舞台组件的 update 方法中简单地绘制它：

TypeScript

export const stage = {
    update() {
        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)
    },
}

JavaScript

export const stage = {
    update() {
        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)
    },
}