Canvas components

Pixi’VN provides a set of canvas components. These components extend the Pixi.js components, adding various features, such as the ability to save their current state.

What are canvas components? Components are reusable building blocks for canvas apps, allowing app makers to create custom controls to use inside an app or across apps using a component library. Components can use advanced features such as custom properties and enable complex capabilities.

Base components

The available components are:

• Sprite corresponds to the component PixiJS.Sprite.
• Container corresponds to the component PixiJS.Container.
• Text corresponds to the component PixiJS.Text.
• ImageSprite is a component introduced by Pixi’VN.
• ImageContainer is a component introduced by Pixi’VN.
• VideoSprite is a component introduced by Pixi’VN.

Custom components

You can create custom components by extending the base components. To do this, you need to use the decorator @canvasComponentDecorator.

@canvasComponentDecorator is a decorator that saves the canvas component in memory. It has an optional parameter that is the id used by Pixi’VN to refer to this class (must be unique). If you don't pass the id, the class name will be used as the id. (How to enable decorators in TypeScript?)

It is necessary to override the memory property to store the custom component properties. In get memory(), it is very important to return the className property; this property must be equal to the id used in the decorator.

For example, you can create an AlienTinting class that extends the Sprite class to manage the direction and speed of each individual alien in an animation.

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