Unity的GraphView

参考链接：https://www.youtube.com/watch?v=7KHGH0fPL84&ab_channel=MertKirimgeri

GraphView介绍

Unity在2018.1的版本开始加入了一个节点绘制系统，类似于XNode，它不需要在Unity里安装任何Package或者像XNode一样添加任何脚本，只需要使用Unity的官方API即可。Unity里的Shader Graph，VFX Graph和Visual Scripting都是通过Graph View API实现的。这玩意儿适合做Unity的相关编辑器。

相关的API都在对应的命名空间下UnityEditor.Experimental.GraphView

PS: 这一块内容其实是Unity的UI Elements的子集，了解了UI Element，再来学Graph View会更容易上手

下面做一个Demo，在这个Demo里进行Graph View API的学习，这个例子利用GraphView API和Unity的UIElements创建了一个用于人物对话的节点编辑系统，有点类似于蓝图。

1. 创建GraphView和Node的底层类

下面会利用Graph View API创建一个dialogue node system，一个节点系统的图是由图本身和其内部的节点构成的，所以这里创建两个类，分别对应着UI图的类，和UI节点的类，每个类各自对应一个脚本，代码如下：

// 创建dialogue graph的底层类
public class DialogueGraphView: GraphView {
	// 在构造函数里，对GraphView进行一些初始的设置
    public DialogueGraphView() {
    	// 允许对Graph进行Zoom in/out
		SetupZoom(ContentZoomer.DefaultMinScale, ContentZoomer.DefaultMaxScale);
        // 允许拖拽Content
        this.AddManipulator(new ContentDragger());
        // 允许Selection里的内容
        this.AddManipulator(new SelectionDragger());
        // GraphView允许进行框选
        this.AddManipulator(new RectangleSelector());
    }
}
// 创建dialogue graph的底层节点类
public class DialogueNode : Node {
    public string GUID;
    public string Text;
    public bool Entry = false;
}

2. 创建空的Editor Window

在创建完GraphView和Node底层数据之后，要想把它们显示出来，到窗口上，则还需要一个EditorWindow，相关代码如下：

// 代表放置GraphView这个Canvas的EditorWindow
public class DialogueGraphWindow: EditorWindow {
	// 通过Menu即可打开对应window, 注意这种函数必须是static函数
	[MenuItem("Graph/Open Dialogue Graph View")]
	public static void OpenDialogueGraphWindow()
	{
		// 定义了创建并打开Window的方法
		var window = GetWindow<DialogueGraphWindow>();
		window.titleContent = new GUIContent( "Dialogue Graph");
	}
}

然后现在点击menu下的Graph->Open Dialogue Graph View，就可以打开一个空窗口了，如下图所示：
在这里插入图片描述

3. 将GraphView作为Canvas，展示到对应的EditorWindow里

目前这个Window实际上跟前面的GraphView和Node类没有任何关系，只是一个空窗口，下面可以在Window类里定义GraphView为其数据成员，然后在其OnEnter函数里，对GraphView进行创建和初始化等操作：

public class DialogueGraphWindow : EditorWindow
{
    private DialogueGraphView _graphView;

	...//原本的打开窗口的函数不变

    private void OnEnable() 
    {
        Debug.Log("New GraphView");
        _graphView = new DialogueGraphView
        {
            name = "Dialogue Graph"
        };

        // 让graphView铺满整个Editor窗口
        _graphView.StretchToParentSize();
        // 把它添加到EditorWindow的可视化Root元素下面
        rootVisualElement.Add(_graphView);
    }
    
    // 关闭窗口时销毁graphView
    private void OnDisable()
    {
        rootVisualElement.Remove(_graphView);
    }
}

// 再在GraphView的构造函数里, 做一些初始化的工作：
public DialogueGraphView() 
{
    // 允许对Graph进行Zoom in/out
    SetupZoom(ContentZoomer.DefaultMinScale, ContentZoomer.DefaultMaxScale);
    // 允许拖拽Content
    this.AddManipulator(new ContentDragger());
    // 允许拖拽Selection里的内容
    this.AddManipulator(new SelectionDragger());
    // GraphView允许进行框选
    this.AddManipulator(new RectangleSelector());
}

此时再打开Window，就能在里面展示GraphView了，由于在前面的GraphView的ctor里new了RectangleSelector，所以可以在里面进行框选操作，如下图所示：
在这里插入图片描述

4.创建初始节点，作为EntryPoint

前面在创建Window时，new出来对应的GraphView。接下来就是创建和展示里面的Nodes了，正常的操作应该是，一个GraphView有一个初始节点，剩下的节点都可以从该节点拖拽出来。所以，初始节点的创建可以放到GraphView的Ctor里进行，代码如下所示：

public class DialogueGraphView: GraphView
{
    public DialogueGraphView() 
    {
		...// Add Manipulator相关的代码

        // 1. 创建StartNode，并设置好其position
        var startNode = GenEntryPointNode();
        // 2. 把node加入到GraphView里
        AddElement(startNode);
        // 3. 给StartNode添加Output Port
        var port = GenPortForNode(startNode, Direction.Output);
        // 4. 给output改名
        port.portName = "Next";
        // 5. 加入到StartNode的outputContainer里
        startNode.outputContainer.Add(port);
    }
	
	// 比较简单，相当于new了一个Node
    private DialogueNode GenEntryPointNode() 
    {
        DialogueNode node = new DialogueNode
        {
            title = "START",
            GUID = Guid.NewGuid().ToString(),// 借助System的Guid生成方法
            Text = "ENTRYPOINT",
            Entry = true
        };
        node.SetPosition(new Rect(x: 100, y: 200, width: 100, height: 150));

        return node;
     }

    // 为节点n创建input port或者output port
    // Direction: 是一个简单的枚举，分为Input和Output两种
    private Port GenPortForNode(Node n, Direction portDir, Port.Capacity capacity = Port.Capacity.Single) 
    {
        // Orientation也是个简单的枚举，分为Horizontal和Vertical两种，port的数据类型是float
        return n.InstantiatePort(Orientation.Horizontal, portDir, capacity, typeof(float));
    }
}

此时再打开GraphView，就可以看到对应的StartNode了，如下图所示，Next可以往外拖出Edge，而且Start节点也可以四处拖拽：
在这里插入图片描述
仔细看一下，发现上面的Start的左边部分还是不大对劲，这是因为在为node添加port之后，需要调用对应的refresh函数来刷新layout，所以只需要在添加port之后加上refresh的代码即可：

...//创建startNode的相关操作
startNode.outputContainer.Add(port);
// 调用两个refresh函数
startNode.RefreshExpandedState();
startNode.RefreshPorts();

然后布局就会变成正常的样子了：
在这里插入图片描述

5. 添加菜单工具栏，点击工具栏可以添加更多的Node

为了实现新功能，需要做两件事情：

设计一个函数，函数可以产生一个Node，函数接收一个string，作为新的DialogueNode的Text
为GraphView添加工具栏，点击工具栏上的Add Node，即调用第一步创建的函数

第一步，写一个可以创建Node的函数，跟前面提到的GenEntryNode的方式类似，无非就是多一个Input的port，代码如下：

// ====================== 在DialogueGraphView类内 ==========================
public void AddDialogueNode(string nodeName)
{
    // 1. 创建Node
    DialogueNode node = new DialogueNode
    {
        title = nodeName,
        GUID = Guid.NewGuid().ToString(),
        Text = nodeName,
        Entry = false
    };
    node.SetPosition(new Rect(x: 100, y: 200, width: 100, height: 150));

    // 2. 为其创建InputPort
    var iport = GenPortForNode(node, Direction.Input, Port.Capacity.Multi);
    iport.portName = "input";
    node.inputContainer.Add(iport);
    node.RefreshExpandedState();
    node.RefreshPorts();
    
    AddElement(node);
}

第二步，创建用于添加Node的UI按钮，即Unity的Button对象，这里把button放到统一的一行里了(即toolbar)，如下图所示：
在这里插入图片描述

6. 让节点之间可以拖拽连接起来

目前的StartNode节点和创建的节点是不可以连接起来的，根据视频里说的，这是因为还没有对新创建的Node的Input Port作类型要求。

// StartNode的output接口是这么写的：
// 一个水平连线的输出接口，类型好像是float
var startP = n.InstantiatePort(Orientation.Horizontal, Direction.Output, Port.Capacity.Single, typeof(float));

// 而新添加的Node的input接口是这么写的：
var newNodeP = n.InstantiatePort(Orientation.Horizontal, Direction.Input, Port.Capacity.Multi, typeof(float));

要让节点之间可以连线，需要重载函数GetCompatiblePort，代码如下所示：

// =============== 在GraphView类里 =============
// 这个函数是在GraphView里定义的接口, Summary: Get all ports compatible with given port.
// 应该是返回StartPort里可以用于连接的接口
public virtual List<Port> GetCompatiblePorts(Port startPort, NodeAdapter nodeAdapter);

// =============== 在DialogueGraphView类里 =============
public override List<Port> GetCompatiblePorts(Port startPort, NodeAdapter adapter)
{
    List<Port> compatiblePorts = new List<Port>();

    // 继承的GraphView里有个Property：ports, 代表graph里所有的port
    ports.ForEach((port) =>
    {
        // 对每一个在graph里的port，进行判断，这里有两个规则：
        // 1. port不可以与自身相连
        // 2. 同一个节点的port之间不可以相连
        if (port != startPort && port.node != startPort.node)
        {
            compatiblePorts.Add(port);
        }
    });

    // 在我理解，这个函数就是把所有除了startNode里的port都收集起来，放到了List里
    // 所以这个函数能让StartNode的Output port与任何其他的Node的Input port相连（output port应该默认不能与output port相连吧）
    return compatiblePorts;
}

OK，现在就可以把StartNode跟其他的Node相连了，不过一个Output口目前好像只能连一个Node，如下图所示：
在这里插入图片描述

7. 为节点添加output port

一个节点其output port的数量应该是可以通过节点的GUI来调整的，预期是做出下图这样的情况，当点击Add Output时，会添加Output端口：
在这里插入图片描述

8. 为Graph添加背景的网格框架

为了更完善Graph窗口，这里介绍一种为其产生背景网格线的方法，如下图所示：

首先，在Editor文件夹下创建Resources文件夹，然后在Project View里选择右键，Create->UIElements->Editor Window，取消勾选C#和UXML，如下图所示：
在这里插入图片描述
文件里面写：

GridBackground {
    --grid-background-color: #282828;
    --line-color: rgba(193, 196, 192, 0.1);
    --thick-line-color: rgba(193, 196, 192, 0.1);
}

最后在创建对应的GrahView的Init阶段，读取该uss文件作为StyleSheet即可：

public DialogueGraphView() 
{
    // 不知道为啥没有起作用, 这里是s是读取到了东西的, 原因Remain
    StyleSheet s = Resources.Load<StyleSheet>("DialogueGraph");
    styleSheets.Add(s);
	...
}

9. 创建更多的菜单工具栏选项

对话节点编辑器的设计思路是这样的，在Unity的Window里进行创建和编辑，然后可以把它存储起来，在Runtime下给游戏去读取。当在Editor下点击该文件时，对应的GraphView也会蹦出来。

为了补充Save和Load功能，可以先把UI做好，这里设计了两个Button，用于点击Save和Load，又设计了一个TextField，用于指定存储的文件的名字。

之前只在菜单栏对应的toolbar里添加了一个button，代码如下：

// 在EditorWindow的继承类里这么写
Toolbar toolbar = new Toolbar();
Button btn = new Button(clickEvent: () => { _graphView.AddDialogueNode("Dialogue"); });
btn.text = "Add Dialogue Node";
toolbar.Add(btn);
rootVisualElement.Add(toolbar);

现在添加更多的选项，一种仍然是Button，另一种则是TextField，代码如下所示：

// 添加TextField
TextField fileNameTextField = new TextField(label: "File Name");
fileNameTextField.SetValueWithoutNotify(_fileName);// 类内私有成员_fileName = "New Narrative";
fileNameTextField.MarkDirtyRepaint();
fileNameTextField.RegisterValueChangedCallback(evt => _fileName = evt.newValue);
toolbar.Add(fileNameTextField);

// 添加两Button
// 不熟悉这种写法，text是Button的数据成员
// LodaData和SaveData两个函数暂时还没实现
toolbar.Add(new Button(() => SaveData()) { text = "Save Data" });
toolbar.Add(new Button(() => LoadData()) { text = "Load Data" });

之后的toolbar就会变成这样，多了三个元素，两个Button用于存储和读取数据，TextFiled用于指定文件路径：
在这里插入图片描述
然后就可以创建具体的底层代码了，从设计角度上，SaveData和LoadData没有必要放在DialogueGraphView类里，这里创建了一个GraphSaveUtility类，代码如下：

public class GraphSaveUtility
{
    private DialogueGraphView _dialogueGraphView;

    // 每次从类里获取edges和nodes时，都会去取graphView里的内容，并进行转型
    private List<Edge> edges => _dialogueGraphView.edges.ToList();
    private List<DialogueNode> nodes => _dialogueGraphView.nodes.ToList().Cast<DialogueNode>().ToList();

    public static GraphSaveUtility GetInstance(DialogueGraphView graphView)
    {
        return new GraphSaveUtility
        {
            _dialogueGraphView = graphView
        };
    }

    public void SaveData()
    {
    }

    public void LoadData()
    {
    }
}

为了实现SaveData和LoadData函数，先要实现相关的Runtime下的存储文件类，这里使用ScriptableObject作为存储DialogugGraph的存储数据文件：

// 感觉这个类跟之前创建的DialogueNode类非常类似
[Serializable]
public class DialogueNodeData
{
	public string nodeGUID;// 对应node的GUID
	public string nodeText;// 对应node的text
	public Vector2 position;
}

// 用于存储Node之间的连接关系, 在GraphView里是通过Port连接起来的,
// 存储的时候要额外创建一个NodeLink
[Serializable]
public class DialogueNodeLinkData
{
	public string baseNodeGuid;
	public string portName;
	public string targetNodeGuid;
}

// 这里贴一下之前创建的DialogueNode类, 方便前后比对
public class DialogueNode : Node {
    public string guid;
    public string text;
    public bool entry = false;
}

在创建好了Node和NodeLink对应的可序列化的数据结构后，就可以创建整个Graph对应的可序列化的数据结构了，代码如下所示：

[Serializable]
public class DialogueContainer : ScriptableObject
{
	// 创建两个List, 分别代表nodes和nodeLinks
	public List<DialogueNodeData> nodesData = new List<NodeData>();
	public List<DialogueNodeLinkData> nodeLinksData = new List<NodeLinkData>();
}

有了这些，就可以实现SaveData和LoadData函数了：

// Save函数的核心代码
public void SaveData(string filePath)
{
    if (!edges.Any())
        return;

    DialogueContainer container = ScriptableObject.CreateInstance<DialogueContainer>();

    // 遍历所有的Edge, 找到里面有Input的Edge, 组成一个数组
    Edge[] hasInputEdges = edges.Where(x => x.input.node != null).ToArray();
    // 注意, edge的Input在右边, Output在左边
    for (int i = 0; i < hasInputEdges.Length; i++)
    {
        Edge e = hasInputEdges[i];
        DialogueNode inputNode = e.input.node as DialogueNode;
        DialogueNode outputNode = e.output.node as DialogueNode;

        container.nodeLinksData.Add(new DialogueNodeLinkData()
        {
            // 注意，这里的nodeLink是以output作为开始点的
            // 这样才能保证从左到右的顺序
            baseNodeGuid = outputNode.GUID,
            portName = e.output.portName,
            targetNodeGuid = inputNode.GUID
        });
    }

    // 获取所有不为Entry的Node, 这样的Node既有input，也有output
    DialogueNode[] regularNodes = nodes.Where(x => (!x.Entry)).ToArray();
    for (int i = 0; i < regularNodes.Length; i++)
    {
        DialogueNode n = regularNodes[i];

        container.nodesData.Add(new DialogueNodeData()
        {
            nodeGuid = n.GUID,
            nodeText = n.Text,
            position = n.GetPosition().position
        });
    }

	// 注意这种写字符串的写法
    AssetDatabase.CreateAsset(container, $"Assets/Resources/{filePath}.asset");
    AssetDatabase.SaveAssets();
}

附录：一些例子里没提到的拓展操作

使用API将两个Node相连接

代码如下：

============== 在GraphView的派生类里实现 ===============
private void AddEdgeByPorts(Port _outputPort, Port _inputPort)
{
    Edge tempEdge = new Edge()
    {
        output = _outputPort,
        input = _inputPort
    };
    tempEdge.input.Connect(tempEdge);
    tempEdge.output.Connect(tempEdge);
    Add(tempEdge);
}

获取Node的InputPort和OutputPort

其实前面提到了，InputPort和OutputPort应该都在对应的Container里：

// 这种写法，我不太理解，也是对C#还不够了解
Port outP = outputNode.outputContainer[0].Q<Port>();
Port inP = rootPlayableNode.inputContainer[0].Q<Port>();

获取GraphViwe对应的窗口大小

GraphView里有一个参数叫Rect layout，可以用于表示Graph代表的窗口大小，layout一般是从0,0为Rect最小点，如果最大点为(500, 400)，说明整个窗口的大小是500pixel*400pixel

读写Graph里的Node的位置

这个应该很简单，前面其实提到了

// 注意，这里的Pos都是用Rect表示的，而不是Vector2
node.SetPosition(new Rect(x: 400, y: 200, width: 100, height: 150));
Rect pos = node.GetPosition();

改变Zoom缩放比例

有时Zoom In的时候觉得放的不够大，可以改这个函数：

// 原来是这么写的
// public static readonly float DefaultMinScale = 0.25f;
// public static readonly float DefaultMaxScale = 1;
SetupZoom(ContentZoomer.DefaultMinScale, ContentZoomer.DefaultMaxScale);// 实际上是(0.25f, 1)

// 后来可以这么写, 前面的数字越小, 可以缩小的比例越大, 后面的数字越大, 放大的倍数越多
SetupZoom(0.15f, 3.0f);

创建Comment Block(代码里叫做Group)

代码如下：

// 创建Comment Block
var group = new Group
{
    autoUpdateGeometry = true,
    title = "Comment Block\n 快乐吗\n 很快乐"
};
m_GraphView.AddElement(group);
group.SetPosition(new Rect(500, 20, 200, 100));

效果如图：
在这里插入图片描述

创建不随着整体窗口变化的固定位置的窗口(类似于Anchor UI)

这么写就可以了，这其实是UI Element的内容

// 类的数据成员
private Group m_FixedGroup;
...
// 创建Comment Block
m_FixedGroup = new InspectorGroup
{
    //autoUpdateGeometry = true,
    title = "Comment Block\n sss \n fff" +
    "\nfddddddddd" +
    "\nfdsafdsafdsa" +
    "\nfdsafdsa" +
    "\nfdsafdsa" +
    "dsafd"
};

// 可以改layer, 但是这里默认就比GraphView的优先级高，应该是深度递归的顺序导致
//m_FixedGroup.layer = int.MaxValue; 
m_FixedGroup.style.position = Position.Absolute;
m_FixedGroup.style.right = 0;
m_FixedGroup.style.top = 21;// 21是工具栏的高度
// 尤其注意这句话，是加到EditorWindow里
rootVisualElement.Add(m_FixedGroup);

// 我之前是把这个FixedGroup加到了GraphView的AddElement下面
// 结果在GraphView里进行Zomm的时候，不管怎么样都会带着m_FixedGroup变化
// 这样写就舒服了

最后效果如下：
在这里插入图片描述

创建自定义的Graph窗口

通过VisualElement的Layout可以更改位置，但是好像结果总是不大对，我看到项目里用.uss来进行布局和颜色的定义：
相关类的定义如下：

// 通过继承GraphElment创建自己的图中的Element
public class PinnedElementView : GraphElement
{
}

改变节点端口的颜色

本来想改变Edge的颜色的，但是它的颜色好像是两个端口的自动生成的渐变色

node.outputContainer[0].Q<Port>().portColor = Color.white;

改变节点的title的高度

对应在node.titlecontainer.style里：

node.titleContainer.style.height = 80;
node.titleContainer.style.unityTextAlign = TextAnchor.UpperCenter;

GraphView提供的Element类型

看了下，我知道的图形类，一共有这么些类型：

GraphView类
Node类
Edge类
Pill类：类似一个Capsule，可以放text、icon，两个可选的child VisualElement，如下图所示：
GraphElement
GraphViewBlackboardWindow
GraphViewEditorWindow
GraphViewMinimapWindow
GraphViewToolWindow
GridBackground
Group
IconBadge
MiniMap
Placemat
Stack
StickyNote(2020.1开始支持)
Token Node: 类似Capsule

额外注意，还有很多基本的UI Element可以用，都是好东西，比如：

Box
Label
Rect
Bounds
等等。。

添加ObjectField

也是UI Element的内容

var objField = new ObjectField
{
	objectType = typeof(GameObject),
	allowSceneObjects = false,
	value = prefabNode.output,
};

// 给Object添加预览图
var preview = new Image();
objField.RegisterValueChangedCallback(v => {
	prefabNode.output = objField.value as GameObject;
	UpdatePreviewImage(preview, objField.value);
});


void UpdatePreviewImage(Image image, Object obj)
{
	image.image = AssetPreview.GetAssetPreview(obj) ?? AssetPreview.GetMiniThumbnail(obj);
}

效果如下图所示：
在这里插入图片描述

清空GraphView里的nodes和edges

像这种写法是不行的：

// Node是class类型
List<Node> nodes = new List<Node>();
Node n = new Node();

m_GraphView.Add(n);
nodes.Add(n);

// 如果想要清空nodes
m_GraphView.DeleteElements(nodes); 错误的写法

虽然Node是引用类型，但是我看nodes和m_GraphView里的nodes不是同一份数据，所以得这么写：

// Node是class类型
List<Node> nodes = new List<Node>();
Node n = new Node();

m_GraphView.Add(n);
nodes.Add(n);

DeleteElements(nodes.ToList());
DeleteElements(edges.ToList());

m_Nodes.Clear();

代码实现按F的效果
在GraphView的窗口中，按F能合理的显示所有Node，这里的替代的函数为：

GraphView.FrameAll();

改变Edge颜色并强制更新

// Edge本身的颜色不可以直接更改，需要获取其两端的port, 对port的portColor进行修改

// 强迫更新：
Edge edge;//假设已有Edge
edge.UpdateEdgeControl();

Runtime改变Group字体的大小

应该是可以写uss调整的，但我这里找到了代码控制的方法，具体的Hierarchy信息我是通过UI Debugger看清楚的，相关代码如下：

// 方法一
Group group = new Group();
group.title = "A Group";
Stack<VisualElement> stack = new Stack<VisualElement>();
stack.Push(group.headerContainer);

// 在hierarchy里反复查找Label的物体
while (stack.Any())
{
    VisualElement ve = stack.Pop();
    Label label = ve as Label;
    if (label != null)
    {
        label.style.fontSize = 5;
        break;
    }

    var veList = ve.hierarchy.Children().ToList();
    foreach (var item in veList)
    {
        stack.Push(item);
    }
}

// 方法二, 先找到TemplateContainer, Label就是它的Children(层级关系是从UI Debugger里看到的)
List<VisualElement> list = group.headerContainer.hierarchy.Children().ToList();

TemplateContainer item = (TemplateContainer)group.headerContainer.hierarchy.Children().ToList().Find(x => x is TemplateContainer);

List<VisualElement> list = item.hierarchy.Children().ToList();
foreach (var itemsss in list)
{
    var ss = itemsss as Label;
    if (ss != null)
    {
        ss.style.fontSize = 5;
    }
}

高亮GraphView的节点

我发现选中Node时，它自然会显示会高亮的节点状态，所以Select Node，就可以将其高亮

一开始我这么写的：

MyGraphView.selection.Clear();
MyGraphView.selection.Add(MyNode);

发现这样写不对，其实GraphView有对应的API，应该这么写：

MyGraphView.ClearSelection();
MyGraphView.AddToSelection(MyNode);

posted @ 2022-12-03 13:07 弹吉他的小刘鸭阅读(1271) 评论(0) 编辑收藏举报

刷新页面返回顶部