Canvas (WebGL)

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: Rimuovere un componente canvas. (Per saperne di più qui)
  • pause: Pause a canvas component. (Per saperne di più qui)
  • resume: Resume a canvas component. (Per saperne di più qui)
• component type: il tipo di componente. Available types:
  • image
  • imagecontainer
  • video
  • text
• alias: L'alias per identificare il componente. Utilizza le doppie virgolette se l'alias contiene spazi.
• parameters (Opzionale): un elenco di coppie proprietà/valore separate da spazi. Se un valore contiene spazi, racchiuderlo tra virgolette doppie. Se un valore è un oggetto, passa un JSON valido ed esegui l'escape delle parentesi graffe per ink (ad esempio \{ "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

È possibile utilizzare show per mostrare un componente canvas in ink.

Si consiglia di inizializzare la matrice delle risorse all'avvio del progetto per utilizzare l'alias della texture in source. Per fare ciò, è necessario utilizzare la seguente sintassi:

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

• component type: il tipo di componente. Available types:
  • image
  • imagecontainer
  • video
  • text
• alias: L'alias per identificare il componente. Utilizza le doppie virgolette se l'alias contiene spazi.
• 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. Se un valore è un oggetto, passa un JSON valido ed esegui l'escape delle parentesi graffe per ink (ad esempio \{ "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

È possibile utilizzare edit per modificare un componente canvas in ink. Per fare ciò, è necessario utilizzare la seguente sintassi:

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

• component type: il tipo di componente. 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. Se un valore è un oggetto, passa un JSON valido ed esegui l'escape delle parentesi graffe per ink (ad esempio \{ "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

È possibile utilizzare remove per rimuovere un componente canvas in ink. Per fare ciò, è necessario utilizzare la seguente sintassi:

# remove {component type} {alias}

• component type: il tipo di componente. Available types:
  • image
  • imagecontainer
  • video
  • text
• alias: L'alias per identificare il componente. Utilizza le doppie virgolette se l'alias contiene spazi.

# 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

Animare

Puoi usare animate per usare le animazioni in ink. Per fare ciò, è necessario utilizzare la seguente sintassi:

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

• alias: L'alias per identificare il componente. Utilizza le doppie virgolette se l'alias contiene spazi.
• keyframes: un elenco separato da spazi di coppie proprietà/valore che rappresentano le proprietà da animare e i valori da raggiungere. Se un valore contiene spazi, racchiuderlo tra virgolette doppie. Se un valore è un oggetto, passa un JSON valido ed esegui l'escape delle parentesi graffe per ink (ad esempio \{ "placeholder": "Enter your name", "maxLength": 20 \}). Valid parameters vary by component:
  • image e video: [PixiJS.Sprite e proprietà per il posizionamento.
  • 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. Se un valore è un oggetto, passa un JSON valido ed esegui l'escape delle parentesi graffe per ink (ad esempio \{ "placeholder": "Enter your name", "maxLength": 20 \}). Puoi aggiungere tutte le opzioni motion e parametri aggiuntivi che useresti in JS/TS.

Qui trovi alcuni esempi: