06 Desenho de Notas

Neste capítulo, implementaremos a lógica de desenho do Note.

Declarando

Declare o sprite da skin da nota:

TypeScript

export const skin = defineSkin({
    sprites: {
        // ...
        note: SkinSpriteName.NoteHeadCyan,
    },
})

JavaScript

export const skin = defineSkin({
    sprites: {
        // ...
        note: SkinSpriteName.NoteHeadCyan,
    },
})

Desenho

Semelhante ao modo de reprodução, calculamos o valor z no retorno de chamada initialize e desenhamos o sprite da nota no retorno de chamada updateParallel .

No entanto, as notas podem aparecer e desaparecer várias vezes devido ao salto temporal dos jogadores. Devemos calcular o valor z apenas uma vez. Podemos usar uma variável extra para evitar recálculos desnecessários.

TypeScript

export class Note extends Archetype {
    // ...

    initialized = this.entityMemory(Boolean)

    // ...

    z = this.entityMemory(Number)

    // ...

    initialize() {
        if (this.initialized) return
        this.initialized = true

        this.z = 1000 - this.targetTime
    }

    updateParallel() {
        const y = Math.unlerp(this.visualTime.min, this.visualTime.max, time.scaled)

        const layout = Rect.one.mul(note.radius).scale(1, -1).translate(0, y)

        skin.sprites.note.draw(layout, this.z, 1)
    }
}

JavaScript

export class Note extends Archetype {
    // ...

    initialized = this.entityMemory(Boolean)

    // ...

    z = this.entityMemory(Number)

    // ...

    initialize() {
        if (this.initialized) return
        this.initialized = true

        this.z = 1000 - this.targetTime
    }

    updateParallel() {
        const y = Math.unlerp(this.visualTime.min, this.visualTime.max, time.scaled)

        const layout = Rect.one.mul(note.radius).scale(1, -1).translate(0, y)

        skin.sprites.note.draw(layout, this.z, 1)
    }
}