Canvas

L'integrazione ink + Pixi'VN introduce uno "# script" che consente di mostrare, modificare, rimuovere e animare un componente canvas. Per fare ciò, è necessario utilizzare la seguente sintassi:

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

• #: è il simbolo hashtag per identificare uno script hashtag.
• operation: l'operazione da eseguire. Attualmente supportati:
  • show: Mostra un componente canvas. (Per saperne di più qui)
  • edit: Modifica un componente canvas. (Per saperne di più qui)
  • remove: Remove a canvas component. (Read more here)
  • pause (video only): Pause a video canvas component. (Read more here)
  • resume (video only): Resume a video canvas component. (Read more here)
• component type: the component type. Available types:
  • image
  • imagecontainer
  • video
  • text
• alias: L'alias per identificare il componente. Use double quotes if the alias contains spaces.
• parameters (Opzionale): un elenco di coppie proprietà/valore separate da spazi. Se un valore contiene spazi, racchiuderlo tra virgolette doppie. 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

Funzioni dei componenti

Visualizza

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. Per fare ciò, è necessario utilizzare la seguente sintassi:

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

• component type: the component type. Available types:
  • image
  • imagecontainer
  • video
  • text
• alias: L'alias per identificare il componente. 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 (Opzionale): un elenco di coppie proprietà/valore separate da spazi. Se un valore contiene spazi, racchiuderlo tra virgolette doppie. 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.

Modifica

You can use the edit to edit a canvas component in ink. Per fare ciò, è necessario utilizzare la seguente sintassi:

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

• component type: the component type. Available types:
  • image
  • imagecontainer
  • video
  • text
• parameters (Opzionale): un elenco di coppie proprietà/valore separate da spazi. Se un valore contiene spazi, racchiuderlo tra virgolette doppie. 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 

Rimuovi

You can use the remove to remove a canvas component in ink. Per fare ciò, è necessario utilizzare la seguente sintassi:

# remove {component type} {alias}

• component type: the component type. Available types:
  • image
  • imagecontainer
  • video
  • text
• alias: L'alias per identificare il componente. 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. Per fare ciò, è necessario utilizzare la seguente sintassi:

# animate {alias} {keyframes} options {parameters}

• alias: L'alias per identificare il componente. 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. Se un valore contiene spazi, racchiuderlo tra virgolette doppie. 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 (Opzionale): un elenco di coppie proprietà/valore separate da spazi. Se un valore contiene spazi, racchiuderlo tra virgolette doppie. 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.

Qui trovi alcuni esempi: