07. Instructions
In this chapter, we will add instructions to note frozen segment.
Declaring
Similar to other resources, we need to declare instruction texts and icons we want to access.
For our tap note, we only need tap text and hand icon.
export const instruction = defineInstruction({
texts: {
tap: Text.Tap,
},
icons: {
hand: InstructionIconName.Hand,
},
})
export const instruction = defineInstruction({
texts: {
tap: Text.Tap,
},
icons: {
hand: InstructionIconName.Hand,
},
})
Text
Let's show the tap text:
export const noteFrozen = {
enter() {
// ...
instruction.texts.tap.show()
},
exit() {
// ...
instruction.texts.clear()
},
}
export const noteFrozen = {
enter() {
// ...
instruction.texts.tap.show()
},
exit() {
// ...
instruction.texts.clear()
},
}
Icon
Let's use the hand icon to show an animation of tapping:
export const noteFrozen = {
// ...
update() {
const angle = Math.remapClamped(0.25, 0.75, Math.PI / 6, Math.PI / 3, segment.time % 1)
const a = Math.unlerpClamped(0.5, 0.25, Math.abs((segment.time % 1) - 0.5))
const position = new Vec(0, -1)
.rotate(Math.PI / 3)
.mul(0.25 * ui.configuration.instruction.scale)
.translate(0, -0.6)
instruction.icons.hand.paint(
new Vec(0, 1)
.rotate(angle)
.mul(0.25 * ui.configuration.instruction.scale)
.add(position),
0.25 * ui.configuration.instruction.scale,
(180 * angle) / Math.PI,
0,
a * ui.configuration.instruction.alpha,
)
},
// ...
}
export const noteFrozen = {
// ...
update() {
const angle = Math.remapClamped(0.25, 0.75, Math.PI / 6, Math.PI / 3, segment.time % 1)
const a = Math.unlerpClamped(0.5, 0.25, Math.abs((segment.time % 1) - 0.5))
const position = new Vec(0, -1)
.rotate(Math.PI / 3)
.mul(0.25 * ui.configuration.instruction.scale)
.translate(0, -0.6)
instruction.icons.hand.paint(
new Vec(0, 1)
.rotate(angle)
.mul(0.25 * ui.configuration.instruction.scale)
.add(position),
0.25 * ui.configuration.instruction.scale,
(180 * angle) / Math.PI,
0,
a * ui.configuration.instruction.alpha,
)
},
// ...
}