UNITY DIALOGUE GRAPH TUTORIAL - Setup

[Music] everyone welcome to another video this time we're gonna make a node system with unities default api we don't have to import any kind of external package that's not what we're gonna do as long as we are working about eighteen point one unit is providing what it is providing to shadowgraph and the VFX craft by default which is something called graph view API and with using the graph view API we're going to achieve creating a node system but before begin to do tutorial I would like to mention about few concepts first of all in a node there is something called edge so edge is basically the connection between two nodes that's it's called in the unities graph view system another thing to notice is few other concepts so the nodes graph you and few other terms such as there will be great background or sticky notes most of those stuff is provided by the API by default so you don't have to write any kind of mouse drag to move the node or like to make a connection draw a line renderer or something you don't have to do anything like that it's provided by default it's embedded in the engine and it is using this namespace so with that knowledge we can begin but I want to make sure that you understand in a node there are two parts so in a node there's an input container at the left hand side and an output container in the right hand side so we can add branches to our dialogue system to one of the dialogue node to the output container and for other dialogue nodes to to that one if we want to make merge and stuff we're gonna make an input port yeah this is another concept that I wanted to mention actually there is something called port which means this is you know this is the connection thing that you can do so you will have two ports and you basically achieve a connection when you connect them and this connection is named as edge in API so this is the this is the old briefing actually there's nothing else to mention with this knowledge we can begin this tutorial let's jump and see what is it like we're gonna start by creating three major classes dialog graph dialog graph view and dialogue note all those classes gonna inherit from unities embedded graph view API dialog graph view class will be inherited from graph view class dialog graph will be inherited from editor window class and valid node will be inherited from node class cool let's start by storing some information in the dialog node class let's add a gooood that might look confusing but you can think of it as a unique ID that we will pass for each one of the nodes to distinguish those notes between each other next we're gonna need the actual dialogue text and lastly a boolean called entry point we're gonna use it as a start point then let's jump into the dialogue graph view class and create a constructor to add drag-and-drop Mouse selection features we just need to add few manipulators to our graph let's add a Content dragger a selection dragger and a rectangular selection awesome now let's go back to dialog graph class and create a static method to open up to a graph window with the following lines and let's add a menu item attribute on top of it to be able to actually call it statically from the editor in case you don't know a method can be called as a menu item using this attribute but this is only possible if the method is static that's why we are marking it as a static method with that being said let's go back to unity and now we can see our dialog graph window great but sadly we can't do any dragging and stuff because we haven't added to graph you into the editor window yet we just see the editor window but the graph view is not there so let's go back to a writer and let's implement it in the dialog graph class let's add on enable and on disabled methods then let's create a private variable and call it as graph view those methods are just like unities start and destroy methods in regular unity classes which means in on enable method we need to get a new instance off the graph view and store it into that variable just we have created ok while getting the instance of this graph view as in the constructor I'm gonna pass the name of the graph and then I want to stretch the graph view all over the editor window then finally we need to actually add it to the editor window with root visual element dot add method lastly we need to remove it when this window is disabled this way graphi will not going to overlap if we constantly open up and close the graph down nice let's go back to unity and try it again now as you can see I can click and drag my mouse to make rectangle selections but to actually do the drag-and-drop we need to have nodes right yep that's correct now let's go back to dialog graph view class and generate our first node let's create a method called generate entry point node and start by getting a new instance of the dialog node okay now I want to pass few variables into it so I'm gonna name the nodes title as start because this will be our entry point note then do it as you might remember from the node class I'm gonna generate a new GU it with C sharps default gooood class and then I want to pass the entry point as the dial-up text though we're not gonna use it so you're free to name it as banana if you like too lastly I'll mark this as entry point note so I will pass true for this boolean all right with that now we have a node instance so we need to set its position and add it to the graph view because it's not yet added let's set its position as follows then we're gonna make this methods return the node after doing that then in the constructor we need to actually add it to graph view using had element method this method has inherited from the graph view base class in case you're curious about it then let's go back to unity and voila okay now let's add a few ports to make connections between other nodes let's go back to code and create a new method called generate port and we're going to return to instantiated port then get few parameters into it first and foremost we need to pass the target node as a parameter to actually spawn this port into this node then we're going to need the direction info like it is going to be an input or the output port then finally we we're going to need to get the capacity which means is that going to be a single connection accepted node or are we going to able to connect multiple nodes into that port so that's where we decide about it with the capacity after that we're just going to return note instantiate port method with those given parameters as follows for the type parameter you can pass any random type if you wish I'm just gonna pass float the reason this is an arbitrary one is because we're not gonna transmit any data between ports but this is especially useful for things like shader graph or VFX graph like you you're gonna get the texture and using this port you do something with that one but in our case we don't do it we just check the connections and move forward cool now let's call this in our entry point generation method first of all we're going to pass the node because we want to do that in the node and then we will set the direction as output because we're going to want to jump to the first connected node then we can assign this part into a variable and we're going to change the port name to next port names might not seem important now but when we start saving those nodes they will be crucial for us then as we usually do we're going to add this port into the node and we're going to need to do that addition into the output container as follows great let's go back to unity now we have our output port we can drag it over and have fun of it also we can drag the node as you might notice but there's something strange isn't it in the left hand side the node is looking a little weird this is because we haven't updated division look off the node we just added it but we didn't request a refresh on the overall visual so to fix it let's jump back to writer for a sec then let's call node dot refresh expanded state and node dot refresh ports so we're going to need to call those methods after adding a port into the output container same applies if we do something else with the containers then when we go back to this weird artifact will disappear now which means we can put everything into gear 11 let's quickly jump into the dialogue graph class and add a method called construct graph then I'm gonna move my stuff from on and evil to this method to reduce the clutter because we're gonna add a toolbar for creating new nodes to do so let's create another method and call it as generate toolbar first of all we're gonna need to get an instance of the toolbar again it is all provided by unity by default after adding that we're gonna need to add a button into the toolbar for triggering the node creation and I'm gonna pass a lumba expression to actually have write down the logic off the button click what I would like to do is I want to use our graph view variable and call create dialogue node method which we will create in a moment then just like what we do with all the other UI elements we're going to add that button into the toolbar finally we need to add the toolbar into the editor window okay that I'm quickly creating a method inside of the dialog graph view class in here we will actually create our dialogue nodes first of all let's change the return type into dialogue node and add an input parameter called node name as a string then just like what we have done with the entry point note we're going to get a new instance of the dialogue node this time we're going to pass different titles which we get from the node name parameter off this method also we're going to pass the same string to the dialogue text for now and don't forget that we're going to need to create a new unique ID for this new know'd cool now let's add some ports first things first let's add an input port using generate port method and past the direction as input this time also this time we want to pass the capacity parameter as multiple because we want branching to other nodes and let them connect it to the input port of a single node then we can add this import into the input container also let's not forget that we need to update our nodes version after modifying the port so I'm gonna pass the same methods for this one and set its position as for denote scales I'm gonna create a little variable that will be used as a preset since we are not intended to modify it on the run time I'm gonna mark it as read only and call it as default node size then let's jump back and pass this as a parameter for the position declaration now we can finally return to node cool let's go back to the dialog graph class where we call this method and pass the node name as dialog node oops as I've forgotten here we need to call this toolbar method for on enabled because right now it's not called for them anywhere thus it's not gonna draw anything if we don't call it right okay so we need to make a little addition here we don't want to actually called an old creation method from this part instead we also want to add this node into graph view because we haven't done that yet from anywhere to do so I will create another method called create node and using add element method to add the created node into the graph view now if we go back to graph and unity we can finally add new nodes together yes but as you might notice when I start dragging the entry point port utter nodes input ports get blacked out this is because we haven't defined which types will be accepted as inputs so this is useful if you have data that you pass into the node like the shader graph as I said before but in here we don't need that we can get any different data types we just look for connections to fix this let's go back to graph view script and override a method called get compatible ports then inside of it I'll create a new list as compatible ports there's a following operation I'm going to use a property from the base class called ports and using that I will iterate over all the ports to see which ones are ok to be connected to do so first things first we don't want to connect a port to itself that would be funny then as a second rule we don't want to connect the input port of a node to its own output port that would create infinite loop which is weird and probably cause problems so we should not allow that so let's use those rules as follows with the for each statement ok if those conditions do met we can add it to the accepted ports list and we can return that list at the end of the method now let's go back to unity and add a node now as you can see we can connect them together great this means we can add output ports and complete the first sketch off our dialog graph let's go back to Howard create dialogue method this time we want to add a button for adding infinite amount of branches so I'm gonna create a button and pass a lambda expression as add choice port then I'll create that method at the bottom first of all we're going to need to generate a port like we did before but we're going to pass direction as output and keep the capacity as single by default then we want to change the port name for each and every option to change the port names for each new choice I'll search for all the ports in the output container off this node and then I'm going to assign the port name as choice port count then finally I'm going to add this port into output container and refresh the node visual just like before now if we go back to unity huh we don't see a button why because we haven't added it to node all right let's go back and do it okay I'll add this into the top side of the node which is called tidal container and let's add a text for the button as new choice now let's try it again awesome now we can add crazy amount of ports to our node and connect new notes to each other all right we're almost done with the first episode but as you might notice we can't zoom out since we haven't added it yet but worry not it's deadly easy to add let's go back to our graph view class and in the constructor let's say setup zoom content Zoomer default min scale and content Zoomer the default max scale no I'm not joking it's that simple now let's go back to graph finally we are able to zoom out too and we have a fully functional graph hmm but we can do better right let's add a great background before ending the video to do so unity provides that one two by default but we still need to do some tweaks for the colors of the lines at the background to add it let's let's just get a new instance off grid background and insert it as the background off the graph view then I want it to be stretched all over the screen at the okay background color has changed but we see no grid this is because we need to add a stylesheet and change grid line colors the grid lines and the colors are there but they are in the same color so we need to change them I don't know why this is the case but that's how it is so let's go to the project we know creative resources folder and right click on create UI elements editor window ok in this little pop-up we don't need any XML or c-sharp script but we need a u.s. s style sheet so let's keep it checked and call it as dialog graph then let's double click on it to open it up then we can get rid of the default content because we're gonna define what we want to show now we're gonna need to say to unity that we need to change the grid backgrounds visual properties well those are hard-coded us s statements so you don't have to understand them you just you can just follow what I've wrote here but the only thing that you need to know is it changes the line colors so it's pretty obvious once you understand what it does when you look at the prop processors so I'm gonna pass those values for colors finally we need to load that stylesheet with the resources load and add it to the style sheets in the constructor method then if we go back to graph we can see the grids nicely with that being said we finally have a fully functional graph in the next episode we're gonna make it savable and we're gonna add more colors and make it fancier and don't forget the dialogue text we haven't added that yet but we're going to do that ok that's all for this episode but in the next episode we're going to finalize it as I mentioned we can add the dialogue text and we're gonna play with the colors and we're gonna save the nodes right now we are displaying them we are creating new nodes and connecting them but there's no saving applied so we're going to get the node data and then you couid and stuff like that to actually achieve the same thing and that's basically it I hope you like this kind of coding tutorials I generally make shader tutorial I know that but I couldn't dress this to make it no based dialogue system tutorials since there's no such a thing in anywhere in the community like they're basically very few people are using this API but it is embedded into the unity and it's not going to be removed their stuff because it is being used in the shadow graph and the VFX craft so we are safe here okay what that being said we're done with this video and if you like this video please press the like button and if you want to see more videos like that and see the next episode please consider it to be a subscribing to my channel it's really important so that's all for this one and I will see you in the next video

Channel: Mert Kirimgeri

Views: 43,562

Keywords: unity tutorial, unity, visual scripting, node system, dialogue system, node based dialogue system, branching narrative, narrative based game, shader graph, visual effects graph, graphview

Id: 7KHGH0fPL84

Length: 23min 4sec (1384 seconds)

Published: Tue Dec 03 2019