IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 游戏开发 -> Unity的GraphView -> 正文阅读

[游戏开发]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),如下图所示:
在这里插入图片描述

相关代码如下:

// =========== 在GraphViewWindow类的OnEnable函数里 ============

//  相关内容涉及到菜单设置,所以应该放到DialogueGraphWindow类下
// 这个Toolbar类在UnityEditor.UIElements下
Toolbar toolbar = new Toolbar();
//创建lambda函数,代表点击按钮后发生的函数调用
Button btn = new Button(clickEvent: () => { _graphView.AddDialogueNode("Dialogue"); });
btn.text = "Add Dialogue Node";
toolbar.Add(btn);
rootVisualElement.Add(toolbar);

最后的效果就是下图这样了,点击按钮可以在EntryNode相同的地方创建新的Node,可以拖拽出来:
在这里插入图片描述

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端口:
在这里插入图片描述

相关的行为也可以分为两步:

  • 设计一个函数,这个函数的参数是Node,它会为Node添加一个Output port
  • 相关的GUI设计,当点击Node的title上的button时,调用第一步设计的函数

第一步,设计函数,代码如下:

// ============== DialogueGraphView类里 ==================
private void AddOutputPort(DialogueNode node)
{
    var outPort = GenPortForNode(node, Direction.Output);

    // 根据node的outport的数目给新的outport命名
    var count = node.outputContainer.Query("connector").ToList().Count;
    string name = $"Output {count}";
    outPort.portName = name;
    node.outputContainer.Add(outPort);
    node.RefreshExpandedState();
    node.RefreshPorts();
}

第二步,实现对应的GUI部分,相关的代码可以直接放到Node的创建函数里,代码如下:

// ================= DialogueGraphView类 ==============
private DialogueNode GenDialogueNode(string nodeName)
{
    // 1. 创建Node
	...

    // 2. 为其创建InputPort
	...

    // 3. 为其在title上创建btn, 点击btn时会调用函数
    Button btn = new Button(() => 
    {
        AddOutputPort(node);
    });
    btn.text = "Add Output Port";
    node.titleContainer.Add(btn);

    return node;
}

这样就能实现前面图里面贴出来的效果了


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

相关.uss文件内容如下

.pinnedElement {
    position:absolute;
    border-left-width: 1px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-radius: 5px;
    flex-direction: column;
    background-color: #4b1b6b;
    border-color: #191919;
    min-width: 100px;
    min-height: 100px;
}

.pinnedElement.scrollable {
    position: absolute;
}

.pinnedElement:selected {
    border-color: #44C0FF;
}

.pinnedElement > .mainContainer {
    flex-direction: column;
    align-items: stretch;
}

.pinnedElement.scrollable > .mainContainer {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

.pinnedElement > .mainContainer > #content {
    flex-direction: column;
    align-items: stretch;
}

.pinnedElement.scrollable > .mainContainer > #content {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    flex-direction: column;
    align-items: stretch;
}

.pinnedElement > .mainContainer > #content > ScrollView {
    flex: 1 0 0;
}

.pinnedElement > .mainContainer > #content > #contentContainer {
    min-height: 50px;
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 6px;
    flex-direction: column;
    align-items: stretch;
}

.pinnedElement > .mainContainer > #content > #header {
    flex-direction: row;
    align-items: stretch;
    background-color: #393939;
    border-bottom-width: 1px;
    border-color: #212121;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    padding-left: 1px;
    padding-top: 4px;
    padding-bottom: 2px;
}

.pinnedElement > .mainContainer > #content > #header > #labelContainer {
    flex: 1 0 0;
    flex-direction: column;
    align-items: stretch;
}

.pinnedElement > .mainContainer > #content > #header > #addButton {
    align-self:center;
    font-size: 20px;
    background-image: none;
    padding-left: 0px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;

    margin-top:3px;
    margin-bottom:3px;
    margin-left:4px;
    margin-right:4px;
    border-left-width:6px;
    border-top-width:4px;
    border-right-width:6px;
    border-bottom-width:4px;
}

.pinnedElement > .mainContainer > #content > #header > #addButton:hover {
    background-image: resource("Builtin Skins/DarkSkin/Images/btn.png");
}

.pinnedElement > .mainContainer > #content > #header > #addButton:hover:active {
    background-image: resource("Builtin Skins/DarkSkin/Images/btn act.png");
}

.pinnedElement > .mainContainer > #content > #header > #labelContainer > #titleLabel {
    font-size : 14px;
    color: #c1c1c1;
}

.pinnedElement > .mainContainer > #content > #header > #labelContainer > #subTitleLabel {
    font-size: 11px;
    color: #606060;
}


改变节点端口的颜色

本来想改变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);
  游戏开发 最新文章
6、英飞凌-AURIX-TC3XX: PWM实验之使用 GT
泛型自动装箱
CubeMax添加Rtthread操作系统 组件STM32F10
python多线程编程:如何优雅地关闭线程
数据类型隐式转换导致的阻塞
WebAPi实现多文件上传,并附带参数
from origin ‘null‘ has been blocked by
UE4 蓝图调用C++函数(附带项目工程)
Unity学习笔记(一)结构体的简单理解与应用
【Memory As a Programming Concept in C a
上一篇文章      下一篇文章      查看所有文章
加:2022-03-06 13:29:43  更:2022-03-06 13:30:28 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/27 16:52:57-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码