04 Stage

In this chapter, we will implement stage component.

Stage Component

Let's first set up stage:

TypeScript

export const stage = {}

JavaScript

export const stage = {}

TypeScript

// ...

const components = [initialization, stage] as const

// ...

JavaScript

// ...

const components = [initialization, stage]

// ...

Declaring

We also need to declare skin sprites:

TypeScript

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

JavaScript

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

Drawing

We can simply draw it in the update method of stage component:

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)
    },
}