07. 介绍
在本章中，我们将添加介绍性文字到我们的冷却片段。
声明
与其他资源类似，我们需要声明我们想访问的介绍性文本与图标。
对于我们的击打音符，我们只需要击打文本与手的图标。
export const instruction = defineInstruction({
texts: {
tap: Text.Tap,
},
icons: {
hand: InstructionIconName.Hand,
},
})
export const instruction = defineInstruction({
texts: {
tap: Text.Tap,
},
icons: {
hand: InstructionIconName.Hand,
},
})
文本
让我们显示击打文本：
export const noteFrozen = {
enter() {
// ...
instruction.texts.tap.show()
},
exit() {
// ...
instruction.texts.clear()
},
}
export const noteFrozen = {
enter() {
// ...
instruction.texts.tap.show()
},
exit() {
// ...
instruction.texts.clear()
},
}
图标
让我们使用手图标来显示击打动画：
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,
)
},
// ...
}