# Components (/start/canvas-components)



Pixi’VN provides a set of canvas components. These components extend the [Pixi.js](https://pixijs.com/) components, adding various features, such as the ability to save their current state.

<Accordions>
  <Accordion title="Built-in components" id="base-components">
    * [`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite) corresponds to the component [`PixiJS.Sprite`](https://pixijs.com/8.x/guides/components/sprites).
    * [`Container`](/jsdoc/pixi-vn/index/classes/Container) corresponds to the component [`PixiJS.Container`](https://pixijs.com/8.x/guides/components/containers).
    * <DynamicLink href="/start/canvas-image">`ImageSprite`</DynamicLink> is a
      component introduced by Pixi’VN.
    * <DynamicLink href="/start/canvas-image-container">`ImageContainer`</DynamicLink> is a component introduced by Pixi’VN.
    * <DynamicLink href="/start/canvas-video">`VideoSprite`</DynamicLink> is a
      component introduced by Pixi’VN.
    * <DynamicLink href="/start/canvas-text">`Text`</DynamicLink> is a component
      introduced by Pixi’VN.
  </Accordion>

  <Accordion title="Plugin components" id="additional-components">
    * <DynamicLink href="/start/canvas-spine2D">Spine 2D</DynamicLink> is a
      component installable via the Pixi’VN plugin system. It is used to render
      Spine 2D animations.
  </Accordion>
</Accordions>

## Other features [#other-features]

<Accordions>
  <Accordion title="Custom components" id="custom-components">
    You can create custom components by extending the base components. To do this, you need to use the decorator [`@canvasComponentDecorator`](/jsdoc/pixi-vn/index/functions/canvasComponentDecorator).

    It is necessary to override the [`memory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#memory) getter and the [`setMemory`](/jsdoc/pixi-vn/index/classes/CanvasBaseItem#setmemory) method 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.

    ```ts title="canvas/components/AlienTinting.ts"
    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;
        }
    }
    ```
  </Accordion>
</Accordions>