06 Stage

In this chapter, we will implement drawing logic of Stage.

Skin Sprites

By default, engine does not have access to any sprite in the skin player selected. In order to use a sprite, engine must declare it by referencing its name.

The name of a skin sprite is simply a string, and there are standard sprites with known names that every skin should have. These standard sprites allow skins to be used across multiple engines, and engines should fallback to using standard sprites if the desired custom sprites don't exist.

Declaring

Our stage is very simple: just the judgment line. Since we are not using custom sprites, we can use the standard judgment line sprite:

TypeScript

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

JavaScript

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

Drawing

Let's say we want judgment line to has a thickness of 1/4 the note radius, and since we already transformed our screen coordinate system to have judgment line at y = 1, the calculation is very simple:

TypeScript

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

JavaScript

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

Responding to Touches

Let's improve our judgment line by making it respond to touches:

TypeScript

export class Stage extends Archetype {
    // ...

    updateParallel() {
        // ...

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

JavaScript

export class Stage extends Archetype {
    // ...

    updateParallel() {
        // ...

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