Here'southward a basic setup tutorial that will assistance y'all get started and empathize how VIDE works code-wise. Some Unity and scripting knowledge is required, but I'll try to brand it as noob-proof as possible.


VIDE doesn't include any fancy, built-in UI Manager. It includes multiple demos, but, ideally, the plugin is designed to be flexible, then that yous tin can create your own director roofing your own project needs and have freedom over the handling of information you set in the VIDE Editor. If you lot're new to programming or Unity or both, you lot might find yourself scratching your head as you try to empathise how to actually apply the plugin. If that'due south so, delight read ahead.

Setting things upward

I will assume that you already know how to use the VIDE Editor since that's the easy part and it is covered in the Documentation. For this tutorial, I've created my short custom dialogue with both Player and NPC-formatted nodes:

diag1
Notice my Start Node ID is set up to 0 because I want my dialogue to begin at node 0.

So, my brusque test dialogue is set. What now?

We are going to create a simple UI interface in an empty scene. Later on, we're going to begin the dialogue when we press a key.

Earlier we get to coding, we need to setup the UI objects in our scene that our script will be referencing. Y'all tin absolutely use the GUI class and keep yourself from using the UI arrangement, but for this tutorial, we will setup everything inside our Sheet using the UI system.

To quickly add the game objects with UI components, right-click in the empty infinite inside the Hierarchy window and select, for case, Text. A Sheet and Issue System will be created along with it.

For the Actor text, let's create 3 Button game objects and put them inside an empty game object named "Container_Player". For the NPC text, let'due south create a Text game object, then put information technology inside an empty game object I named "Container_NPC". You tin resize, format, and reposition them as desired.

setup1

Good; at present we can send our node data somewhere. Next, permit's add together a new empty game object that will handle dialogues. I named it "UIManager", but you tin can name it whatsoever you want.

For demo purposes, we will add a VIDE_Assign component to the game object. With it, you tin can set per-component settings for the assigned dialogue. This component will then be used to begin the dialogue. Let's assign the dialogue we created.

assign
If y'all were to take many NPCs to interact with, each one would have their own VIDE_Assign.

Lastly, allow's add a script that will handle our node data. Click 'Add Component' > New Script. We'll use C# for this tutorial. Name it "UIManager".

scr

All expert to go, for now.

Programming our UIManager

The VIDE_Data namespace encapsulates two classes: VD & VD2. Either grade will load, manage, and pack the node data retrieved from the dialogues. They own various methods and variables that volition let yous obtain node data in an orderly fashion. While VD has static members, VD2 doesn't and tin can be used for instancing. In this tutorial, we'll be using the VD grade that tin exist easily accessed and used.

Open the newly created UIManager script!

Allow'south add togetherVIDE_Data namespace andUnityEngine.UInamespace to gain easy admission to their classes (I propose you type stuff yourself rather than copy-pasting):

code1
using VIDE_Data and UnityEngine.UI

Let's add together the references to the UI game objects we created earlier:

code2
All we demand for now

Salvage your script, go back to Unity, and drag and drop the corresponding game objects to their slot:

code3

So, we accept our variables pointing to our UI. Nosotros now need to laissez passer information to these variables. The first matter we would like to practise for this tutorial is to brainstorm the dialogue when you printing a primal if there isn't one already active. A dialogue becomes active when you call VD.BeginDialogue(). To check if there'due south an agile dialogue, you tin use the variableVD.isActive.

Then, allow's make it so that the script calls a custom Brainstorm() method when the Return key is pressed, but only if at that place isn't a dialogue active. The input cheque should happen within the Update void.

code3

When implementing VIDE, yous demand to have a grasp on the master iii methods you'll discover inside the VD and VD2 classes:

VD.BeginDialogue()– Activates the dialogue. Loads up the node information of the start node.
VD.Adjacent()– Gets the node data of the next node in the chain. If we're currently on an NPC node, so we'll advance through the comments before going to the next connected node. For Actor nodes, where it goes next will depend on a variable.
VD.EndDialogue()– Cleans all temp data and deactivates the dialogue.

BeginDialogue and Side by side will exist constantly updating a variable chosen nodeData inside VD and VD2. VD.nodeData is a variable of type NodeData which contains.. you guessed it: node information.

code4

These are the variables you'll be using to decorate your UI! All yous accept to practise is check the electric current contents of VD.nodeDataor get the render value from the above methods, which is a NodeData variable.

What nosotros want, then, is to get the node data of our start node, then let's telephone call BeginDialogue showtime. In society for VD to know what dialogue we desire to use, we ship the VIDE_Assign when calling the method:

code5

To make information technology easier for y'all to handle node data changes, VD & VD2 offer a few events similarOnNodeChangeandOnEnd. These two volition help yous have action when the node data changes or when we have reached the end of the conversation. The events require your methods to have one parameter of blazon VD.NodeData; a variable of said blazon will be sent when the events burn.

Let's add a couple of new custom methods and subscribe them to the events before we call BeginDialogue:

code6
When a node information change occurs, UpdateUI will be called while receiving the new node data. If we attain the end, End volition be called.

When subscribing to events, we too need to retrieve to unsubscribe. We'll exercise this inside the Cease() method. Also, we will call VD.EndDialogues() to clear all node data and conciliate the dialogue:

code7
NodeData.isEnd and VD.OnEnd will simply happen when you call Next() on a disconnected comment

Good! Though if something happened to this script and it got destroyed mid-dialogue, we might have to force-end information technology to prevent errors. Allow's make sure we end the dialogue if this script gets disabled. We're not actually usinginformation and so let's send a zilch parcel. Also, permit's call End only if nosotros have no null vars (Variables get aught when exiting Play Mode in the Editor, and OnDisable is too chosen at that time).

code20.JPG

And then far, so adept. The basic structure is built:

UIManager.cs (Click to aggrandize)
using UnityEngine; using System.Collections; using VIDE_Data; //Access VD form to retrieve node data using UnityEngine.UI;  public grade UIManager : MonoBehaviour {      public GameObject container_NPC;     public GameObject container_PLAYER;     public Text text_NPC;     public Text[] text_Choices;      // Employ this for initialization     void Start () {  	}  	// Update is chosen once per frame 	void Update () {          if (Input.GetKeyDown(KeyCode.Render))         {             if (!VD.isActive)             {                 Brainstorm();             }         }  	}      void Begin()     {         VD.OnNodeChange += UpdateUI;         VD.OnEnd += End;         VD.BeginDialogue(GetComponent());     }      void UpdateUI(VD.NodeData data)     {      }      void Finish(VD.NodeData data)     {         VD.OnNodeChange -= UpdateUI;         VD.OnEnd -= Cease;         VD.EndDialogue();     }      void OnDisable()     {         if (container_NPC != null)             Cease(nil);     } }                

Right, so, the moment we call BeginDialogue(), the OnNodeChange event volition fire, calling our UpdateUI method. Nosotros tin either check the current VD.nodeData or merely use the variable nosotros had sent to u.s.a. along with the event. Said data will belong to that of our start node.

What nosotros want to do is to apply some of the node information to our UI elements, just first, we demand to know if the data belongs to anNPCnode or aRole player node, because we will handle information differently depending on it. How can we know this, then? We use the isPlayer variable inside NodeData:

code9.JPG

Before nosotros apply the text to our UI elements, let'due south disable both UI containers. So, we'll enable the corresponding one inside our statement:

code10.JPG

Adept. Now, let'due south get with NPC outset. If our newly arrived data doesnot belong to a Actor node, it means we're on an NPC node. In that case, let's use thecomments array andcommentIndex variables inside NodeData to set the text of our respective Text element.

code11.JPG

The commentIndex variable updates automatically for NPC nodes. When at that place are multiple comments in the node, commentIndex will increment every time you call Next(), and information technology will continue to do then until we reach the concluding one and move on to the adjacent node.

If we are on aRole player node, comments are treated as player choices. If we had only 2 comments, then we would only desire to activate 2 out of the iii buttons we have. To handle such a case, nosotros apply a for loop:

code12.JPG

So, nosotros will loop through ourtext_Choices assortment which contains references to theText elements of our buttons. Ifi is less than our comments array, and so we volition activate our button and gear up its text, otherwise, we'll disable it. Note we are using theText reference to access the parent game object; nosotros want to disable/enable that one, not the "Text" game object.

By the fashion, let'due south make sure we disable both containers at Get-go() and at End():

code13.JPG

code14.JPG

Good. You could now save, compile and hit Play, and you would be able to employ the Return key to brainstorm the dialogue. The NPC text would and then be set up to that of the start node'southward first comment, but you won't go any farther. Nosotros are not yet giving the didactics to go on. Allow'south exercise that.

Nosotros accept the BeginDialogue() and EndDialogue() doing their job, we're just missing the Next(). What we desire to exercise is to call Side by side() if the dialogue is already active. We already accept the statement for that, nosotros but demand the else:

code15.JPG

Every fourth dimension Adjacent() is called, NodeData will get updated and OnNodeChange event volition burn down, calling UpdateUI().

Over again: If nosotros are currently on an NPC node with multiple comments, calling Next() will simply increment NodeData.commentIndexup until we are at the concluding 1 and jump to the next node. How do nosotros specify what's our pick when on a Player node? Instead of incrementing commentIndex, Adjacent() willemploy commentIndex to decide where to caput to next. In our setup, setting the correct commentIndex is our UI buttons' chore!

The Button component can phone call custom methods when pressed. You only have to fix them in the Inspector. Let's first create the method our buttons will exist calling when pressed. Let's only call Next if the buttons areclicked with the left click.

code21.JPG

Relieve and become back to Unity. Select each "Button_Choice" and prepare the method we just created. Since nosotros added anint parameter, the int field volition show in the Inspector equally a param. What we want is to type 0, 1, and 2 for each button, numbers that refer to comment indexes.

code19.JPG

Awesome! Now hit play so hitting Render to begin and progress through the dialogue. Click the buttons for player choices. It should be working well from get-go to finish.

ready1.gif

If you lot want to exist able to pick a option with the keyboard, and so brand certain yous activate the Navigation on the Button components and select Vertical. Adjacent, nosotros desire to have a button selected by default when they show up. Let's do that right after we enable/disable the buttons.

navi.JPG

code18.JPG

The buttons will also call SetPlayerChoice when pressed, only the method will not fire the Next(), because our Update() void is already doing that.

That'southward it. Now use the arrow keys and Return to pick a selection.

ready2.gif


That covers the primary function of this tutorial. Recollect that it is yous who decides how to design your code and how to handle the data yous receive. Just remember the master BeginDialogue-Next-EndDialogue process.

Some notes…

If you were a character interacting with an NPC, then our Begin() method would nigh likely be called by some other script, and and then would Adjacent(). Then, for example, they'd have to be public methods. But, so once again, information technology's the aforementioned process. Example1 scene covers this!

Y'all can optimize and add tons of data handlers to this UIManager script.

Audio: To play audios, yous tin can do the following:

  1. Make certain your sound clips are saved within a Resource binder (Unless y'all want to set your own sprite/audio database).
  2. Driblet the sound clips in the required slots of the dialogue node.
  3. Have an Audio Source component somewhere in the scene. Nosotros'll use information technology to play the audios. You might want to attach it to the same GameObject that has the UIManager script attached.
  4. Add together a reference to the component at the beginning of your UIManager script.
    public AudioSource audioSource;
  5. To play NPC clips, we cheque for the sound clips during the UpdateUI  void, the method that runs when the node information changes. So, we have to add these lines inside the brackets that manus NPC data:
    Capture
    We make sure that the audio slot is not zippo. If it isn't, we ship the prune to the Audio Source then nosotros play information technology.See complete script down below for reference.Notation: You lot might want to handle it differently for the actor choices depending on your blueprint. In this demo, the player choices disappear instantly when selected, then there's no time to play an sound clip before the NPC comment happens.

Sprites: Like process, though you tin can selection from NodeData.sprites, NodeData.sprite, or VIDE_Assign.defaultNPCSprite and VIDEAssign.defaultPlayerSprite. During an active dialogue, you can quickly access the active VIDE_Assign through VD.assigned.

Actress Data: Utilise it to laissez passer in some extra data. Y'all might even desire to carve up and parse your string.

Actress Variables: Obtain your values by using your keys:extraVars["myInt"]. The value is going to exist of blazon object, you will have to bandage it to the correct format:
int theInt = (int) VD.nodeData.extraVars["myInt"].

Only there are tons of other methods and variables that will give you much more control over the dialogues during runtime! Check out the Scripting API in the Documentation to know more about them! Make sure you likewise check out the FAQ!

Hither'south the finished script (with added Touch functionality for devices):

UIManager.cs (Click to expand)
using UnityEngine; using System.Collections; using VIDE_Data; //Access VD class to retrieve node data using UnityEngine.UI;  public grade UIManager : MonoBehaviour {     public GameObject container_NPC;     public GameObject container_PLAYER;     public Text text_NPC;     public Text[] text_Choices;     public AudioSource audioSource;      // Use this for initialization     void Start()     {         VD.LoadDialogues();         container_NPC.SetActive(false);         container_PLAYER.SetActive(false);     }      // Update is called once per frame     void Update()     {         if (Input.GetKeyDown(KeyCode.Return) || Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Ended)         {             if (!VD.isActive)             {                 Brainstorm();             }             else             {                 VD.Next();             }         }     }      void Begin()     {         VD.OnNodeChange += UpdateUI;         VD.OnEnd += End;         VD.BeginDialogue(GetComponent());     }      void UpdateUI(VD.NodeData data)     {         container_NPC.SetActive(false);         container_PLAYER.SetActive(false);         if (information.isPlayer)         {             container_PLAYER.SetActive(true);             for (int i = 0; i < text_Choices.Length; i++)             {                 if (i < data.comments.Length)                 {                     text_Choices[i].transform.parent.gameObject.SetActive(true);                     text_Choices[i].text = information.comments[i];                 }                 else                 {                     text_Choices[i].transform.parent.gameObject.SetActive(fake);                 }             }             text_Choices[0].transform.parent.GetComponent().Select();         }         else         {             container_NPC.SetActive(truthful);             text_NPC.text = data.comments[data.commentIndex];             //Play Audio if whatsoever             if (data.audios[data.commentIndex] != null)                 audioSource.clip = data.audios[data.commentIndex];                 audioSource.Play();             }         }     }      void End(VD.NodeData data)     {         container_NPC.SetActive(false);         container_PLAYER.SetActive(false);         VD.OnNodeChange -= UpdateUI;         VD.OnEnd -= Terminate;         VD.EndDialogue();     }      void OnDisable()     {         if (container_NPC != cypher)             Cease(null);     }      public void SetPlayerChoice(int selection)     {         VD.nodeData.commentIndex = choice;         if (Input.GetMouseButtonUp(0))             VD.Next();     } }                

If y'all have any questions, leave your comment down beneath!
Cheers for reading. 🙂