# 02. Screen

In this chapter, we will set up screen.

# Panels

In VSRGs, preview is typically rendered as many vertical panels laid out horizontally from left to right.

Let's set up some parameters of panels. Let's say we want each panel to be 7 units in width (3 units of lane size with 2 units of padding on each side), and displaying 2 seconds of gameplay. Later on, we will calculate the correct panel count based on notes in the level, but for now let's say there are 10 panels.

export const panel = {
    w: 7,
    h: 2,

    count: 10,
}

export const panel = {
    w: 7,
    h: 2,

    count: 10,
}

# Screen Coordinate System

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

To make rendering calculation easier, let's transform our origin to center bottom of the first panel, where 1/20 of screen height is one unit in the X direction, and one second of gameplay is one unit in the Y direction.

export class Initialization extends Archetype {
    preprocess() {
        const transform = Mat.identity
            .translate(panel.w / 2, 0)
            .scale(screen.h / 20, screen.h / panel.h)
            .translate(screen.l, screen.b)
        skin.transform.set(transform)

        // ...
    }
}

export class Initialization extends Archetype {
    preprocess() {
        const transform = Mat.identity
            .translate(panel.w / 2, 0)
            .scale(screen.h / 20, screen.h / panel.h)
            .translate(screen.l, screen.b)
        skin.transform.set(transform)

        // ...
    }
}

# Canvas

For canvas, we set it to scroll from left to right, with a size (in the direction of scrolling) calculated from panel count.

export class Initialization extends Archetype {
    preprocess() {
        // ...

        canvas.set({
            scroll: Scroll.LeftToRight,
            size: (panel.count * panel.w * screen.h) / 20,
        })

        // ...
    }
}

export class Initialization extends Archetype {
    preprocess() {
        // ...

        canvas.set({
            scroll: Scroll.LeftToRight,
            size: (panel.count * panel.w * screen.h) / 20,
        })

        // ...
    }
}