# Visual Scripting

Visual Scripting allows you to create complex behaviour and add interactions without coding skills. Add music when the Player approaches some area, turn on the lighting by pressing the button, and many other scenarios. Use predefined playbooks or create new with 8XR Visual Scripting.

With Visual Scripting, you can construct an interactive 3D scene without any programming experience. If you are familiar with [UE Blueprint](https://docs.unrealengine.com/4.27/en-US/ProgrammingAndScripting/Blueprints/GettingStarted/) or [Unity Visual Script](https://unity.com/features/unity-visual-scripting), you will find lots of similarities in 8XR Visual Scripting.&#x20;

To create a new Script, open the Assets Manager by clicking the Assets button on the top panel of the Editor

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2FC8Hbr0WNz4wlBAO5An2D%2FScreenshot%202022-11-05%20at%2011.39.05.png?alt=media&#x26;token=07eb1775-6dfc-4262-8416-6a14711516af" alt=""><figcaption><p>Open Asset Manager</p></figcaption></figure>

Press the Add Asset button and choose Script

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2FaiMtzSqPlEOD5l9NbNdq%2FScreenshot%202022-10-18%20at%2010.08.07.png?alt=media&#x26;token=5352cac6-c889-4104-99e1-c5f5986d9ad0" alt=""><figcaption><p>Create a new Visual Script</p></figcaption></figure>

Enter the name of the Script and press the Edit button

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2Fj0TtEd1LaIdSbPJf2KQE%2FScreenshot%202022-10-18%20at%2010.10.49.png?alt=media&#x26;token=22837898-fab1-46a7-9780-ab62b28db3f5" alt=""><figcaption><p>Start editing the Visual Script</p></figcaption></figure>

It will open a new Script Editor window. It consists of the following parts:

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2F0b8cNVOEcxyecUBuxJEa%2FScreenshot%202022-10-18%20at%2010.13.55.png?alt=media&#x26;token=36e72dc6-12ed-4972-9a2d-4d850d5449f0" alt=""><figcaption><p>Script Editor window</p></figcaption></figure>

As an example, the guide will demonstrate how to create a Script to control the Animation of a 3D model.

Start with adding a 3D model and attaching the desired animation to it. Animation is a Model Modification that you can add by pressing the "+" button in the Model Inspector.

Ensure to disable the Autoplay parameter of the Animation.&#x20;

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2FPLdN3WSSL2UcyTYK9UR1%2FScreenshot%202022-10-18%20at%2010.42.07.png?alt=media&#x26;token=321f8ac5-af65-481c-aed1-d1e5c95eb639" alt=""><figcaption><p>3D model with attached Animation</p></figcaption></figure>

You can find the Model we used in this example [here](https://drive.google.com/file/d/1N2wlCfUFr6-Kiwvh0E4e6ELmZQoiXVwp/view?usp=sharing).

To add a new Node in Script Editor, right-click on the Canvas Zone or press the Add Node button and select the required Node. Find Collision Start Node and click on it. This type of Node will be triggered when any entity with a Physics Body collides with the entity with the current Script attached.

Great! Now add a few other Nodes: Cast to Player, Animation, and Play Animation.

Connect the Nodes to each, as shown in the picture bellow:

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2FmFvsSxAbMwrgYJQ8T7hJ%2FScreenshot%202022-10-18%20at%2011.46.52.png?alt=media&#x26;token=abf91c01-a165-4410-9adf-7c11ccfb8ac9" alt=""><figcaption><p>Connected Nodes</p></figcaption></figure>

You have just created your first Script, which does the following: "When there is a Collision between the current Entity (the Entity to which the Script is attached) and the Player, play the Animation."&#x20;

Now we need to choose the Animation to play. In the Animation Node select the Model Entity and choose the desired Animation.

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2FZOsAfepWaHCYUBHSUzs7%2FScreenshot%202022-10-18%20at%2011.51.40.png?alt=media&#x26;token=ca903fdc-807c-457f-87a4-58a66dc60802" alt=""><figcaption><p>Selecting the Animation</p></figcaption></figure>

Close Script Editor.

As the next step, we need to create an object that will trigger the Script we have just created. Open Entity Add menu and select Trigger Volume

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2FVlRxKIVF0AT4NWPQ7kNl%2FScreenshot%202022-11-05%20at%2010.33.01.png?alt=media&#x26;token=c7160cb3-4fab-4644-871a-842e02a69b54" alt=""><figcaption><p>Create a Trigger Volume</p></figcaption></figure>

Attach the Script you have just created to the Trigger Volume Entity. The Script is attached with a Script Modification. Each Entity can have multiple Scripts attached.

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2F98uBzkfpxFfSHBmsM578%2F1.jpg?alt=media&#x26;token=c9709543-efb4-4056-8820-905dc4ab7c06" alt=""><figcaption><p>Attach the Script</p></figcaption></figure>

You did it! It is time to test the results. Launch the Scene by pressing the Play button. Step into the Trigger Volume Entity. The animation should start playing.

### Script Parameters

Script Parameters are used to make a Script reusable in different places.&#x20;

Let's rework the Script you have just created by converting its Animation to a parameter specified when the Script is attached to an Entity.

Open Script Editor and add a new Script Parameter Animation.

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2FzKsNMFwpWqycFsDMupql%2FScreenshot%202022-10-18%20at%2012.23.43.png?alt=media&#x26;token=56b12208-d02a-4f5f-8f1a-795260a064c3" alt=""><figcaption><p>Add a new Script Parameter Animation</p></figcaption></figure>

Choose the name of the parameter and drag-and-drop it into the Canvas.

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2Ffp3inU9hgZQ8A4SqhDi9%2FScreenshot%202022-10-18%20at%2012.25.08.png?alt=media&#x26;token=488efde9-07d0-4310-a80a-0705b156078c" alt=""><figcaption><p>Name the Parameter and drag-and-drop into the Canvas</p></figcaption></figure>

Replace the current predefined Animation with the Animation Parameter you have just created.&#x20;

First, delete the Animation Node by selecting it and pressing the "backspace" keyboard button.&#x20;

Next, rework the Script as shown in the picture bellow.

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2FZzVlbXbtgGvz2vQU0wXG%2FScreenshot%202022-10-18%20at%2012.28.41.png?alt=media&#x26;token=bd5516af-1e15-4e58-88fa-782bd1477354" alt=""><figcaption><p>Rework the Script as shown on the picture</p></figcaption></figure>

Close Script Editor.

Click on the Trigger Volume you have attached the Script to. The Animation Parameter can now be seen in the Script Modification Inspector.

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2FdI00iuVI57vT9nEjcALs%2FScreenshot%202022-11-05%20at%2010.49.24.png?alt=media&#x26;token=00bc678b-6041-4b53-a1c8-8154e938898c" alt=""><figcaption><p>The Animation Parameter in the Script Modification Inspector</p></figcaption></figure>

Well Done! Now you can choose the Animation without modifying the Script. You can use this Script with a variety of Entities and Trigger Volumes.

You have just created a tool that allows you to play a generic Animation when the Player enters a predefined area in your 3D Scene.

<figure><img src="https://1307401556-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOjaXdLdnzdaSbMhKxKOh%2Fuploads%2FBhj9EMrw5DTxB9dOE2y1%2F2.jpg?alt=media&#x26;token=d60c3f2a-5add-45f6-80d5-cd5712c203e3" alt=""><figcaption><p>Try the Script with a different Model</p></figcaption></figure>
