Sonolus Wiki

04. Stage

In this chapter, we will implement stage component.

Stage Component

Let's first set up stage:

tutorial/src/engine/tutorialData/components/stage.ts
export const stage = {}

export const stage = {}
tutorial/src/engine/tutorialData/tutorial.ts
// ...

const components = [initialization, stage] as const

// ...

// ...

const components = [initialization, stage]

// ...

Declaring

We also need to declare skin sprites:

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

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

Drawing

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

tutorial/src/engine/tutorialData/components/stage.ts
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)
    },
}

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