10 Time Scale

In this chapter, we will display each time scale change as a yellow line and value in the left margin, completing Preview mode.

Time Scale Change

The time scale change implementation is similar to the BPM change from the previous chapter. Both use standard archetype names and imported fields from sonolus.script.archetype. A time scale value belongs in the left margin because it affects the chart's time-based display.

First, in guide/lib/skin.py, map a field to the standard yellow grid sprite. Keep the existing fields. This reuses the grid resource from the selected skin:

@skin
class Skin:
    # ...

    timescale_change_line: StandardSprite.GRID_YELLOW

Then append the archetype below to guide/preview/bar_line.py. The imports it needs were added for PreviewBpmChange in the previous chapter:

class PreviewTimescaleChange(PreviewArchetype):
    name = StandardArchetypeName.TIMESCALE_CHANGE

    beat: StandardImport.BEAT
    timescale: StandardImport.TIMESCALE

    def preprocess(self):
        Chart.beats = max(Chart.beats, self.beat)
        Chart.duration = max(Chart.duration, beat_to_time(self.beat))

    def render(self):
        draw_line(Skin.timescale_change_line, self.beat, order=2, a=0.5)
        print_at_time(
            self.timescale,
            beat_to_time(self.beat),
            fmt=PrintFormat.TIMESCALE,
            color=PrintColor.YELLOW,
            side="left",
        )

Finally, import PreviewTimescaleChange in guide/preview/mode.py and add it after PreviewBpmChange in the archetypes list:

from guide.preview.bar_line import PreviewBpmChange, PreviewTimescaleChange

preview_mode = PreviewMode(
    archetypes=[
        PreviewInitialization,
        PreviewStage,
        PreviewNote,
        PreviewBpmChange,
        PreviewTimescaleChange,
    ],
    skin=Skin,
)

Order 2 places a time scale marker above the other timing lines at the same beat.

Checkpoint

Build the project from the project directory:

uv run sonolus-py build

Open the sample level in Preview. Confirm all of the following:

• Notes appear in the correct panels.
• Time labels and yellow time scale values appear on the left.
• Measure labels and purple BPM values appear on the right.
• Every whole beat has a line, with a stronger line every four beats.
• The canvas includes the last visible event.

Continue to Tutorial Mode.