UnityRuntimeNodeEditor Téléchargement - UnityRuntimeNodeEditor Code source Télécharger

éditeur de nœud

Éditeur de nœud d'exécution

Presque tous les éditeurs de nœuds réalisés dans Unity utilisent Unity Editor pour le faire.
Mon objectif était de le faire en cours d'exécution avec Unity UI.

Connexion basée sur la prise
Chargez et enregistrez un graphique à l'aide du sérialiseur de nœud
Menu contextuel du graphique, des nœuds et des connexions
Notification basée sur l'événement
Casserole et zoom
Plusieurs éditeurs peuvent être engendrés dans une scène
Créer un graphique par API ou Préfab personnalisé
Héritage et nouveau système d'entrée

Unity Version 2021.3.3F1

éditeur de nœud

Exemple d'affichage de couleur RVB

éditeur de nœud

Exemple

Étendez simplement le NodeEditor .

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

        //  make your custom initialization here
    }
}

Créer un graphique à l'aide de l'API, le graphique s'étirera vers l'objet Holder. (Aucun préfab implique)

 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 ) ;
    }
}

Vous souhaiterez peut-être également utiliser votre propre graphique personnalisé et votre préfab.

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

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

Les actions du graphique sont basées sur des événements.

éditeur de nœud

Vous trouverez un exemple complet dans l'exemple de dossier. Passons pas à pas pas pas à pas.

Écoutez les événements de l'éditeur

 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 ;
    }
}

menu contextuel de graphique

 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 ;
    }
}

Menu contextuel du nœud

 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 ( ) ;
    }
}

menu contextuel de connexion

 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 ( ) ;
    }
}

Cela a été dit pour créer un nouveau nœud:

 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 ) ;
    }
}

Pour créer un nœud à partir de votre éditeur, passez son chemin à partir du dossier Resources .

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