Creating your own node views

Once you've created your own node, you can create your own node view for it. By creating a node view for your custom node, you can add additional elements to display in the graph editor.

For example, you can add a preview image, like a lot of the built-in nodes have.

Here's how you create a custom node view:

using InsaneScatterbrain.ScriptGraph.Editor;
using UnityEditor.UIElements;
 
// Adding this attribute tells Map Graph that this class is a node view for nodes of type ExampleNode
[ScriptNodeView(typeof(ExampleNode))]
public class ExampleNodeView : ScriptNodeView
{
    public ExampleNodeView(ExampleNode node, ScriptGraphView graphView) : base(node, graphView)
    {
        // Here you can add UI elements to the view node.
        var label = new Label("Hello, Node View!");
        mainContainer.Add(label);

        // This is how to easily add a preview image to your node.
        // The callback should return the Texture2D that the preview image will display each time the node is processed.
        this.AddPreview<ExampleNode>(GetPreviewTexture);
    }
    
    private Texture2D GetPreviewTexture(ExampleNode node) => node.TextureData.ToTexture2D();
}

Editor-only

Node views are editor-only, so you need to make sure they don't end up in the build, as it will cause errors.

There are a couple of ways to this. The easiest is to add the file containing your node view class to a folder called Editor anywhere in your assets folder. Unity treats everything in an Editor folder as editor-only, so it won't be included in the build.

You can also enclose your node view in #if UNITY_EDITOR preprocessor directives, like this:

#if UNITY_EDITOR
// Your node view code here
#endif

Another way is to create a separate assembly definition file for your editor code and make sure that only the Editor platform is selected in the assembly definition file inspector. You can read more about assembly definition files here.

Custom Icon

In order to be able to visually differentiate your nodes from each other, you can add a custom icon to, like this is the case for subgraph nodes.

In order to do so you can override the Icon property for your custom node view. Like so, for example:

[ScriptNodeView(typeof(CustomNode))]
public class CustomNodeView : ScriptNodeView
{
    public override Texture2D Icon =>
        AssetDatabase.LoadAssetAtPath<Texture2D>(
            "Assets/Plugins/InsaneScatterbrain/ScriptGraph.Editor.Assets/Icons/graph.png");
}