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.

TypeScript

export const instruction = defineInstruction({
    texts: {
        tap: Text.Tap,
    },

    icons: {
        hand: InstructionIconName.Hand,
    },
})

JavaScript

export const instruction = defineInstruction({
    texts: {
        tap: Text.Tap,
    },

    icons: {
        hand: InstructionIconName.Hand,
    },
})

Text

Let's show the tap text:

TypeScript

export const noteFrozen = {
    enter() {
        // ...

        instruction.texts.tap.show()
    },

    exit() {
        // ...

        instruction.texts.clear()
    },
}

JavaScript

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:

TypeScript

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,
        )
    },

    // ...
}

JavaScript

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,
        )
    },

    // ...
}