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.
• ImageSprite is a component introduced by Pixi’VN.
• ImageContainer is a component introduced by Pixi’VN.
• VideoSprite is a component introduced by Pixi’VN.
• Text 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 (How to enable decorators in TypeScript?). Esta función tiene los siguientes parámetros:

• name: 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.
• getInstance: A function that returns an instance of the canvas component. This function is used when the canvas state is reset.
• copyProperty: A function that copies the properties of the canvas component. This function is used when copying the properties of the canvas component into another instance of the same canvas component.

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.

const ALIEN_TINTING_TEST_ID = "AlienTintingTest"
@canvasComponentDecorator({
    name: ALIEN_TINTING_TEST_ID,
})
class AlienTintingTest extends Sprite<IAlienTintingMemory> {
    readonly pixivnId: string = CANVAS_SPINE_ID;
    override get memory() {
        return {
            ...super.memory,
            pixivnId: CANVAS_SPINE_ID,
            direction: this.direction,
            turningSpeed: this.turningSpeed,
            speed: this.speed,
        }
    }
    override async setMemory(memory: IAlienTintingMemory) {
        await super.setMemory(memory)
        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
    }
}