Sonolus Wiki

02. UI

在本章中，我们将会设置 UI。

菜单

与引擎游玩模式相同，在初始化组件中已将完成了 UI 设置，并且项目模板已经存在能设置菜单位于屏幕左上角的代码。

tutorial/src/engine/tutorialData/components/initialization.ts
export const initialization = {
    preprocess() {
        ui.menu.set({
            anchor: screen.rect.lt.add(new Vec(0.05, -0.05)),
            pivot: { x: 0, y: 1 },
            size: new Vec(0.15, 0.15).mul(ui.configuration.menu.scale),
            rotation: 0,
            alpha: ui.configuration.menu.alpha,
            background: true,
        })
    },
}

export const initialization = {
    preprocess() {
        ui.menu.set({
            anchor: screen.rect.lt.add(new Vec(0.05, -0.05)),
            pivot: { x: 0, y: 1 },
            size: new Vec(0.15, 0.15).mul(ui.configuration.menu.scale),
            rotation: 0,
            alpha: ui.configuration.menu.alpha,
            background: true,
        })
    },
}

导航

导航 UI 允许玩家在教程片段中任意切换，并且通常位于屏幕的左右边界。

tutorial/src/engine/tutorialData/components/initialization.ts
export const initialization = {
    preprocess() {
        // ...

        ui.navigation.previous.set({
            anchor: { x: screen.l + 0.05, y: 0 },
            pivot: { x: 0, y: 0.5 },
            size: new Vec(0.15, 0.15).mul(ui.configuration.navigation.scale),
            rotation: 0,
            alpha: ui.configuration.navigation.alpha,
            background: true,
        })
        ui.navigation.next.set({
            anchor: { x: screen.r - 0.05, y: 0 },
            pivot: { x: 1, y: 0.5 },
            size: new Vec(0.15, 0.15).mul(ui.configuration.navigation.scale),
            rotation: 0,
            alpha: ui.configuration.navigation.alpha,
            background: true,
        })
    },
}

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

        ui.navigation.previous.set({
            anchor: { x: screen.l + 0.05, y: 0 },
            pivot: { x: 0, y: 0.5 },
            size: new Vec(0.15, 0.15).mul(ui.configuration.navigation.scale),
            rotation: 0,
            alpha: ui.configuration.navigation.alpha,
            background: true,
        })
        ui.navigation.next.set({
            anchor: { x: screen.r - 0.05, y: 0 },
            pivot: { x: 1, y: 0.5 },
            size: new Vec(0.15, 0.15).mul(ui.configuration.navigation.scale),
            rotation: 0,
            alpha: ui.configuration.navigation.alpha,
            background: true,
        })
    },
}

介绍

介绍(Instruction)展示了一系列文字，为用户解释哪些操作需要执行，其通常位于屏幕的中心。

tutorial/src/engine/tutorialData/components/initialization.ts
export const initialization = {
    preprocess() {
        // ...

        ui.instruction.set({
            anchor: Vec.zero,
            pivot: { x: 0.5, y: 0.5 },
            size: new Vec(1.2, 0.15).mul(ui.configuration.instruction.scale),
            rotation: 0,
            alpha: ui.configuration.instruction.alpha,
            background: true,
        })
    },
}

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

        ui.instruction.set({
            anchor: Vec.zero,
            pivot: { x: 0.5, y: 0.5 },
            size: new Vec(1.2, 0.15).mul(ui.configuration.instruction.scale),
            rotation: 0,
            alpha: ui.configuration.instruction.alpha,
            background: true,
        })
    },
}