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.

TypeScript

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)

        // ...
    },
}

JavaScript

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.

TypeScript

export const judgeLine = tutorialData({
    l: Number,
    r: Number,
})

JavaScript

export const judgeLine = tutorialData({
    l: Number,
    r: Number,
})

TypeScript

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

JavaScript

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

Lastly, calculate and write to them:

TypeScript

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

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

        note.radius = noteRadius / h

        // ...
    },
}

JavaScript

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

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

        note.radius = noteRadius / h

        // ...
    },
}