博客
关于我
在Unity中创建基于Node节点的编辑器 （一）
阅读量：285 次
发布时间：2019-03-01

本文共 34541 字，大约阅读时间需要 115 分钟。

孙广东   2018.5.13

Unity  AssetStore中关于Node节点 编辑器相关的插件可是数不胜数， 状态机，行为树，Shader 可视化等等。

Unity自己也有 Animator的窗口使用， 还有新的Shader Graph。

         现在Unity的编辑器代码已经开源了，还没有时间看。


第一部分， 创建界面 功能
在这篇博文中，我们将在Unity中创建我们自己的基于节点的编辑器。 是一个简单的节点编辑器，您可以进行改进。

我们将在这篇文章中创建这个窗口（点击查看gif的动作）

创建窗口
我们先创建一个简单的编辑器窗口。 代码的结构与我们在之前的文章中开发的控制台克隆类似：首先绘制元素，然后处理输入，并且如果由于输入事件而改变GUI，则强制窗口重绘。
using UnityEngine ;
using UnityEditor ;
using System . Collections . Generic ;
 
public class NodeBasedEditor : EditorWindow
{
     [ MenuItem ( "Window/Node Based Editor" )]
     private static void OpenWindow ()
     {
         NodeBasedEditor window = GetWindow < NodeBasedEditor > ();
         window . titleContent = new GUIContent ( "Node Based Editor" );
     }
 
     private void OnGUI ()
     {
         DrawNodes ();
 
         ProcessEvents ( Event . current );
 
         if ( GUI . changed ) Repaint ();
     }
 
     private void DrawNodes ()
     {
     }
 
     private void ProcessEvents ( Event e )
     {
     }
}
绘制节点
那么，因为这是一个节点编辑器，它应该包含一个节点列表，这就要求我们定义一个 List<Node>。 但首先我们应该定义Node类。 节点将负责绘制自己并处理自己的事件。 与 NodeBasedEditor中的 ProcessEvents(Event e)  不同，Node中的 ProcessEvents(Event e)  将返回一个布尔值，以便我们检查是否应该重新绘制GUI。

using System ;
using UnityEditor ;
using UnityEngine ;
 
public class Node
{
     public Rect rect ;
     public string title ;
 
     public GUIStyle style ;
 
     public Node ( Vector2 position , float width , float height , GUIStyle nodeStyle )
     {
         rect = new Rect ( position . x , position . y , width , height );
         style = nodeStyle ;
     }
 
     public void Drag ( Vector2 delta )
     {
         rect . position += delta ;
     }
 
     public void Draw ()
     {
         GUI . Box ( rect , title , style );
     }
 
     public bool ProcessEvents ( Event e )
     {
         return false ;
     }
}

using UnityEngine ;
using UnityEditor ;
using System . Collections . Generic ;
 
public class NodeBasedEditor : EditorWindow
{
     private List < Node > nodes ;
 
     [ MenuItem ( "Window/Node Based Editor" )]
     private static void OpenWindow ()
     {
         NodeBasedEditor window = GetWindow < NodeBasedEditor > ();
         window . titleContent = new GUIContent ( "Node Based Editor" );
     }
 
     private void OnGUI ()
     {
         DrawNodes ();
 
         ProcessEvents ( Event . current );
 
         if ( GUI . changed ) Repaint ();
     }
 
     private void DrawNodes ()
     {
         if ( nodes != null )
         {
             for ( int i = 0 ; i < nodes . Count ; i ++ )
             {
                 nodes [ i ]. Draw ();
             }
         }
     }
 
     private void ProcessEvents ( Event e )
     {
     }
}

创建节点
节点现在在编辑器中绘制，但如果我们不创建节点，则无法看到它们。 当用户在编辑器中点击右键时，我们应该显示一个带有“ Add node”项的上下文菜单。 当用户点击“ Add node”时，我们将创建一个节点并将其添加到节点列表中，以便绘制它。 节点需要位置，宽度，高度和样式; 位置将是鼠标的当前位置，宽度将是200，高度将是50（是的，我不喜欢在代码中使用 magic numbers，但这将是一个简单的编辑器），我们将复制Animator窗口的节点样式进行造型。

using UnityEngine ;
using UnityEditor ;
using System . Collections . Generic ;
 
public class NodeBasedEditor : EditorWindow
{
     private List < Node > nodes ;
 
     private GUIStyle nodeStyle ;
 
     [ MenuItem ( "Window/Node Based Editor" )]
     private static void OpenWindow ()
     {
         NodeBasedEditor window = GetWindow < NodeBasedEditor > ();
         window . titleContent = new GUIContent ( "Node Based Editor" );
     }
 
     private void OnEnable ()
     {
         nodeStyle = new GUIStyle ();
         nodeStyle . normal . background = EditorGUIUtility . Load ( "builtin skins/darkskin/images/node1.png" ) as Texture2D ;
         nodeStyle . border = new RectOffset ( 12 , 12 , 12 , 12 );
     }
 
     private void OnGUI ()
     {
         DrawNodes ();
 
         ProcessEvents ( Event . current );
 
         if ( GUI . changed ) Repaint ();
     }
 
     private void DrawNodes ()
     {
         if ( nodes != null )
         {
             for ( int i = 0 ; i < nodes . Count ; i ++ )
             {
                 nodes [ i ]. Draw ();
             }
         }
     }
 
     private void ProcessEvents ( Event e )
     {
         switch ( e . type )
         {
             case EventType . MouseDown :
                 if ( e . button == 1 )
                 {
                     ProcessContextMenu ( e . mousePosition );
                 }
                 break ;
         }
     }
 
     private void ProcessContextMenu ( Vector2 mousePosition )
     {
         GenericMenu genericMenu = new GenericMenu ();
         genericMenu . AddItem ( new GUIContent ( "Add node" ), false , () => OnClickAddNode ( mousePosition ));
         genericMenu . ShowAsContext ();
     }
 
     private void OnClickAddNode ( Vector2 mousePosition )
     {
         if ( nodes == null )
         {
             nodes = new List < Node > ();
         }
 
         nodes . Add ( new Node ( mousePosition , 200 , 50 , nodeStyle ));
     }
}

使节点可拖动
好的，现在我们可以添加节点了，但是我们不能拖动它们。 正如我前面提到的，节点将处理它们自己的事件，因此我们将在 Node类中处理拖动事件。 这里需要注意的一点是，我们应该使用 Use() 方法“ using”拖动事件。 稍后，我们将添加画布拖动，并且我们不希望同时拖动节点和整个画布（“ using”一个事件阻止它被其他过程使用，即停止事件冒泡）。 另请注意，   ProcessNodeEvents(Event e)中的for循环向后遍历节点列表，因为最后一个节点位于顶部，所以它应该首先处理事件。

using System ;
using UnityEditor ;
using UnityEngine ;
 
public class Node
{
     public Rect rect ;
     public string title ;
     public bool isDragged ;
 
     public GUIStyle style ;
 
     public Node ( Vector2 position , float width , float height , GUIStyle nodeStyle )
     {
         rect = new Rect ( position . x , position . y , width , height );
         style = nodeStyle ;
     }
 
     public void Drag ( Vector2 delta )
     {
         rect . position += delta ;
     }
 
     public void Draw ()
     {
         GUI . Box ( rect , title , style );
     }
 
     public bool ProcessEvents ( Event e )
     {
         switch ( e . type )
         {
             case EventType . MouseDown :
                 if ( e . button == 0 )
                 {
                     if ( rect . Contains ( e . mousePosition ))
                     {
                         isDragged = true ;
                         GUI . changed = true ;
                     }
                     else
                     {
                         GUI . changed = true ;
                     }
                 }
                 break ;
 
             case EventType . MouseUp :
                 isDragged = false ;
                 break ;
 
             case EventType . MouseDrag :
                 if ( e . button == 0 && isDragged )
                 {
                     Drag ( e . delta );
                     e . Use ();
                     return true ;
                 }
                 break ;
         }
 
         return false ;
     }
}
NodeBaseEditor.cs
     private void OnGUI ()
     {
         DrawNodes ();
 
         ProcessNodeEvents ( Event . current );
         ProcessEvents ( Event . current );
 
         if ( GUI . changed ) Repaint ();
     }
 
     private void DrawNodes ()
     {
         if ( nodes != null )
         {
             for ( int i = 0 ; i < nodes . Count ; i ++ )
             {
                 nodes [ i ]. Draw ();
             }
         }
     }
 
     private void ProcessEvents ( Event e )
     {
         switch ( e . type )
         {
             case EventType . MouseDown :
                 if ( e . button == 1 )
                 {
                     ProcessContextMenu ( e . mousePosition );
                 }
                 break ;
         }
     }
 
     private void ProcessNodeEvents ( Event e )
     {
         if ( nodes != null )
         {
             for ( int i = nodes . Count - 1 ; i >= 0 ; i -- )
             {
                 bool guiChanged = nodes [ i ]. ProcessEvents ( e );
 
                 if ( guiChanged )
                 {
                     GUI . changed = true ;
                 }
             }
         }
     }
     private void ProcessContextMenu ( Vector2 mousePosition )
     {
         GenericMenu genericMenu = new GenericMenu ();
         genericMenu . AddItem ( new GUIContent ( "Add node" ), false , () => OnClickAddNode ( mousePosition ));
         genericMenu . ShowAsContext ();
     }

创建节点之间的连接
我们的节点编辑器现在有节点，但我们也应该能够连接它们。为了做到这一点，我们需要一个节点上的两个连接点（in和out）以及它们之间的连接。一个连接点有一个矩形（以便我们可以绘制它），有一个类型（in或out），有一个样式并引用它的父节点。因此，我们的 ConnectionPoint  类将是一个非常简单的类。在特定位置绘制按钮并在点击该按钮时执行操作。

另一方面，连接有两个连接点和一个动作来删除它。 Connection类比 ConnectionPoint简单得多，但它引入了一个新概念： Handles。该类实际上用于在场景视图中绘制3D GUI控件，但它是唯一具有贝塞尔绘图方法的类： Handles.DrawBezier(Vector3, Vector3, Vector3, Vector3, Color, Texture2D, float).  。它需要7个参数，前4个参数是位置控制（起始位置，结束位置，起始切线和终止切线），而其余的则决定贝塞尔的外观。 （ 这个就太方便了， 不需要引入第三方插件或者自己写了）
ConnectionPoint.cs
using System ;
using UnityEngine ;
 
public enum ConnectionPointType { In , Out }
 
public class ConnectionPoint
{
     public Rect rect ;
 
     public ConnectionPointType type ;
 
     public Node node ;
 
     public GUIStyle style ;
 
     public Action < ConnectionPoint > OnClickConnectionPoint ;
    
     public ConnectionPoint ( Node node , ConnectionPointType type , GUIStyle style , Action < ConnectionPoint > OnClickConnectionPoint )
     {
         this . node = node ;
         this . type = type ;
         this . style = style ;
         this . OnClickConnectionPoint = OnClickConnectionPoint ;
         rect = new Rect ( 0 , 0 , 10f , 20f );
     }
 
     public void Draw ()
     {
         rect . y = node . rect . y + ( node . rect . height * 0.5f ) - rect . height * 0.5f ;
 
         switch ( type )
         {
             case ConnectionPointType . In :
                 rect . x = node . rect . x - rect . width + 8f ;
                 break ;
 
             case ConnectionPointType . Out :
                 rect . x = node . rect . x + node . rect . width - 8f ;
                 break ;
         }
        
         if ( GUI . Button ( rect , "" , style ))
         {
             if ( OnClickConnectionPoint != null )
             {
                 OnClickConnectionPoint ( this );
             }
         }
     }
}
Connection.cs
using System ;
using UnityEditor ;
using UnityEngine ;
 
public class Connection
{
     public ConnectionPoint inPoint ;
     public ConnectionPoint outPoint ;
     public Action < Connection > OnClickRemoveConnection ;
 
     public Connection ( ConnectionPoint inPoint , ConnectionPoint outPoint , Action < Connection > OnClickRemoveConnection )
     {
         this . inPoint = inPoint ;
         this . outPoint = outPoint ;
         this . OnClickRemoveConnection = OnClickRemoveConnection ;
     }
 
     public void Draw ()
     {
         Handles . DrawBezier (
             inPoint . rect . center ,
             outPoint . rect . center ,
             inPoint . rect . center + Vector2 . left * 50f ,
             outPoint . rect . center - Vector2 . left * 50f ,
             Color . white ,
             null ,
             2f
         );
 
         if ( Handles . Button (( inPoint . rect . center + outPoint . rect . center ) * 0.5f , Quaternion . identity , 4 , 8 , Handles . RectangleCap ))
         {
             if ( OnClickRemoveConnection != null )
             {
                 OnClickRemoveConnection ( this );
             }
         }
     }
}

绘图连接
由于 Connection  和 ConnectionPoint类已准备就绪，我们所要做的就是在Node类中绘制连接点并在NodeBasedEditor中绘制连接。 Node类中的更改将最小化; 我们将定义两个连接点，修改构造函数，以便我们可以传递样式和动作，并使用 Draw() 方法绘制它们。

但是， NodeBasedEditor   需要进行重大修改。首先，我们需要为连接点定义样式。你可以为它们两个使用单一的样式，但我希望它们看起来不同，所以我将为每个样式使用不同的样式。我们将在 OnEnable()  中初始化这些样式，就像我们初始化节点样式一样。

其次，我们需要跟踪点击的连接点，这样当用户选择一个进出时，我们应该在它们之间建立一个连接。这一步包括大部分增加：

  • OnClickInPoint(ConnectionPoint) 处理点击入点。
  • OnClickOutPoint(ConnectionPoint) 处理点击出点。
  • OnClickRemoveConnection(Connection) 处理单击连接上的删除按钮。
  • CreateConnection()  在选择入点和出点时创建连接。
  • ClearConnectionSelection()  清除选定的点。
最后，我们需要在   OnGUI()  中绘制连接，就像我们绘制节点一样。
using System ;
using UnityEditor ;
using UnityEngine ;
 
public class Node
{
     public Rect rect ;
     public string title ;
     public bool isDragged ;
 
     public ConnectionPoint inPoint ;
     public ConnectionPoint outPoint ;
 
     public GUIStyle style ;
 
     public Node ( Vector2 position , float width , float height , GUIStyle nodeStyle , GUIStyle inPointStyle , GUIStyle outPointStyle , Action < ConnectionPoint > OnClickInPoint , Action < ConnectionPoint > OnClickOutPoint )
     {
         rect = new Rect ( position . x , position . y , width , height );
         style = nodeStyle ;
         inPoint = new ConnectionPoint ( this , ConnectionPointType . In , inPointStyle , OnClickInPoint );
         outPoint = new ConnectionPoint ( this , ConnectionPointType . Out , outPointStyle , OnClickOutPoint );
     }
 
     public void Drag ( Vector2 delta )
     {
         rect . position += delta ;
     }
 
     public void Draw ()
     {
         inPoint . Draw ();
         outPoint . Draw ();
         GUI . Box ( rect , title , style );
     }
 
     public bool ProcessEvents ( Event e )
     {
         switch ( e . type )
         {
             case EventType . MouseDown :
                 if ( e . button == 0 )
                 {
                     if ( rect . Contains ( e . mousePosition ))
                     {
                         isDragged = true ;
                         GUI . changed = true ;
                     }
                     else
                     {
                         GUI . changed = true ;
                     }
                 }
                 break ;
 
             case EventType . MouseUp :
                 isDragged = false ;
                 break ;
 
             case EventType . MouseDrag :
                 if ( e . button == 0 && isDragged )
                 {
                     Drag ( e . delta );
                     e . Use ();
                     return true ;
                 }
                 break ;
         }
 
         return false ;
     }
}

using UnityEngine ;
using UnityEditor ;
using System . Collections . Generic ;
 
public class NodeBasedEditor : EditorWindow
{
     private List < Node > nodes ;
     private List < Connection > connections ;
 
     private GUIStyle nodeStyle ;
     private GUIStyle inPointStyle ;
     private GUIStyle outPointStyle ;
 
     private ConnectionPoint selectedInPoint ;
     private ConnectionPoint selectedOutPoint ;
 
     [ MenuItem ( "Window/Node Based Editor" )]
     private static void OpenWindow ()
     {
         NodeBasedEditor window = GetWindow < NodeBasedEditor > ();
         window . titleContent = new GUIContent ( "Node Based Editor" );
     }
 
     private void OnEnable ()
     {
         nodeStyle = new GUIStyle ();
         nodeStyle . normal . background = EditorGUIUtility . Load ( "builtin skins/darkskin/images/node1.png" ) as Texture2D ;
         nodeStyle . border = new RectOffset ( 12 , 12 , 12 , 12 );
         inPointStyle = new GUIStyle ();
         inPointStyle . normal . background = EditorGUIUtility . Load ( "builtin skins/darkskin/images/btn left.png" ) as Texture2D ;
         inPointStyle . active . background = EditorGUIUtility . Load ( "builtin skins/darkskin/images/btn left on.png" ) as Texture2D ;
         inPointStyle . border = new RectOffset ( 4 , 4 , 12 , 12 );
 
         outPointStyle = new GUIStyle ();
         outPointStyle . normal . background = EditorGUIUtility . Load ( "builtin skins/darkskin/images/btn right.png" ) as Texture2D ;
         outPointStyle . active . background = EditorGUIUtility . Load ( "builtin skins/darkskin/images/btn right on.png" ) as Texture2D ;
         outPointStyle . border = new RectOffset ( 4 , 4 , 12 , 12 );
     }
 
     private void OnGUI ()
     {
         DrawNodes ();
         DrawConnections ();
 
         ProcessNodeEvents ( Event . current );
         ProcessEvents ( Event . current );
 
         if ( GUI . changed ) Repaint ();
     }
 
     private void DrawNodes ()
     {
         if ( nodes != null )
         {
             for ( int i = 0 ; i < nodes . Count ; i ++ )
             {
                 nodes [ i ]. Draw ();
             }
         }
     }
 
     private void DrawConnections ()
     {
         if ( connections != null )
         {
             for ( int i = 0 ; i < connections . Count ; i ++ )
             {
                 connections [ i ]. Draw ();
             }
         }
     }
 
     private void ProcessEvents ( Event e )
     {
         switch ( e . type )
         {
             case EventType . MouseDown :
                 if ( e . button == 0 )
                 {
                     ClearConnectionSelection ();
                 }
 
                 if ( e . button == 1 )
                 {
                     ProcessContextMenu ( e . mousePosition );
                 }
                 break ;
         }
     }
 
     private void ProcessNodeEvents ( Event e )
     {
         if ( nodes != null )
         {
             for ( int i = nodes . Count - 1 ; i >= 0 ; i -- )
             {
                 bool guiChanged = nodes [ i ]. ProcessEvents ( e );
 
                 if ( guiChanged )
                 {
                     GUI . changed = true ;
                 }
             }
         }
     }
     private void ProcessContextMenu ( Vector2 mousePosition )
     {
         GenericMenu genericMenu = new GenericMenu ();
         genericMenu . AddItem ( new GUIContent ( "Add node" ), false , () => OnClickAddNode ( mousePosition ));
         genericMenu . ShowAsContext ();
     }
 
     private void OnClickAddNode ( Vector2 mousePosition )
     {
         if ( nodes == null )
         {
             nodes = new List < Node > ();
         }
 
         nodes . Add ( new Node ( mousePosition , 200 , 50 , nodeStyle , inPointStyle , outPointStyle , OnClickInPoint , OnClickOutPoint ));
     }
 
     private void OnClickInPoint ( ConnectionPoint inPoint )
     {
         selectedInPoint = inPoint ;
 
         if ( selectedOutPoint != null )
         {
             if ( selectedOutPoint . node != selectedInPoint . node )
             {
                 CreateConnection ();
                 ClearConnectionSelection ();
             }
             else
             {
                 ClearConnectionSelection ();
             }
         }
     }
 
     private void OnClickOutPoint ( ConnectionPoint outPoint )
     {
         selectedOutPoint = outPoint ;
 
         if ( selectedInPoint != null )
         {
             if ( selectedOutPoint . node != selectedInPoint . node )
             {
                 CreateConnection ();
                 ClearConnectionSelection ();
             }
             else
             {
                 ClearConnectionSelection ();
             }
         }
     }
 
     private void OnClickRemoveConnection ( Connection connection )
     {
         connections . Remove ( connection );
     }
 
     private void CreateConnection ()
     {
         if ( connections == null )
         {
             connections = new List < Connection > ();
         }
 
         connections . Add ( new Connection ( selectedInPoint , selectedOutPoint , OnClickRemoveConnection ));
     }
 
     private void ClearConnectionSelection ()
     {
         selectedInPoint = null ;
         selectedOutPoint = null ;
     }
}


选择节点
当用户点击一个节点时，我们应该提供反馈，以便他们知道他们选择了哪个节点（或者是否有节点被选中）。 这在用户想要删除节点时很有用。

using System ;
using UnityEditor ;
using UnityEngine ;
 
public class Node
{
     public Rect rect ;
     public string title ;
     public bool isDragged ;
     public bool isSelected ;
 
     public ConnectionPoint inPoint ;
     public ConnectionPoint outPoint ;
 
     public GUIStyle style ;
     public GUIStyle defaultNodeStyle ;
     public GUIStyle selectedNodeStyle ;
 
     public Node ( Vector2 position , float width , float height , GUIStyle nodeStyle , GUIStyle selectedStyle , GUIStyle inPointStyle , GUIStyle outPointStyle , Action < ConnectionPoint > OnClickInPoint , Action < ConnectionPoint > OnClickOutPoint )
     {
         rect = new Rect ( position . x , position . y , width , height );
         style = nodeStyle ;
         inPoint = new ConnectionPoint ( this , ConnectionPointType . In , inPointStyle , OnClickInPoint );
         outPoint = new ConnectionPoint ( this , ConnectionPointType . Out , outPointStyle , OnClickOutPoint );
         defaultNodeStyle = nodeStyle ;
         selectedNodeStyle = selectedStyle ;
     }
 
     public void Drag ( Vector2 delta )
     {
         rect . position += delta ;
     }
 
     public void Draw ()
     {
         inPoint . Draw ();
         outPoint . Draw ();
         GUI . Box ( rect , title , style );
     }
 
     public bool ProcessEvents ( Event e )
     {
         switch ( e . type )
         {
             case EventType . MouseDown :
                 if ( e . button == 0 )
                 {
                     if ( rect . Contains ( e . mousePosition ))
                     {
                         isDragged = true ;
                         GUI . changed = true ;
                         isSelected = true ;
                         style = selectedNodeStyle ;
                     }
                     else
                     {
                         GUI . changed = true ;
                         isSelected = false ;
                         style = defaultNodeStyle ;
                     }
                 }
                 break ;
 
             case EventType . MouseUp :
                 isDragged = false ;
                 break ;
 
             case EventType . MouseDrag :
                 if ( e . button == 0 && isDragged )
                 {
                     Drag ( e . delta );
                     e . Use ();
                     return true ;
                 }
                 break ;
         }
 
         return false ;
     }
}

using UnityEngine ;
using UnityEditor ;
using System . Collections . Generic ;
 
public class NodeBasedEditor : EditorWindow
{
     private List < Node > nodes ;
     private List < Connection > connections ;
 
     private GUIStyle nodeStyle ;
     private GUIStyle selectedNodeStyle ;
     private GUIStyle inPointStyle ;
     private GUIStyle outPointStyle ;
 
     private ConnectionPoint selectedInPoint ;
     private ConnectionPoint selectedOutPoint ;
 
     [ MenuItem ( "Window/Node Based Editor" )]
     private static void OpenWindow ()
     {
         NodeBasedEditor window = GetWindow < NodeBasedEditor > ();
         window . titleContent = new GUIContent ( "Node Based Editor" );
     }
 
     private void OnEnable ()
     {
         nodeStyle = new GUIStyle ();
         nodeStyle . normal . background = EditorGUIUtility . Load ( "builtin skins/darkskin/images/node1.png" ) as Texture2D ;
         nodeStyle . border = new RectOffset ( 12 , 12 , 12 , 12 );
 
         selectedNodeStyle = new GUIStyle ();
         selectedNodeStyle . normal . background = EditorGUIUtility . Load ( "builtin skins/darkskin/images/node1 on.png" ) as Texture2D ;
         selectedNodeStyle . border = new RectOffset ( 12 , 12 , 12 , 12 );
 
         inPointStyle = new GUIStyle ();
         inPointStyle . normal . background = EditorGUIUtility . Load ( "builtin skins/darkskin/images/btn left.png" ) as Texture2D ;
         inPointStyle . active . background = EditorGUIUtility . Load ( "builtin skins/darkskin/images/btn left on.png" ) as Texture2D ;
         inPointStyle . border = new RectOffset ( 4 , 4 , 12 , 12 );
 
         outPointStyle = new GUIStyle ();
         outPointStyle . normal . background = EditorGUIUtility . Load ( "builtin skins/darkskin/images/btn right.png" ) as Texture2D ;
         outPointStyle . active . background = EditorGUIUtility . Load ( "builtin skins/darkskin/images/btn right on.png" ) as Texture2D ;
         outPointStyle . border = new RectOffset ( 4 , 4 , 12 , 12 );
     }
 
     ...
NodeBasedEditor.cs

     private void OnClickAddNode ( Vector2 mousePosition )
     {
         if ( nodes == null )
         {
             nodes = new List < Node > ();
         }
 
         nodes . Add ( new Node ( mousePosition , 200 , 50 , nodeStyle , selectedNodeStyle , inPointStyle , outPointStyle , OnClickInPoint , OnClickOutPoint ));
     }

删除节点
一些节点编辑喜欢将节点按钮放在节点本身上，但在我们的情况下，这可能是危险的：用户可能会意外地删除节点。 所以，我们要做下一件最好的事情：将该按钮放在上下文菜单上。 用户应该首先选择节点，然后右键单击它以访问删除节点按钮。 当用户点击删除节点时，我们将从节点列表中删除该节点。 但是，该节点可能会连接到其他节点，所以我们应该首先删除这些连接。

using System ;
using UnityEditor ;
using UnityEngine ;
 
public class Node
{
     public Rect rect ;
     public string title ;
     public bool isDragged ;
     public bool isSelected ;
 
     public ConnectionPoint inPoint ;
     public ConnectionPoint outPoint ;
 
     public GUIStyle style ;
     public GUIStyle defaultNodeStyle ;
     public GUIStyle selectedNodeStyle ;
 
     public Action < Node > OnRemoveNode ;
 
     public Node ( Vector2 position , float width , float height , GUIStyle nodeStyle , GUIStyle selectedStyle , GUIStyle inPointStyle , GUIStyle outPointStyle , Action < ConnectionPoint > OnClickInPoint , Action < ConnectionPoint > OnClickOutPoint , Action < Node > OnClickRemoveNode )
     {
         rect = new Rect ( position . x , position . y , width , height );
         style = nodeStyle ;
         inPoint = new ConnectionPoint ( this , ConnectionPointType . In , inPointStyle , OnClickInPoint );
         outPoint = new ConnectionPoint ( this , ConnectionPointType . Out , outPointStyle , OnClickOutPoint );
         defaultNodeStyle = nodeStyle ;
         selectedNodeStyle = selectedStyle ;
         OnRemoveNode = OnClickRemoveNode ;
     }
 
     public void Drag ( Vector2 delta )
     {
         rect . position += delta ;
     }
 
     public void Draw ()
     {
         inPoint . Draw ();
         outPoint . Draw ();
         GUI . Box ( rect , title , style );
     }
 
     public bool ProcessEvents ( Event e )
     {
         switch ( e . type )
         {
             case EventType . MouseDown :
                 if ( e . button == 0 )
                 {
                     if ( rect . Contains ( e . mousePosition ))
                     {
                         isDragged = true ;
                         GUI . changed = true ;
                         isSelected = true ;
                         style = selectedNodeStyle ;
                     }
                     else
                     {
                         GUI . changed = true ;
                         isSelected = false ;
                         style = defaultNodeStyle ;
                     }
                 }
 
                 if ( e . button == 1 && isSelected && rect . Contains ( e . mousePosition ))
                 {
                     ProcessContextMenu ();
                     e . Use ();
                 }
                 break ;
 
             case EventType . MouseUp :
                 isDragged = false ;
                 break ;
 
             case EventType . MouseDrag :
                 if ( e . button == 0 && isDragged )
                 {
                     Drag ( e . delta );
                     e . Use ();
                     return true ;
                 }
                 break ;
         }
 
         return false ;
     }
 
     private void ProcessContextMenu ()
     {
         GenericMenu genericMenu = new GenericMenu ();
         genericMenu . AddItem ( new GUIContent ( "Remove node" ), false , OnClickRemoveNode );
         genericMenu . ShowAsContext ();
     }
 
     private void OnClickRemoveNode ()
     {
         if ( OnRemoveNode != null )
         {
             OnRemoveNode ( this );
         }
     }
}
NodeBasedEditor.cs
     private void OnClickAddNode ( Vector2 mousePosition )
     {
         if ( nodes == null )
         {
             nodes = new List < Node > ();
         }
 
         nodes . Add ( new Node ( mousePosition , 200 , 50 , nodeStyle , selectedNodeStyle , inPointStyle , outPointStyle , OnClickInPoint , OnClickOutPoint , OnClickRemoveNode ));
     }


     private void OnClickRemoveNode ( Node node )
     {
         if ( connections != null )
         {
             List < Connection > connectionsToRemove = new List < Connection > ();
 
             for ( int i = 0 ; i < connections . Count ; i ++ )
             {
                 if ( connections [ i ]. inPoint == node . inPoint || connections [ i ]. outPoint == node . outPoint )
                 {
                     connectionsToRemove . Add ( connections [ i ]);
                 }
             }
 
             for ( int i = 0 ; i < connectionsToRemove . Count ; i ++ )
             {
                 connections . Remove ( connectionsToRemove [ i ]);
             }
 
             connectionsToRemove = null ;
         }
 
         nodes . Remove ( node );
     }

最后的接触
节点编辑器在这一点上是完整的，但它缺少一些可以提升用户体验的重要功能：

  • 可拖动的画布，
  • 从所选连接点到鼠标位置的贝塞尔曲线，
  • 背景中的网格。
  • 让我们的画布可以拖动是最简单的，所以让我们从这个开始。 我们所要做的只是将鼠标拖放到节点列表中的每个节点。

NodeBasedEditor.cs
public class NodeBasedEditor : EditorWindow
{
     private List < Node > nodes ;
     private List < Connection > connections ;
 
     private GUIStyle nodeStyle ;
     private GUIStyle selectedNodeStyle ;
     private GUIStyle inPointStyle ;
     private GUIStyle outPointStyle ;
 
     private ConnectionPoint selectedInPoint ;
     private ConnectionPoint selectedOutPoint ;
    
     private Vector2 drag ;
 
     ...

     private void ProcessEvents ( Event e )
     {
         drag = Vector2 . zero ;
 
         switch ( e . type )
         {
             case EventType . MouseDown :
                 if ( e . button == 0 )
                 {
                     ClearConnectionSelection ();
                 }
 
                 if ( e . button == 1 )
                 {
                     ProcessContextMenu ( e . mousePosition );
                 }
             break ;
 
             case EventType . MouseDrag :
                 if ( e . button == 0 )
                 {
                     OnDrag ( e . delta );
                 }
             break ;
         }
     }

     private void OnDrag ( Vector2 delta )
     {
         drag = delta ;
 
         if ( nodes != null )
         {
             for ( int i = 0 ; i < nodes . Count ; i ++ )
             {
                 nodes [ i ]. Drag ( delta );
             }
         }
 
         GUI . changed = true ;
     }
接下来，从所选连接点绘制贝塞尔到鼠标位置。 通过绘制这个贝塞尔曲线，我们将让用户知道选择了哪个连接点以及它们的连接将如何。
NodeBasedEditor.cs
     private void OnGUI ()
     {
         DrawNodes ();
         DrawConnections ();
 
         DrawConnectionLine ( Event . current );
 
         ProcessNodeEvents ( Event . current );
         ProcessEvents ( Event . current );
 
         if ( GUI . changed ) Repaint ();
     }

     private void DrawConnectionLine ( Event e )
     {
         if ( selectedInPoint != null && selectedOutPoint == null )
         {
             Handles . DrawBezier (
                 selectedInPoint . rect . center ,
                 e . mousePosition ,
                 selectedInPoint . rect . center + Vector2 . left * 50f ,
                 e . mousePosition - Vector2 . left * 50f ,
                 Color . white ,
                 null ,
                 2f
             );
 
             GUI . changed = true ;
         }
 
         if ( selectedOutPoint != null && selectedInPoint == null )
         {
             Handles . DrawBezier (
                 selectedOutPoint . rect . center ,
                 e . mousePosition ,
                 selectedOutPoint . rect . center - Vector2 . left * 50f ,
                 e . mousePosition + Vector2 . left * 50f ,
                 Color . white ,
                 null ,
                 2f
             );
 
             GUI . changed = true ;
         }
     }

最后，绘制网格：
public class NodeBasedEditor : EditorWindow
{
     private List < Node > nodes ;
     private List < Connection > connections ;
 
     private GUIStyle nodeStyle ;
     private GUIStyle selectedNodeStyle ;
     private GUIStyle inPointStyle ;
     private GUIStyle outPointStyle ;
 
     private ConnectionPoint selectedInPoint ;
     private ConnectionPoint selectedOutPoint ;
 
     private Vector2 offset ;
     private Vector2 drag ;
 
     ...

     private void OnGUI ()
     {
         DrawGrid ( 20 , 0.2f , Color . gray );
         DrawGrid ( 100 , 0.4f , Color . gray );
 
         DrawNodes ();
         DrawConnections ();
 
         DrawConnectionLine ( Event . current );
 
         ProcessNodeEvents ( Event . current );
         ProcessEvents ( Event . current );
 
         if ( GUI . changed ) Repaint ();
     }
 
     private void DrawGrid ( float gridSpacing , float gridOpacity , Color gridColor )
     {
         int widthDivs = Mathf . CeilToInt ( position . width / gridSpacing );
         int heightDivs = Mathf . CeilToInt ( position . height / gridSpacing );
 
         Handles . BeginGUI ();
         Handles . color = new Color ( gridColor . r , gridColor . g , gridColor . b , gridOpacity );
 
         offset += drag * 0.5f ;
         Vector3 newOffset = new Vector3 ( offset . x % gridSpacing , offset . y % gridSpacing , 0 );
 
         for ( int i = 0 ; i < widthDivs ; i ++ )
         {
             Handles . DrawLine ( new Vector3 ( gridSpacing * i , - gridSpacing , 0 ) + newOffset , new Vector3 ( gridSpacing * i , position . height , 0f ) + newOffset );
         }
 
         for ( int j = 0 ; j < heightDivs ; j ++ )
         {
             Handles . DrawLine ( new Vector3 ( - gridSpacing , gridSpacing * j , 0 ) + newOffset , new Vector3 ( position . width , gridSpacing * j , 0f ) + newOffset );
         }
 
         Handles . color = Color . white ;
         Handles . EndGUI ();
     }

结论
结束。 您可以开发它并创建自己的自定义节点编辑器。 这是我在制作原型时编写的任务编辑器：

和往常一样，下面是完整的脚本。 直到下一次。
using UnityEngine;
using UnityEditor;
using System.Collections.Generic;

public class NodeBasedEditor : EditorWindow
{
private List<Node> nodes;
private List<Connection> connections;

private GUIStyle nodeStyle;
private GUIStyle selectedNodeStyle;
private GUIStyle inPointStyle;
private GUIStyle outPointStyle;

private ConnectionPoint selectedInPoint;
private ConnectionPoint selectedOutPoint;

private Vector2 offset;
private Vector2 drag;

[MenuItem("Window/Node Based Editor")]
private static void OpenWindow()
{
NodeBasedEditor window = GetWindow<NodeBasedEditor>();
window.titleContent = new GUIContent("Node Based Editor");
}

private void OnEnable()
{
nodeStyle = new GUIStyle();
nodeStyle.normal.background = EditorGUIUtility.Load("builtin skins/darkskin/images/node1.png") as Texture2D;
nodeStyle.border = new RectOffset(12, 12, 12, 12);

selectedNodeStyle = new GUIStyle();
selectedNodeStyle.normal.background = EditorGUIUtility.Load("builtin skins/darkskin/images/node1 on.png") as Texture2D;
selectedNodeStyle.border = new RectOffset(12, 12, 12, 12);

inPointStyle = new GUIStyle();
inPointStyle.normal.background = EditorGUIUtility.Load("builtin skins/darkskin/images/btn left.png") as Texture2D;
inPointStyle.active.background = EditorGUIUtility.Load("builtin skins/darkskin/images/btn left on.png") as Texture2D;
inPointStyle.border = new RectOffset(4, 4, 12, 12);

outPointStyle = new GUIStyle();
outPointStyle.normal.background = EditorGUIUtility.Load("builtin skins/darkskin/images/btn right.png") as Texture2D;
outPointStyle.active.background = EditorGUIUtility.Load("builtin skins/darkskin/images/btn right on.png") as Texture2D;
outPointStyle.border = new RectOffset(4, 4, 12, 12);
}

private void OnGUI()
{
DrawGrid(20, 0.2f, Color.gray);
DrawGrid(100, 0.4f, Color.gray);

DrawNodes();
DrawConnections();

DrawConnectionLine(Event.current);

ProcessNodeEvents(Event.current);
ProcessEvents(Event.current);

if (GUI.changed) Repaint();
}

private void DrawGrid(float gridSpacing, float gridOpacity, Color gridColor)
{
int widthDivs = Mathf.CeilToInt(position.width / gridSpacing);
int heightDivs = Mathf.CeilToInt(position.height / gridSpacing);

Handles.BeginGUI();
Handles.color = new Color(gridColor.r, gridColor.g, gridColor.b, gridOpacity);

offset += drag * 0.5f;
Vector3 newOffset = new Vector3(offset.x % gridSpacing, offset.y % gridSpacing, 0);

for (int i = 0; i < widthDivs; i++)
{
Handles.DrawLine(new Vector3(gridSpacing * i, -gridSpacing, 0) + newOffset, new Vector3(gridSpacing * i, position.height, 0f) + newOffset);
}

for (int j = 0; j < heightDivs; j++)
{
Handles.DrawLine(new Vector3(-gridSpacing, gridSpacing * j, 0) + newOffset, new Vector3(position.width, gridSpacing * j, 0f) + newOffset);
}

Handles.color = Color.white;
Handles.EndGUI();
}

private void DrawNodes()
{
if (nodes != null)
{
for (int i = 0; i < nodes.Count; i++)
{
nodes[i].Draw();
}
}
}

private void DrawConnections()
{
if (connections != null)
{
for (int i = 0; i < connections.Count; i++)
{
connections[i].Draw();
}
}
}

private void ProcessEvents(Event e)
{
drag = Vector2.zero;

switch (e.type)
{
case EventType.MouseDown:
if (e.button == 0)
{
ClearConnectionSelection();
}

if (e.button == 1)
{
ProcessContextMenu(e.mousePosition);
}
break;

case EventType.MouseDrag:
if (e.button == 0)
{
OnDrag(e.delta);
}
break;
}
}

private void ProcessNodeEvents(Event e)
{
if (nodes != null)
{
for (int i = nodes.Count - 1; i >= 0; i--)
{
bool guiChanged = nodes[i].ProcessEvents(e);

if (guiChanged)
{
GUI.changed = true;
}
}
}
}

private void DrawConnectionLine(Event e)
{
if (selectedInPoint != null && selectedOutPoint == null)
{
Handles.DrawBezier(
selectedInPoint.rect.center,
e.mousePosition,
selectedInPoint.rect.center + Vector2.left * 50f,
e.mousePosition - Vector2.left * 50f,
Color.white,
null,
2f
);

GUI.changed = true;
}

if (selectedOutPoint != null && selectedInPoint == null)
{
Handles.DrawBezier(
selectedOutPoint.rect.center,
e.mousePosition,
selectedOutPoint.rect.center - Vector2.left * 50f,
e.mousePosition + Vector2.left * 50f,
Color.white,
null,
2f
);

GUI.changed = true;
}
}

private void ProcessContextMenu(Vector2 mousePosition)
{
GenericMenu genericMenu = new GenericMenu();
genericMenu.AddItem(new GUIContent("Add node"), false, () => OnClickAddNode(mousePosition));
genericMenu.ShowAsContext();
}

private void OnDrag(Vector2 delta)
{
drag = delta;

if (nodes != null)
{
for (int i = 0; i < nodes.Count; i++)
{
nodes[i].Drag(delta);
}
}

GUI.changed = true;
}

private void OnClickAddNode(Vector2 mousePosition)
{
if (nodes == null)
{
nodes = new List<Node>();
}

nodes.Add(new Node(mousePosition, 200, 50, nodeStyle, selectedNodeStyle, inPointStyle, outPointStyle, OnClickInPoint, OnClickOutPoint, OnClickRemoveNode));
}

private void OnClickInPoint(ConnectionPoint inPoint)
{
selectedInPoint = inPoint;

if (selectedOutPoint != null)
{
if (selectedOutPoint.node != selectedInPoint.node)
{
CreateConnection();
ClearConnectionSelection();
}
else
{
ClearConnectionSelection();
}
}
}

private void OnClickOutPoint(ConnectionPoint outPoint)
{
selectedOutPoint = outPoint;

if (selectedInPoint != null)
{
if (selectedOutPoint.node != selectedInPoint.node)
{
CreateConnection();
ClearConnectionSelection();
}
else
{
ClearConnectionSelection();
}
}
}

private void OnClickRemoveNode(Node node)
{
if (connections != null)
{
List<Connection> connectionsToRemove = new List<Connection>();

for (int i = 0; i < connections.Count; i++)
{
if (connections[i].inPoint == node.inPoint || connections[i].outPoint == node.outPoint)
{
connectionsToRemove.Add(connections[i]);
}
}

for (int i = 0; i < connectionsToRemove.Count; i++)
{
connections.Remove(connectionsToRemove[i]);
}

connectionsToRemove = null;
}

nodes.Remove(node);
}

private void OnClickRemoveConnection(Connection connection)
{
connections.Remove(connection);
}

private void CreateConnection()
{
if (connections == null)
{
connections = new List<Connection>();
}

connections.Add(new Connection(selectedInPoint, selectedOutPoint, OnClickRemoveConnection));
}

private void ClearConnectionSelection()
{
selectedInPoint = null;
selectedOutPoint = null;
}
}

using System;
using UnityEditor;
using UnityEngine;

public class Node
{
public Rect rect;
public string title;
public bool isDragged;
public bool isSelected;

public ConnectionPoint inPoint;
public ConnectionPoint outPoint;

public GUIStyle style;
public GUIStyle defaultNodeStyle;
public GUIStyle selectedNodeStyle;

public Action<Node> OnRemoveNode;

public Node(Vector2 position, float width, float height, GUIStyle nodeStyle, GUIStyle selectedStyle, GUIStyle inPointStyle, GUIStyle outPointStyle, Action<ConnectionPoint> OnClickInPoint, Action<ConnectionPoint> OnClickOutPoint, Action<Node> OnClickRemoveNode)
{
rect = new Rect(position.x, position.y, width, height);
style = nodeStyle;
inPoint = new ConnectionPoint(this, ConnectionPointType.In, inPointStyle, OnClickInPoint);
outPoint = new ConnectionPoint(this, ConnectionPointType.Out, outPointStyle, OnClickOutPoint);
defaultNodeStyle = nodeStyle;
selectedNodeStyle = selectedStyle;
OnRemoveNode = OnClickRemoveNode;
}

public void Drag(Vector2 delta)
{
rect.position += delta;
}

public void Draw()
{
inPoint.Draw();
outPoint.Draw();
GUI.Box(rect, title, style);
}

public bool ProcessEvents(Event e)
{
switch (e.type)
{
case EventType.MouseDown:
if (e.button == 0)
{
if (rect.Contains(e.mousePosition))
{
isDragged = true;
GUI.changed = true;
isSelected = true;
style = selectedNodeStyle;
}
else
{
GUI.changed = true;
isSelected = false;
style = defaultNodeStyle;
}
}

if (e.button == 1 && isSelected && rect.Contains(e.mousePosition))
{
ProcessContextMenu();
e.Use();
}
break;

case EventType.MouseUp:
isDragged = false;
break;

case EventType.MouseDrag:
if (e.button == 0 && isDragged)
{
Drag(e.delta);
e.Use();
return true;
}
break;
}

return false;
}

private void ProcessContextMenu()
{
GenericMenu genericMenu = new GenericMenu();
genericMenu.AddItem(new GUIContent("Remove node"), false, OnClickRemoveNode);
genericMenu.ShowAsContext();
}

private void OnClickRemoveNode()
{
if (OnRemoveNode != null)
{
OnRemoveNode(this);
}
}
}

using System;
using UnityEditor;
using UnityEngine;

public class Connection
{
public ConnectionPoint inPoint;
public ConnectionPoint outPoint;
public Action<Connection> OnClickRemoveConnection;

public Connection(ConnectionPoint inPoint, ConnectionPoint outPoint, Action<Connection> OnClickRemoveConnection)
{
this.inPoint = inPoint;
this.outPoint = outPoint;
this.OnClickRemoveConnection = OnClickRemoveConnection;
}

public void Draw()
{
Handles.DrawBezier(
inPoint.rect.center,
outPoint.rect.center,
inPoint.rect.center + Vector2.left * 50f,
outPoint.rect.center - Vector2.left * 50f,
Color.white,
null,
2f
);

if (Handles.Button((inPoint.rect.center + outPoint.rect.center) * 0.5f, Quaternion.identity, 4, 8, Handles.RectangleCap))
{
if (OnClickRemoveConnection != null)
{
OnClickRemoveConnection(this);
}
}
}
}

using System;
using UnityEngine;

public enum ConnectionPointType { In, Out }

public class ConnectionPoint
{
public Rect rect;

public ConnectionPointType type;

public Node node;

public GUIStyle style;

public Action<ConnectionPoint> OnClickConnectionPoint;

public ConnectionPoint(Node node, ConnectionPointType type, GUIStyle style, Action<ConnectionPoint> OnClickConnectionPoint)
{
this.node = node;
this.type = type;
this.style = style;
this.OnClickConnectionPoint = OnClickConnectionPoint;
rect = new Rect(0, 0, 10f, 20f);
}

public void Draw()
{
rect.y = node.rect.y + (node.rect.height * 0.5f) - rect.height * 0.5f;

switch (type)
{
case ConnectionPointType.In:
rect.x = node.rect.x - rect.width + 8f;
break;

case ConnectionPointType.Out:
rect.x = node.rect.x + node.rect.width - 8f;
break;
}

if (GUI.Button(rect, "", style))
{
if (OnClickConnectionPoint != null)
{
OnClickConnectionPoint(this);
}
}
}
}

转载地址：http://qkla.baihongyu.com/

你可能感兴趣的文章
MySQL 创建新用户及授予权限的完整流程
查看>>
mysql 创建表，不能包含关键字values 以及 表id自增问题
查看>>
mysql 删除日志文件详解
查看>>
mysql 判断表字段是否存在，然后修改
查看>>
MySQL 到底能不能放到 Docker 里跑？
查看>>
mysql 前缀索引 命令_11 | Mysql怎么给字符串字段加索引？
查看>>
MySQL 加锁处理分析
查看>>
mysql 协议的退出命令包及解析
查看>>
mysql 参数 innodb_flush_log_at_trx_commit
查看>>
mysql 取表中分组之后最新一条数据 分组最新数据 分组取最新数据 分组数据 获取每个分类的最新数据
查看>>
MySQL 命令和内置函数
查看>>
MySQL 和 PostgreSQL，我到底选择哪个？
查看>>
mysql 四种存储引擎
查看>>
MySQL 在并发场景下的问题及解决思路
查看>>
MySQL 在控制台插入数据时,中文乱码问题的解决
查看>>
MySQL 基础架构
查看>>
MySQL 基础模块的面试题总结
查看>>
MySQL 处理插入重主键唯一键重复值办法
查看>>
MySQL 备份 Xtrabackup
查看>>
mysql 复杂查询_mysql中复杂查询
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2025-07-01 04:14:46   当前IP: 10.2.207.1   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2025 baihongyu.com 京ICP备2021015314号-2