Canvas

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

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

Where:

• #: is the hashtag symbol to identify a hashtag script.
• operation: It is the operation that you want to execute with the canvas component. The available operations are:
  • 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 (Only for video): Pause a video canvas component. (Read more here)
  • resume (Only for video): Resume a video canvas component. (Read more here)
• component type It is the component type. The available types are:
  • image
  • imagecontainer
  • video
  • text
• alias It is the alias of the canvas component. The alias is a string that identifies the canvas component.
  • If the alias includes spaces, you must use double quotes.
• parameters It is the parameters of the operation. The parameters depend on the operation.
  • If the parameters include spaces, you must use double quotes.
  • If the parameters is a object, you must use the JSON format and the first character must be \{ and the last character must be \}. Example: \{ "color": "red", isVisble: true, position: { x: 100, y: 100 } \}

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

• source (Optional), It has different content depending on the component you want to show:
  • for image and video components, it is the URL/path of the texture that you want to show.
  • for text component, it is the text that you want to show.
  • for imagecontainer component, it is the list of URL/path of the textures that you want to show. For example: [url1 url2 url3].
  • if you don't provide the source, this parameter is equal to alias
• parameters (Optional): Afer the source, you can add the parameters of the canvas component that you want to set. The parameters must be set as follows: parameterName + SPACE + value. If the value is a string and includes spaces, you must use double quotes.

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]

• [parameters]: In the parameters you must include the properties that you want to edit. The parameters must be set as follows: parameterName + SPACE + value. If the value is a string and includes spaces, you must use double quotes.

# 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]

# remove image bg
# remove image "bg 2"

Pause and resume a video

=== start ===
# show video my_video
Video started
# pause video my_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]

Here are some examples: