Canvas (WebGL)

The ink + Pixi’VN integration introduces a "# script" that allows you to show, edit, remove, and animate a canvas component. To do this, you need to use the following syntax:

# {operation} {component type} {alias} {parameters}

• #: is the hashtag symbol to identify a hashtag script.
• operation: the operation to perform. Currently supported:
  • show: Show a canvas component. (Read more here)
  • edit: Edit a canvas component. (Read more here)
  • remove: Remove a canvas component. (Read more here)
  • pause: Pause a canvas component. (Read more here)
  • resume: Resume a canvas component. (Read more here)
• component type: the component type. Available types:
  • image
  • imagecontainer
  • video
  • text
• alias: The alias to identify the component. Use double quotes if the alias contains spaces.
• parameters (Optional): a space-separated list of property/value pairs. If a value contains spaces, wrap it in double quotes. If a value is a object, pass valid JSON and escape the braces for ink (e.g. \{ "placeholder": "Enter your name", "maxLength": 20 \}).

=== 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

Components functions

Show

You can use the show to show a canvas component in ink.

Is raccomended to initialize the asset matrix at project start to use the alias of texture in source. To do this, you need to use the following syntax:

# show {component type} {alias} {source} {parameters}

• component type: the component type. Available types:
  • image
  • imagecontainer
  • video
  • text
• alias: The alias to identify the component. Use double quotes if the alias contains spaces.
• source (Optional): meaning varies by component:
  • image and video: URL or asset alias for the texture.
  • text: the text to display.
  • imagecontainer: a list of texture aliases/URLs (e.g. [url1 url2 url3]).
• parameters (Optional): a space-separated list of property/value pairs. If a value contains spaces, wrap it in double quotes. If a value is a object, pass valid JSON and escape the braces for ink (e.g. \{ "placeholder": "Enter your name", "maxLength": 20 \}). Valid parameters vary by component:
  • image and video: PixiJS.Sprite and properties for positioning properties.
  • text: PixiJS.Text and properties for positioning properties.
  • imagecontainer: PixiJS.Container and properties for positioning properties.

Edit

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

# edit {component type} {alias} {parameters}

• component type: the component type. Available types:
  • image
  • imagecontainer
  • video
  • text
• parameters (Optional): a space-separated list of property/value pairs. If a value contains spaces, wrap it in double quotes. If a value is a object, pass valid JSON and escape the braces for ink (e.g. \{ "placeholder": "Enter your name", "maxLength": 20 \}). Valid parameters vary by component:
  • image and video: PixiJS.Sprite and properties for positioning properties.
  • text: PixiJS.Text and properties for positioning properties.
  • imagecontainer: PixiJS.Container and properties for positioning properties.

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

Remove

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

# remove {component type} {alias}

• component type: the component type. Available types:
  • image
  • imagecontainer
  • video
  • text
• alias: The alias to identify the component. Use double quotes if the alias contains spaces.

# remove image bg
# remove image "bg 2"

Pause and resume a video

=== 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 {alias} {keyframes} options {parameters}

• alias: The alias to identify the component. Use double quotes if the alias contains spaces.
• keyframes: a space-separated list of property/value pairs representing the properties to animate and the values to reach. If a value contains spaces, wrap it in double quotes. If a value is a object, pass valid JSON and escape the braces for ink (e.g. \{ "placeholder": "Enter your name", "maxLength": 20 \}). Valid parameters vary by component:
  • image and video: PixiJS.Sprite and properties for positioning properties.
  • text: PixiJS.Text and properties for positioning properties.
  • imagecontainer: PixiJS.Container and properties for positioning properties.
• parameters (Optional): a space-separated list of property/value pairs. If a value contains spaces, wrap it in double quotes. If a value is a object, pass valid JSON and escape the braces for ink (e.g. \{ "placeholder": "Enter your name", "maxLength": 20 \}). You can add all the motion options and additional parameters you would use in JS/TS.

Here are some examples: