Sonolus Wiki

03. 屏幕

在本章中，我们将设置屏幕。

屏幕坐标系

与引擎游玩模式相同，我们也应该转换我们的屏幕坐标系。

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)

        // ...
    },
}

共享数据

与之前类似，我们也需要设置共享数据，但我们使用的是 Tutorial Data 区块。

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

最后，计算并写入他们：

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

        // ...
    },
}