Canvas (WebGL/WebGPU)

The ink + Pixi’VN integration introduces a "# script" that allows you to show, edit, remove, and animate a canvas component.

=== start ===
# show image eggHead x 20 y 20
# show image flowerTop x 220 y 20 with dissolve
# show image helmlok x 20 y 220 with movein
# show image skully x 220 y 220 with zoomin
# pause
# move eggHead x 300 y 0
# rotate flowerTop
# edit image helmlok alpha 0.5
# shake skully
# pause
# remove image eggHead
# remove image flowerTop with dissolve duration 2
# remove image helmlok with moveout
# remove image skully with zoomout
# pause
-> DONE

Функции компонентов

Отображение

You can use the show to show a canvas component in ink. To do this, you need to use the following syntax:

# show image eggHead
# show image "eggHead 2" eggHead xAlign 1 yAlign 1
# show image flowerTop xAlign 0 yAlign 1 visible true cursor "pointer" alpha 0.5
# show video my_video xAlign 1 yAlign 0
# show text hello "Hello, this is a text" xAlign 0.5 yAlign 0.5 style \\{ "fill": "red", "fontSize": 30 \\}

Available parameters (all optional) are the properties of PixiVNJsonCanvasImageVideoShowProps or PixiVNJsonCanvasTextShowProps.

Редактировать

You can use the edit to edit a canvas component in ink. To do this, you need to use the following syntax:

# edit image bg position { "x": 20, "y": 30 } visible true cursor "pointer" alpha 0.5

Available parameters (all optional) vary by component:

• image: properties of ImageSpriteMemory.
• video: properties of VideoSpriteMemory.
• imagecontainer: properties of ImageContainerMemory.
• text: properties of TextMemory.

Удалить

You can use the remove to remove a canvas componentin ink. To do this, you need to use the following syntax:

# remove image bg
# remove image "bg 2"

Пауза и возобновление

=== start ===
# show video my_video
Video started
# pause video my_video
Video
Video paused
# resume video my_video
Video resumed
-> DONE

Animate

You can use the animate to use the animations in ink. To do this, you need to use the following syntax:

# animate alien angle 360 options duration 1

The keyframes define the target state you want the component's properties to reach (e.g. a position, scale, or opacity), while parameters define how to get there (e.g. duration, easing).

Available keyframes vary by component:

• image: properties of ImageSpriteMemory.
• video: properties of VideoSpriteMemory.
• imagecontainer: properties of ImageContainerMemory.
• text: properties of TextMemory.

Available parameters (all Optional) can include all the motion options and additional parameters you would use in JS/TS. You can find all the parameters in detail in PixiVNJsonAnimateBaseOptions.

Вот несколько примеров:

Шарнирные анимации

Articulated animations are functions that use the canvas.animate function under the hood to create animations that involve multiple steps, such as shaking, bouncing, or other complex effects. You can trigger them in ink using a dedicated hashtag command for each effect.