UnityRuntimeNodeEditor Download - UnityRuntimeNodeEditor Quellcode Download

Knoteneditor

Laufzeitknoten -Editor

Fast jeder in Unity hergestellte Knoteneditor verwendet den Unity -Editor, um es zu schaffen.
Mein Ziel war es in der Laufzeit mit der UI der Unity.

Socket -basierte Verbindung
Laden und speichern Sie einen Diagramm mit dem Node Serializer
Kontextmenü für Grafik, Knoten und Verbindungen
Ereignisbasierte Benachrichtigung
Pfanne und Zoom
Mehrere Redakteure können in einer Szene hervorgebracht werden
Erstellen Sie eine Grafik mit API oder benutzerdefiniertem Präfit
Vermächtnis und neues Eingabesystem

Einheit Version 2021.3.3f1

Knoteneditor

Beispiel für RGB -Farbanzeige

Knoteneditor

Beispiel

Aus einfach den NodeEditor erweitern.

 public class ExampleNodeEditor : NodeEditor
{
    public override void StartEditor ( NodeGraph graph )
    {
        base . StartEditor ( graph ) ;

        //  make your custom initialization here
    }
}

Erstellen Sie die Grafik mit der API. Diagramm erstreckt sich bis zum Halterobjekt. (KEINE PREFABABET)

 public class ApplicationStartup : MonoBehaviour
{
    public RectTransform        editorHolder ;
    public ExampleNodeEditor    editor ;    //  asigned in unity from hierarchy

    private void Start ( )
    {
        var graph = editor . CreateGraph < NodeGraph > ( editorHolder ) ;
        // var graph = editor.CreateGraph<NodeGraph>(editorHolder, bgColor, connColor);
        editor . StartEditor ( graph ) ;
    }
}

Möglicherweise möchten Sie auch Ihr eigenes günstiges Diagramm und Ihr eigenes Prefab verwenden.

 public class ApplicationStartup : MonoBehaviour
{
    public RectTransform        editorHolder ;
    public ExampleNodeEditor    editor ;

    private void Start ( )
    {
        editor . StartEditor ( graph ) ;
    }
}

Diagrammaktionen sind ereignisbasiert.

Knoteneditor

Im Beispielordner finden Sie ein vollständiges Beispiel. Lassen Sie uns durchlaufen.

Hören Sie Events vom Herausgeber an

 public class ExampleNodeEditor : NodeEditor
{
    private string _savePath ;

    public override void StartEditor ( NodeGraph graph )
    {
        base . StartEditor ( graph ) ;

        _savePath = Application . dataPath + "/Example/Resources/graph.json" ;
        
        Events . OnGraphPointerClickEvent           += OnGraphPointerClick ;
        Events . OnGraphPointerDragEvent            += OnGraphPointerDrag ;
        Events . OnNodePointerClickEvent            += OnNodePointerClick ;
        Events . OnConnectionPointerClickEvent      += OnNodeConnectionPointerClick ;
    }
}

Grafikkontextmenü

 protected override void OnGraphPointerClick ( PointerEventData eventData )
{
    switch ( eventData . button )
    {
        case PointerEventData . InputButton . Right : 
        {
            var ctx = new ContextMenuBuilder ( )
            . Add ( "nodes/float" ,          CreateFloatNode )
            . Add ( "nodes/math op" ,       CreateMatOpNode )
            . Add ( "graph/load" ,          ( ) => LoadGraph ( _savePath ) )
            . Add ( "graph/save" ,          ( ) => SaveGraph ( _savePath ) )
            . Build ( ) ;

            SetContextMenu ( ctx ) ;
            DisplayContextMenu ( ) ; 
        }
        break ;
        case PointerEventData . InputButton . Left : CloseContextMenu ( ) ; break ;
    }
}

Knotenkontextmenü

 protected override void OnNodePointerClick ( Node node , PointerEventData eventData )
{
    if ( eventData . button == PointerEventData . InputButton . Right )
    {
            var ctx = new ContextMenuBuilder ( )
            . Add ( "duplicate" ,            ( ) => DuplicateNode ( node ) )
            . Add ( "clear connections" ,    ( ) => ClearConnections ( node ) )
            . Add ( "delete" ,               ( ) => DeleteNode ( node ) )
            . Build ( ) ;

        SetContextMenu ( ctx ) ;
        DisplayContextMenu ( ) ;
    }
}

Verbindungskontextmenü

 protected override void OnNodeConnectionPointerClick ( string connId , PointerEventData eventData )
{
    if ( eventData . button == PointerEventData . InputButton . Right )
    {
        var ctx = new ContextMenuBuilder ( )
        . Add ( "clear connection" , ( ) => DisconnectConnection ( connId ) )
        . Build ( ) ;

        SetContextMenu ( ctx ) ;
        DisplayContextMenu ( ) ;
    }
}

Das wurde gesagt, um einen neuen Knoten zu erstellen:

 public class MyAwesomeNode : Node
{
    public TMP_InputField valueField ;   //  added from editor
    public SocketOutput outputSocket ;   //  added from editor
    public SocketInput inputSocket ;     //  added from editor

    public override void Setup ( )
    {
        Register ( outputSocket ) ;
        Register ( inputSocket ) ;

        SetHeader ( "float" ) ;
    }

    public override void OnSerialize ( Serializer serializer )
    {
        //  save values on graph save
        serializer . Add ( "floatValue" , valueField . text ) ;

        //  it would be good idea to use JsonUtility for complex data
    }

    public override void OnDeserialize ( Serializer serializer )
    {
        //  load values on graph load
        var value = serializer . Get ( "floatValue" ) ;
        valueField . SetTextWithoutNotify ( value ) ;
    }
}

Um einen Knoten aus Ihrem Editor zu erstellen, übergeben Sie seinen Pfad vom Ordner Resources .

 //  context item actions
private void CreateMyNode ( )
{
    graph . Create ( "Prefabs/Nodes/MyAwesomeNode" ) ;    //  your prefab path in resources
}