概述
最早系统性的讲述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
可以另存为场景,通过场景实例化的形式添加,这样可以很好的进行节点的单独设计 - 通过获取连接信息我们可以处理逻辑,产出结果