Sonolus Wiki

06. 音符绘制

在本章中，我们将实现音符绘制逻辑。

声明

声明音符的皮肤精灵：

watch/src/engine/watchData/skin.ts
export const skin = defineSkin({
    sprites: {
        // ...
        note: SkinSpriteName.NoteHeadCyan,
    },
})

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

绘制

与游玩模式类似，我们在 initialize 回调函数中计算 z 值，并在 updateParallel 回调函数中绘制音符精灵。

然而，由于玩家造成的时间跳转，音符可以被生成和销毁多次，因此我们应该只计算一次 z 值。我们可以使用额外的变量来跳过不必要的重复计算。

watch/src/engine/watchData/archetypes/Note.ts
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)
    }
}

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