Componenti del canvas

Pixi’VN fornisce un set di componenti canvas. Questi componenti estendono i componenti Pixi.js, aggiungendo varie funzionalità, come la possibilità di salvare il loro stato attuale.

Cosa sono i componenti canvas? I componenti sono elementi costitutivi riutilizzabili per le app canvas, che consentono agli sviluppatori di app di creare controlli personalizzati da utilizzare all'interno di un'app o tra app utilizzando una libreria di componenti. I componenti possono utilizzare funzionalità avanzate, quali proprietà personalizzate, e abilitare capacità complesse.

Componenti di base

I componenti disponibili sono:

• Sprite corrisponde al componente PixiJS.Sprite.
• Container corrisponde al componente PixiJS.Container.
• Text corrisponde al componente PixiJS.Text.
• ImageSprite è un componente introdotto da Pixi’VN.
• ImageContainer è un componente introdotto da Pixi’VN.
• VideoSprite è un componente introdotto da Pixi’VN.

Componenti personalizzati

È possibile creare componenti personalizzati estendendo i componenti di base. Per fare ciò, è necessario utilizzare il decorator @canvasComponentDecorator.

@canvasComponentDecorator è un decorator che salva il componente canvas nella memoria. Ha un parametro facoltativo che è l'id utilizzato da Pixi'VN per fare riferimento a questa classe (deve essere univoco). Se non si passa l'id, verrà utilizzato come id il nome della classe. (Come abilitare i decorator in TypeScript?)

È necessario sovrascrivere la proprietà memory per memorizzare le proprietà del componente personalizzato. In get memory(), è molto importante restituire la proprietà className; questa proprietà deve essere uguale all'id utilizzato nel decorator.

Ad esempio, è possibile creare una classe AlienTinting che estende la classe Sprite per gestire la direzione e la velocità di ogni singolo alieno in un'animazione.

@canvasComponentDecorator() // or @canvasComponentDecorator("AlienTintingTest")
class AlienTintingTest extends Sprite<IAlienTintingMemory> {
    override get memory() {
        return {
            ...super.memory,
            direction: this.direction,
            turningSpeed: this.turningSpeed,
            speed: this.speed,
            className: "AlienTintingTest",
        }
    }
    override set memory(memory: IAlienTintingMemory) {
        super.memory = memory as ICanvasSpriteMemory
        this.direction = memory.direction
        this.turningSpeed = memory.turningSpeed
        this.speed = memory.speed
    }
    direction: number = 0
    turningSpeed: number = 0
    speed: number = 0
    static override from(source: Texture | TextureSourceLike, skipCache?: boolean) {
        let sprite = Sprite.from(source, skipCache)
        let mySprite = new AlienTintingTest()
        mySprite.texture = sprite.texture
        return mySprite
    }
}