Use canvas in ink

Pixi’VN allows you to use in the ink syntax the possibility to use the canvas.

The syntax is as follows:

# + canvas operation + type of the canvas element + alias of the canvas element + parameters

• # It is a special character used by ink syntax for add "Special Commands".
• canvas operation It is the operation that you want to do with the canvas element. The available operations are:
  • show: Show a canvas element. (Read more here)
  • edit: Edit a canvas element. (Read more here)
  • remove: Remove a canvas element. (Read more here)
  • pause (Only for video): Pause a video canvas element. (Read more here)
  • resume (Only for video): Resume a video canvas element. (Read more here)
• type of the canvas element It is the type of the canvas element. The available types are:
  • image: It is an image canvas element.
  • video: It is a video canvas element.
• alias of the canvas element It is the alias of the canvas element. The alias is a string that identifies the canvas element.
  • 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 } \}

Show canvas element in ink

You can use the show operation to show a canvas element in ink.

This operation requires the alias of the canvas element and the URL/path of the image. Keep in mind that to write https:// in ink you must use https:\/\/ because the // is a comment in ink.

Afer the URL/path of the image, you can add the properties of the canvas element that you want to set. The properties must be set as follows: propertyName + SPACE + value. If the value is a string you must use double quotes.

The syntax is as follows:

# + show + type of the canvas element + alias of the canvas element + URL/path of the image + properties

# show image bg /image.png
# show image "bg 2 alice" https:\/\/game.com/image.png
# show image bg https:\/\/game.com/image.png x 20 y 30 visible true cursor "pointer" alpha 0.5

Show canvas element with transition in ink

If you want to show the canvas element with a transition, you can add into the parameters the with + SPACE + transitionType. After the transitionType, you can add the transition parameters. These parameters do not have a precise order and must be set as follows: parameterName + SPACE + value. If the value is a string you must use double quotes.

The syntax is as follows:

# + show + type of the canvas element + alias of the canvas element + URL/path of the image + properties + with + transitionType + transition parameters

The available transitions are:

• dissolve: The canvas element appears with a dissolve transition. You can add all the parameters you would use in JS/TS.
• fade: The canvas element appears with a fade transition. You can add all the parameters you would use in JS/TS.
• movein: The canvas element appears with a movein transition. You can add all the parameters you would use in JS/TS.
• zoomin: The canvas element appears with a zoomin transition. You can add all the parameters you would use in JS/TS.
• pushin: The canvas element appears with a pushin transition. You can add all the parameters you would use in JS/TS.

# show image bg /image.png with dissolve duration 3
temp durationVar = 3
# show image bg /image.png with fade duration {durationVar}
# show image bg /image.png x 20 y 30 with movein
# show image bg /image.png x 20 y 30 with zoomin
# show image bg /image.png x 20 y 30 with pushin

Edit canvas element in ink

To edit a canvas element in ink, you can use the edit operation. After the alias of the canvas element, you must include the properties of canvas element that you want to edit.

In the parameters you must include the properties that you want to edit. The properties must be set as follows: propertyName + SPACE + value. If the value is a string you must use double quotes.

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

Remove canvas element in ink

To remove a canvas element in ink, you can use the remove operation.

# remove image bg
# remove image "bg 2"

Remove canvas element with transition in ink

If you want to remove the canvas element with a transition, you can add after the alias of the canvas element the with + SPACE + transitionType. After the transition type, you can add the transition parameters. These parameters do not have a precise order and must be set as follows: parameterName + SPACE + value. If the value is a string you must use double quotes.

The first parameter is the transition type, the available transitions are:

• dissolve: The canvas element disappears with a dissolve transition. You can add all the parameters you would use in JS/TS.
• fade: The canvas element disappears with a fade transition. You can add all the parameters you would use in JS/TS.
• moveout: The canvas element disappears with a moveout transition. You can add all the parameters you would use in JS/TS.
• zoomout: The canvas element disappears with a zoomout transition. You can add all the parameters you would use in JS/TS.
• pushout: The canvas element disappears with a pushout transition. You can add all the parameters you would use in JS/TS.

# remove image bg with dissolve duration 3
temp durationVar = 3
# remove image bg with fade duration {durationVar}
# remove image bg with moveout
# remove image bg with zoomout
# remove image bg with pushout

Use Effects in ink

You can use the effects in ink.

If you want to use an effect in ink, you can use how canvas operation the name of the effect.

The available effects are:

• fade: Create a fade effect. (Read more here). You can add all the parameters you would use in JS/TS.
• move: Create a move effect. (Read more here). You can add all the parameters you would use in JS/TS.
• rotate: Create a rotate effect. (Read more here). You can add all the parameters you would use in JS/TS.
• zoom: Create a zoom effect. (Read more here). You can add all the parameters you would use in JS/TS.
• shake: Create a shake effect. (Read more here). You can add all the parameters you would use in JS/TS.

The syntax is as follows:

# + effectType + alias of the canvas element + parameters

# fade bg duration 3
temp durationVar = 3
# fade bg duration {durationVar}
# move bg x 20 y 30 duration 3
# rotate bg clockwise false duration 3
# zoom bg scale 2 duration 3
# shake bg duration 3

Pause video canvas element in ink

To pause a video canvas element in ink, you can use the pause operation.

# pause video bg
# pause video "bg 2"

Resume video canvas element in ink

To resume a video canvas element in ink, you can use the resume operation.

# resume video bg
# resume video "bg 2"