【Godot4.3】GraphEdit全解析（1） - 基础介绍

巽星石

于 2024-09-22 14:22:03 发布

阅读量1.2k

点赞数 12

分类专栏： Godot4.0节点教程文章标签： godot gdscript 节点编程

本文链接：https://blog.csdn.net/graypigen1990/article/details/142436431

版权

Godot4.0节点教程专栏收录该内容

3 篇文章

订阅专栏

概述

最早系统性的讲述Godot的GraphEdit和GraphNode的教程应该是Hi小胡的了，也有小伙伴已经设计出一些插件或小应用用于辅助自己的项目。或者更直观的你可以去看看B站的Godot的Visual Shader教程。

我是学了好几次，学完就忘了用，本篇是基于Godot4.0正式版未出时自己的一篇笔记改造而来，CSDN上其实已经有小伙伴总结了很详细的使用方法，我这篇就算是个水分很大的个人笔记。

主要是一圈学下来，发现基于节点和连线的可视化编程还是有一定的可取之处的。在流程化方面，“图”形式比代码形式就是直观一。本篇就算是这个方向探索的第一篇。

继承体系

在Godot编辑器按F1打开搜索帮助对话框，搜索关键字graph，可以看到相关的类型和继承体系。

在这里插入图片描述

可以看到：

GraphEdit继承自Control，而GraphNode和新增的GraphFrame，继承自GraphElement，GraphElement再继承自Container，所以本质上GraphNode是一个容器

Slot

GraphNode下如果不存在控件子节点，则不会显示slot属性分组，一旦有直接的控件或容器子节点，则显示一对（左右各一个连接点）可用的slot。

以下面截图所示为例，GraphNode下有一个直接的控件子节点GridContainer，所以它只能拥有一对输入和输出的slot。

在这里插入图片描述

相反，你可以使用HBoxContainer来排版Label和LineEdit控件。这样你便可以开启两对插槽。

在这里插入图片描述

左右的连接点，可以分别设置启用、颜色、图表等。

在这里插入图片描述

通过设置left_type和right_type，貌似只有数字一致的端口，才可以互相连接。

保存GraphNode为子场景

GraphNode可以保存为单独的场景，然后实例化，这对设计多样复杂的节点类型提供了可能。

在这里插入图片描述

能存储为场景，自然也可以编写扩展自GraphNode的自定义类。

关闭节点

首先需要启用show_close属性，启用的节点会在右上角显示一个关闭图标。

在这里插入图片描述

为了实现关闭，需要链接节点的close_request信号。

在这里插入图片描述

最好是将GraphNode单独存储为一个场景，然后为其自身添加代码。

在这里插入图片描述

缩放节点

在这里插入图片描述

func _on_resize_request(new_minsize):
	size = new_minsize
	pass

连接节点

在这里插入图片描述

extends GraphEdit

func _on_connection_request(from_node, from_port, to_node, to_port):
	connect_node(from_node, from_port, to_node, to_port)
	pass

在这里插入图片描述

通过设置left_type和right_type，貌似只有数字一致的端口，才可以连接。

因为默认的左右端口type都是0，所以才会出现像上面这样的混乱连接形式。

在这里插入图片描述

通过设定左右端口的type数字，可以实现连接的限制。

断开连接

通过开启GraphEdit的right_disconnects可以向右拖动连接线，取消两个节点间的连接。

在这里插入图片描述

简单应用实例

基于TextEdit创建一个带多行文本框的节点。

在这里插入图片描述

添加多个节点实例：

运行后进行顺序连接：

代码如下：

extends VBoxContainer

@onready var graph_edit = $GraphEdit


func _on_button_pressed():
	var list  = graph_edit.get_connection_list()
	var str_arr:PackedStringArray = []
	for i in range(list.size()):
		var from_txt = graph_edit.get_node(str(list[i].from)).get_node("TextEdit").text
		var to_txt = graph_edit.get_node(str(list[i].to)).get_node("TextEdit").text
		str_arr.append(from_txt)
		if i == list.size() - 1:str_arr.append(to_txt)
	
	print("\n".join(str_arr))
	pass

其中：

get_connection_list()返回一个 Array[Dictionary]，每个字典存储两个节点和端口之间的连接，形式如下：

{ from_port: 0, from_node: "GraphNode name 0", to_port: 1, to_node: "GraphNode name 1" }

我们可以基于这些连接信息，来进行一些处理或者获得一些结果。

输出：

哈哈哈
你好

总结

GraphNode是一种特殊的Container，自动竖向排列子节点，并为其每个直接子节点，创建一个所谓插槽的概念，并显示左右两个连接点
连接点的type是一个整数，只有type数值相同的点才能互相连接
单个的GraphNode可以另存为场景，通过场景实例化的形式添加，这样可以很好的进行节点的单独设计
通过获取连接信息我们可以处理逻辑，产出结果