02 UI

In this chapter, we will set up the tutorial UI.

Shared UI

The shared init_ui helper already configures the menu and the layouts introduced by the earlier sections. Replace guide/tutorial/preprocess.py with:

from guide.lib.ui import init_ui


def preprocess():
    init_ui()

The runtime_ui function exposes the UI elements, while safe_area provides the usable screen bounds. We will use them to add the tutorial-specific layouts to the same helper.

Navigation

The navigation UI usually moves between note phases and is positioned at the left and right edges of the screen. This guide will use one tap phase, so either button will restart that phase.

In guide/lib/ui.py, keep the existing init_ui contents. Add these layouts at the end of the function:

def init_ui():
    ui = runtime_ui()

    # ...

    ui.previous.update(
        anchor=Vec2(safe_area().l + 0.05, 0),
        pivot=Vec2(0, 0.5),
        dimensions=Vec2(0.15, 0.15) * ui.navigation_config.scale,
        rotation=0,
        alpha=ui.navigation_config.alpha,
        background=True,
    )
    ui.next.update(
        anchor=Vec2(safe_area().r - 0.05, 0),
        pivot=Vec2(1, 0.5),
        dimensions=Vec2(0.15, 0.15) * ui.navigation_config.scale,
        rotation=0,
        alpha=ui.navigation_config.alpha,
        background=True,
    )

Instruction

The instruction UI shows the action the player needs to take. Add its layout after the navigation layouts in the same init_ui function:

def init_ui():
    ui = runtime_ui()

    # ...

    ui.instruction.update(
        anchor=Vec2(0, 0),
        pivot=Vec2(0.5, 0.5),
        dimensions=Vec2(1.2, 0.15) * ui.instruction_config.scale,
        rotation=0,
        alpha=ui.instruction_config.alpha,
        background=True,
    )

The changes to guide/lib/ui.py are shared by every mode. Verify that play, watch, and preview still show their existing UI. In tutorial mode, the menu and both navigation buttons should now appear. The instruction area remains empty until chapter 07.