Sonolus Wiki

03. Screen

In this chapter, we will set up screen.

Screen Coordinate System

Similar to engine play, we should also transform our screen coordinate system.

tutorial/src/engine/tutorialData/components/initialization.ts
export const initialization = {
    preprocess() {
        const noteRadius = 0.2
        const judgeLineY = -0.6

        const t = screen.t + noteRadius
        const b = judgeLineY
        const h = t - b

        const transform = Mat.identity.scale(h, -h).translate(0, t)

        skin.transform.set(transform)
        particle.transform.set(transform)

        // ...
    },
}

export const initialization = {
    preprocess() {
        const noteRadius = 0.2
        const judgeLineY = -0.6

        const t = screen.t + noteRadius
        const b = judgeLineY
        const h = t - b

        const transform = Mat.identity.scale(h, -h).translate(0, t)

        skin.transform.set(transform)
        particle.transform.set(transform)

        // ...
    },
}

Shared Data

As before, we also need to set up shared data but using Tutorial Data block instead.

tutorial/src/engine/tutorialData/judgeLine.ts
export const judgeLine = tutorialData({
    l: Number,
    r: Number,
})

export const judgeLine = tutorialData({
    l: Number,
    r: Number,
})
tutorial/src/engine/tutorialData/note.ts
export const note = tutorialData({
    radius: Number,
})

export const note = tutorialData({
    radius: Number,
})

Lastly, calculate and write to them:

tutorial/src/engine/tutorialData/components/initialization.ts
export const initialization = {
    preprocess() {
        // ...

        judgeLine.l = screen.l / h
        judgeLine.r = screen.r / h

        note.radius = noteRadius / h

        // ...
    },
}

export const initialization = {
    preprocess() {
        // ...

        judgeLine.l = screen.l / h
        judgeLine.r = screen.r / h

        note.radius = noteRadius / h

        // ...
    },
}