Default Editor Code to GraphView

[dense shard]

My own node editor basically looks like the image down below

Now did I find a tutorial on the web multiple btw on people using the UI Builder for making Dialog Trees and or Behaviour Trees which look like this:

That is way nice to look at and way better understandable then what I currently have gotten so I thought I change up some code and get my editor and nodes to look like that but its a bit harder then I thought.

Essentially what I did is the following

I basically made a separate script for the Graphview even though I already do have an graph Editor window.

I did this due to that it uses the graphview class signature.

Then I made these changes in my Editor script

And after this I added some more code to my Graphview script to be able to manipulate the scene.

Basically all in all I got the stuff setup and the grid did show up but the only problem was that my nodes I previously had in my NodeGraphEditor Window disappeared and I could not make them either anymore.

So I thought that is no issue as I needed to make the nodes itself work with my RoomNodeSO(Scriptable Object) script and RoomNodeTypeSO(Scriptable Object) script as well as the RoomNodeTypeListSO(Scriptable Object) script.

Here I noticed I had no clue what I was doing as my programming in Unity is okay enough to follow a intermediate course where I mainly be copy and pasting code and get some explanation on what the course does but not good enough to also be able to write the code for these nodes.

So then @digital wolf explained that it was very complex and I better not use it so I deleted most of the node changes(I can still revert them) but did be really wanting to at least have the grid background and the ability to manipulate the editor window as well as if possible create node pins so its a bit more clear where the lines go in and out.

And that's where we basically are!

@weary torrent I think this is where you can continue on.

If anyone else wants/can help out then that's cool too.

[weary torrent]

If you follow that tutorial you had linked before, it should show you how to add nodes @dense shard.

[dense shard]

Yes but I want to use the code I already wrote which has nothing to do with Dialogs.

[weary torrent]

What I would do, is in a new project you follow the tutorial. The reason is that it will(should) explain how to use the system. Things like adding nodes, and saving. Then you will better understand how to use GraphView for what you actually want to do with it.

[dense shard]

I see okay, Yeah I can do that but I completed most of those tutorials and the problem is that I then still have not a single clue how to then bring my own code into it as I use a different Class Signature for my RoomNode class so a majority of the code can't be used anymore.

Which throws errors like these

The tutorial itself does not explain how to fix that as it never uses that to begin with.

[weary torrent]

What is RoomNodeSO?

[dense shard]

That's my Script which stands for RoomNodeScriptableObject

[strange ocean]

Looks like its not really a SO

[dense shard]

Its a prefab in which I store all my data.

[weary torrent]

What does it inherit from?

[dense shard]

Like the ChildRoomListID and the ParentRoomListID as well as a unique ID for each individual room and each room has their own type like for example a entrance or a boss room.

[dense shard]

Give me a sec I get you that code.

[weary torrent]

Assuming that that Node class is from the GraphView. That is wrong. Everything in GraphView is only for view (UI) related stuff. You need your own class for storing data.

[dense shard]

The Node Class is from the using UnityEditor.Experimental.Graphview;

I needed that to create a node on its own.

RoomNodeSO normally uses the signature ScriptableObject

But that is were it differs from the tutorial as I have a ton of data but this guy in the course does not.

[weary torrent]

Think of it like this. There is all the code that you need at runtime. This is commonly referred to as a Model. Then there is the code you need in the editor to show Ui and stuff. This is called View normally. You build the View from the data in the Model

[dense shard]

https://www.youtube.com/watch?v=6vVqBt_5nbs&list=PL0yxB6cCkoWK38XT4stSztcLueJ_kTx5f&index=8

https://www.youtube.com/watch?v=dosMV4EftAI&ab_channel=IndieWafflus

These are the tutorials.

And then there is a bunch more.

[weary torrent]

So you would have a Room : ScriptableObject and a RoomNode : Node

RoomNode would reference Room

[dense shard]

As in 2 different scripts?

[weary torrent]

Yeah, one for the Model/Data (Room), and one for the View/UI (RoomNode)

It is kind of like how you make a CustomEditor script for components

[dense shard]

Okay but what is different from the RoomNode versus the scriptable object?

Right now the RoomNodeSO holds all the data including what is necessary to create the node which then is being drawn in the RoomNodeGraphEditor.

[weary torrent]

As I said, Room (The ScriptableObject) holds all of the data need at runtime. And RoomNode (the GraphView Node) just displays that data in the GraphView.

[dense shard]

This is the RoomNodeSO code basically

using System.Collections;
using System.Collections.Generic;
using UnityEditor;
using UnityEngine;
using UnityEditor.Experimental.GraphView;
using UnityEngine.UIElements;

namespace NodeGraph.Editor
{
    public class RoomNodeGraphView : GraphView
    {
        public RoomNodeGraphView()
        {
            AddManipulators();
            AddGridBackground();

            AddStyles();
        }
        
        
        private void AddManipulators()
        {
            SetupZoom(ContentZoomer.DefaultMinScale, ContentZoomer.DefaultMaxScale);
            this.AddManipulator(new ContentDragger());
        }
        
        private void AddGridBackground()
        {
            GridBackground gridBackground = new GridBackground();
            
            gridBackground.StretchToParentSize();
            
            Insert(0, new GridBackground());
        }

        private void AddStyles()
        {
            StyleSheet styleSheet = (StyleSheet)EditorGUIUtility.Load("RoomNodeSystem/RoomNodeGraphViewStyles.uss");

            styleSheets.Add(styleSheet);
        }
    }        
}

This is the RoomNodeGraphView script

But then I also got RoomNodeGraphSO as a script.

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

namespace NodeGraph
{
    // Asset Menu
    [CreateAssetMenu(fileName = "RoomNodeGraph", menuName = "Roguelike Action Engine/Scriptable Objects/Dungeon/Room Node Graph")]
    public class RoomNodeGraphSO : ScriptableObject
    {
        // RoomNodeGraphSO Variables
        [HideInInspector] public RoomNodeTypeListSO roomNodeTypeList;
        [HideInInspector] public List<RoomNodeSO> roomNodeList = new List<RoomNodeSO>();
        [HideInInspector] public Dictionary<string, RoomNodeSO> roomNodeDictionary = new Dictionary<string, RoomNodeSO>();


        private void Awake()
        {
            LoadRoomNodeDictionary();
        }

        /// <summary>
        /// Load the room node dictionary from the room node list
        /// </summary>
        private void LoadRoomNodeDictionary()
        {
            roomNodeDictionary.Clear();
        
            // Populate dictionary
            foreach (RoomNodeSO node in roomNodeList)
            {
                roomNodeDictionary[node.id] = node;
            }
        }
    
    
        #region Editor Code

        // The following code should only run in the Unity Editor
#if UNITY_EDITOR
        // Editor Variables
        [HideInInspector] public RoomNodeSO roomNodeToDrawLineFrom = null;
        [HideInInspector] public Vector2 linePosition;

        // Repopulate node dictionary every time a change is made in the editor
        public void OnValidate()
        {
            LoadRoomNodeDictionary();
        }

        public void SetNodeToDrawConnectionLineFrom(RoomNodeSO node, Vector2 position)
        {
            roomNodeToDrawLineFrom = node;
            linePosition = position;
        }

#endif

        #endregion Editor Code
    }
}

and to finish it off the RoomNodeGraphEditor.

Then my question would be how to properly change this up to work according to your method.

I also still got a script called RoomNodeTypeSO that holds the data for the different types of node that are set in a Game Resources Prefab.

That basically handles the Editor plus some other code but not directly necessary to what I am doing.

@weary torrent Love your thoughts/advice whenever you have the time to reply.

[weary torrent]

Right-o, so looking at this. I will be honest, it is going to be pretty hard for you right now since it is a good bit above your current skill level. Not saying you can't or shouldn't make it. Just that is going to be a lot harder for you. So if you don't really need it right now, then I would hold off and do other things to learn more of the APIs and how it works.

Right now you have both IMGUI and UIToolkit code, and you can only use one at a time. GraphView is UIToolkit, and your old OnGUI code is IMGUI. My recommendation would be to learn more about UIToolkit (Also called UIElements). I think that will help you understand all of this a lot better.