02. UI
In this chapter, we will set up UI.
Menu
Similar to engine play, UI setup is done in initialization component, and project templates come with code that sets up the menu at top-left corner of the screen.
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,
})
},
}
Navigation
Navigation UI allows player to navigate between segments of tutorial, and is usually positioned at left and right edges of the screen.
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
Instruction shows text explaining the action player needs to take, and is usually positioned at center of the screen.
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,
})
},
}