企业官网建设流程全解析

1. 项目概述与核心思路

最近在捣鼓Godot引擎，想做一个可视化编程或者节点式逻辑编辑的小工具。很多朋友可能用过UE的蓝图或者Unity的Bolt，但在Godot里，官方提供了一个非常强大的原生组件：GraphEdit和GraphNode。直接用它们来搭一个简单的整数加法计算器，听起来好像有点“杀鸡用牛刀”，但这恰恰是理解这套系统底层逻辑和灵活性的绝佳切入点。这个项目不是为了做一个计算器，而是通过“整数加法”这个最简单的功能，彻底搞明白如何在Godot里创建、连接、管理自定义的节点图，并让它们真正“跑”起来。无论你是想给自己的游戏做技能树编辑器、对话树系统，还是更复杂的可视化脚本工具，这个基础都至关重要。

简单来说，我们要做的是：在GraphEdit画布上，放置两种自定义的GraphNode。一种叫“整数常量节点”，用来输入数字；另一种叫“加法运算节点”，用来执行计算。然后，用连接线把“常量节点”的输出端口，连接到“加法节点”的输入端口。最后，当连接关系建立后，加法节点能实时计算出结果并显示出来。整个过程，我们会深入到信号处理、数据流、节点自定义UI和动态端口管理这些核心环节。下面，我就把从零搭建这个系统的每一步拆开，揉碎了讲给你听。

2. 环境准备与项目初始化

2.1 创建Godot项目与主场景

启动Godot 4.x（建议使用稳定版本，如4.2.1），创建一个新项目，渲染器根据自己喜好选择Forward+或Mobile均可，对这个demo没影响。项目创建好后，我们首先需要建立一个主场景。

1. 创建主场景：在场景面板中，点击“其他节点”按钮，搜索并添加一个Control节点作为根节点，重命名为Main。选择Control节点是因为GraphEdit本身是Control的子类，便于我们进行UI布局。
2. 添加GraphEdit：在Main节点下，添加一个GraphEdit节点。将其锚点设置为“全范围”，这样它会铺满整个窗口。暂时不需要修改其他属性。
3. 保存场景：将场景保存为main.tscn。

现在，你的场景树应该看起来像这样：

Main (Control) └── GraphEdit

注意：GraphEdit是画布容器，负责管理节点的拖拽、框选、缩放和连接线的绘制。它本身不包含业务逻辑，逻辑都在我们自定义的GraphNode里。

2.2 理解GraphEdit的基础配置

虽然我们现在不需要复杂配置，但了解几个关键属性对后续调试有帮助：

• Zoom：画布的缩放级别。你可以通过鼠标滚轮调整，也可以在代码中控制。
• Show Grid和Snapping：是否显示网格和启用吸附。对于需要对齐的编辑器，开启它们会很方便。
• Right Disconnects：默认为false。如果设置为true，那么通过右键点击连接线可以断开连接，这是一个很实用的功能，我们稍后会用到。

我们的核心工作不是配置GraphEdit，而是创建两种能被它识别和管理的自定义节点。

3. 自定义GraphNode：整数常量节点

GraphNode是可任意定制内容的容器。我们的第一个节点是“整数常量节点”，它需要有一个显示数字的标签，一个可以调整数字的微调器（SpinBox），以及一个输出端口。

3.1 创建场景与基础结构

1. 在场景面板中，新建一个场景，选择“其他节点”，搜索并添加GraphNode作为根节点，重命名为IntegerConstantNode。
2. 选中IntegerConstantNode，在检查器面板中，将Title属性修改为“整数常量”。这个标题会显示在节点的顶部栏。
3. 为了有好的视觉效果，我们可以设置一下节点的最小尺寸。在检查器里找到Custom Minimum Size，将其设置为Vector2(150, 80)。这样节点看起来不会太局促。

3.2 设计节点内部UI

现在，我们需要在GraphNode内部添加控件。

1. 在IntegerConstantNode下添加一个VBoxContainer（垂直盒子容器），重命名为Contents。它将帮助我们垂直排列控件。
2. 在Contents下添加一个Label节点，重命名为ValueLabel。我们用它来显示“值：”的文本。
3. 在Contents下添加一个SpinBox节点，重命名为ValueSpinBox。SpinBox是Godot中用于输入整数的完美控件。
4. 配置SpinBox：选中ValueSpinBox，在检查器中：
   • 将Min Value设为-99999，Max Value设为99999，Step设为1。这定义了输入范围。
   • 将Value设为0，作为默认值。
   • 勾选Editable，确保用户可以输入。
   • 你可以调整Custom Minimum Size的x分量，让输入框宽一些，比如Vector2(120, 20)。

你的节点场景树现在应该是：

IntegerConstantNode (GraphNode) └── Contents (VBoxContainer) ├── ValueLabel (Label) └── ValueSpinBox (SpinBox)

3.3 添加输出端口并编写脚本

GraphNode的连接端口是其灵魂。端口有方向（输入/输出）和类型。

1. 添加输出端口：选中根节点IntegerConstantNode，在检查器面板中找到Slot属性。点击“添加元素”。

   • 将Slot的第一个元素（索引0）的Enable Left Port设为false（我们不需要左侧输入）。
   • 将Enable Right Port设为true（我们需要右侧输出）。
   • Type Left和Type Right是端口的类型标识，用于连接兼容性检查。我们可以自定义类型。这里将Type Right设为1，代表“整数类型”。（你可以用任何正整数，但同一类型的端口才能相连）。

2. 附加脚本：选中IntegerConstantNode，点击检查器上方的“附加脚本”按钮，创建一个新脚本，命名为integer_constant_node.gd。

3. 编写脚本逻辑：这个脚本需要做几件事：

   • 获取UI控件的引用。
   • 当SpinBox的值改变时，更新节点内部存储的值，并可能发出一个信号通知其他节点“我的值变了”。
   • 提供一个方法，让其他节点（如加法节点）能来“获取”当前的值。

extends GraphNode # 导出变量，方便在编辑器中链接节点 @export var spin_box: SpinBox @export var value_label: Label # 节点当前持有的整数值 var current_value: int = 0 func _ready(): # 初始化标签显示 value_label.text = "值：%d" % current_value # 连接SpinBox值改变信号 if spin_box: spin_box.value_changed.connect(_on_spin_box_value_changed) # 当SpinBox值改变时的处理函数 func _on_spin_box_value_changed(new_value: float): # SpinBox的value是float，但我们存为int current_value = int(new_value) value_label.text = "值：%d" % current_value # 发出一个自定义信号，通知外部值已更新（可选，用于实时计算） # 这里我们先注释，等加法节点时再讨论 # value_updated.emit(current_value) # 一个公共方法，供其他节点获取本节点的值 func get_output_value() -> int: return current_value

4. 脚本与场景绑定：保存脚本后，回到场景视图。选中IntegerConstantNode，你应该能在检查器中看到Spin Box和Value Label两个导出属性。将场景中的ValueSpinBox节点拖到Spin Box属性上，将ValueLabel节点拖到Value Label属性上。完成绑定。

至此，一个能输出整数的常量节点就做好了。保存这个场景为integer_constant_node.tscn。

4. 自定义GraphNode：加法运算节点

加法节点更复杂一些。它需要两个输入端口，一个输出端口。它要监听输入端口连接的变化，并从连接的常量节点获取值，进行计算。

4.1 创建场景与UI

1. 新建场景，根节点为GraphNode，重命名为AddNode，标题设为“加法”。
2. 设置Custom Minimum Size为Vector2(180, 120)。
3. 添加一个VBoxContainer，重命名为Contents。
4. 在Contents下添加一个HBoxContainer（水平盒子），重命名为InputA。
   • 在InputA下添加一个Label，文本设为“A:”。
   • 在InputA下添加一个LineEdit，重命名为InputValueA，将其Editable设为false。这个LineEdit不是用来输入的，而是用来显示从上游节点获取的值。
5. 复制InputA这个HBoxContainer（包括其子项），粘贴到Contents下，重命名为InputB。将其中的Label文本改为“B:”，LineEdit重命名为InputValueB。
6. 在Contents下添加一个Label节点，重命名为ResultLabel，文本设为“结果：--”。

场景树如下：

AddNode (GraphNode) └── Contents (VBoxContainer) ├── InputA (HBoxContainer) │ ├── Label (文本“A:”) │ └── InputValueA (LineEdit) ├── InputB (HBoxContainer) │ ├── Label (文本“B:”) │ └── InputValueB (LineEdit) └── ResultLabel (Label)

4.2 配置输入输出端口

加法节点有两个输入，一个输出。

1. 选中AddNode，在检查器Slot属性中添加三个元素（点击三次“添加元素”）。
2. 配置第一个槽位（索引0）：
   • Enable Left Port:true
   • Type Left:1(与常量节点的输出类型匹配)
   • Enable Right Port:false
   • 这个槽位对应输入A。
3. 配置第二个槽位（索引1）：
   • Enable Left Port:true
   • Type Left:1
   • Enable Right Port:false
   • 这个槽位对应输入B。
4. 配置第三个槽位（索引2）：
   • Enable Left Port:false
   • Enable Right Port:true
   • Type Right:1(输出也是整数类型)
   • 这个槽位对应输出结果。

重要：GraphNode的Slot数组索引，决定了端口的从上到下的顺序。索引0是顶部的端口，索引1是第二个，以此类推。这个顺序必须和你UI布局（A在上，B在下）以及后续代码中的逻辑对应起来。

4.3 编写加法节点脚本

这是整个项目的核心逻辑所在。脚本需要处理端口的连接、断开事件，并从中获取数据。

1. 为AddNode附加新脚本，命名为add_node.gd。
2. 首先，定义我们需要用到的信号和变量。

extends GraphNode # 导出UI控件引用 @export var input_value_a: LineEdit @export var input_value_b: LineEdit @export var result_label: Label # 存储两个输入值 var input_a: int = 0 var input_b: int = 0 # 存储连接到输入端口的“源节点”引用 # 键是端口索引（0对应A，1对应B），值是对应的源节点 var connected_nodes: Dictionary = {} func _ready(): # 初始化显示 update_display()

3. 重写关键虚函数：GraphNode有几个重要的虚函数，用于响应GraphEdit的连接事件。

# 当有连接线连接到本节点时触发 func _on_connection_from_empty(to_port: int, release_position: Vector2): # 这个函数通常用于“从空处开始拖拽连接线”的场景，我们这里用不到，但可以留空或打印日志 print("Connection started from empty to port: ", to_port) # 当有连接线连接到本节点的某个端口时触发（连接建立） func _on_connection_request(from_node: StringName, from_port: int, to_port: int): # 这个函数非常重要！当其他节点试图连接到我时，会触发。 # from_node: 发起连接的源节点名称 # from_port: 源节点的输出端口索引 # to_port: 目标端口（即我的输入端口）索引 print("Connection request to me (", name, ") at port ", to_port, " from ", from_node, ":", from_port) # 我们需要告诉GraphEdit，允许这个连接。 # 通过get_parent()获取GraphEdit，然后调用其connect_node函数。 var graph_edit = get_parent() if graph_edit and graph_edit is GraphEdit: # 第四个参数是“允许连接”的标志，设为true graph_edit.connect_node(from_node, from_port, name, to_port) # 当连接线准备断开时触发（断开前） func _on_disconnection_request(from_node: StringName, from_port: int, to_port: int): # 当其他节点试图断开与我的连接时触发。 print("Disconnection request from me (", name, ") at port ", to_port, " from ", from_node, ":", from_port) var graph_edit = get_parent() if graph_edit and graph_edit is GraphEdit: # 告诉GraphEdit断开连接 graph_edit.disconnect_node(from_node, from_port, name, to_port)

4. 处理连接建立与断开后的逻辑：仅仅允许物理连接还不够，我们需要在连接真正建立或断开后，更新我们的数据。这通常通过GraphEdit的connection相关信号来完成，但更清晰的做法是在节点内自己监听。我们可以利用_enter_tree和_exit_tree的变体，或者使用一个自定义的更新函数，在连接变化后被调用。这里采用一个更直接的方法：在_process或使用定时器去检查连接状态。但更优雅的是，由主控GraphEdit在连接变化时通知所有节点更新。

   为了简化，我们修改思路：当连接建立后，加法节点主动去“拉取”一次数据；并提供一个公共方法，让上游节点在值改变时“推送”数据过来，或者让外部（如一个“计算”按钮）触发所有节点重新计算。

   我们先实现“拉取”逻辑。修改add_node.gd：

# 新增一个函数，用于从指定端口的连接中获取值 func update_input_from_port(port_index: int): var graph_edit = get_parent() if not graph_edit or not graph_edit is GraphEdit: return # 获取连接到本节点指定输入端口的连接信息 var connections = graph_edit.get_connection_list() for conn in connections: if conn["to"] == name and conn["to_port"] == port_index: # 找到了连接到我的端口的线 var from_node_name: StringName = conn["from"] var from_node_port: int = conn["from_port"] var from_node = graph_edit.get_node_or_null(NodePath(from_node_name)) if from_node and from_node.has_method("get_output_value"): # 假设源节点有get_output_value方法 var value = from_node.get_output_value() if port_index == 0: input_a = value if input_value_a: input_value_a.text = str(value) elif port_index == 1: input_b = value if input_value_b: input_value_b.text = str(value) # 获取到值后，重新计算 calculate_and_update_output() break # 每个输入端口只应有一个连接 # 计算并更新输出显示 func calculate_and_update_output(): var result = input_a + input_b if result_label: result_label.text = "结果：%d" % result # 这里可以添加逻辑，将结果提供给下游节点（如果下游节点有类似update_input的方法） # 例如：emit_signal("output_updated", result) # 更新所有输入的显示和计算 func update_all_inputs(): update_input_from_port(0) # 更新端口A update_input_from_port(1) # 更新端口B func update_display(): if input_value_a: input_value_a.text = str(input_a) if input_value_b: input_value_b.text = str(input_b) calculate_and_update_output()

5. 修改连接请求函数：在连接建立后，立即触发一次数据更新。

func _on_connection_request(from_node: StringName, from_port: int, to_port: int): var graph_edit = get_parent() if graph_edit and graph_edit is GraphEdit: graph_edit.connect_node(from_node, from_port, name, to_port) # 连接成功后，更新该端口对应的输入值 update_input_from_port(to_port)

6. 处理断开连接：当连接断开时，需要清空对应的输入值和显示。

func _on_disconnection_request(from_node: StringName, from_port: int, to_port: int): var graph_edit = get_parent() if graph_edit and graph_edit is GraphEdit: graph_edit.disconnect_node(from_node, from_port, name, to_port) # 断开后，清空该端口的输入 if to_port == 0: input_a = 0 if input_value_a: input_value_a.text = "" elif to_port == 1: input_b = 0 if input_value_b: input_value_b.text = "" calculate_and_update_output()

7. 绑定UI控件：保存脚本，回到AddNode场景，将InputValueA、InputValueB和ResultLabel节点分别拖到脚本对应的导出属性上。

保存这个场景为add_node.tscn。

5. 整合到主场景并实现动态交互

现在我们有两种节点了，需要把它们放到GraphEdit中，并让整个系统联动起来。

5.1 修改主场景脚本

打开之前创建的main.tscn，选中根节点Main，为其附加一个新脚本，命名为main.gd。

extends Control # 导出对GraphEdit的引用，并预加载我们的自定义节点场景 @export var graph_edit: GraphEdit @onready var constant_node_scene = preload("res://integer_constant_node.tscn") @onready var add_node_scene = preload("res://add_node.tscn") func _ready(): if not graph_edit: graph_edit = $GraphEdit # 可选：设置一些GraphEdit的属性 graph_edit.right_disconnects = true # 允许右键断开连接 # 连接GraphEdit的信号，用于响应连接变化（这是实现全局联动的关键） graph_edit.connection_request.connect(_on_graph_edit_connection_request) graph_edit.disconnection_request.connect(_on_graph_edit_disconnection_request) graph_edit.connection_to_empty.connect(_on_graph_edit_connection_to_empty) graph_edit.connection_from_empty.connect(_on_graph_edit_connection_from_empty) # 初始时创建几个示例节点 spawn_initial_nodes() func spawn_initial_nodes(): # 创建两个常量节点 var const_node1 = constant_node_scene.instantiate() const_node1.name = "Const1" const_node1.position_offset = Vector2(100, 100) graph_edit.add_child(const_node1) var const_node2 = constant_node_scene.instantiate() const_node2.name = "Const2" const_node2.position_offset = Vector2(100, 250) graph_edit.add_child(const_node2) # 创建一个加法节点 var add_node1 = add_node_scene.instantiate() add_node1.name = "Add1" add_node1.position_offset = Vector2(400, 180) graph_edit.add_child(add_node1) # 处理连接请求（从某个节点到另一个节点） func _on_graph_edit_connection_request(from_node: StringName, from_port: int, to_node: StringName, to_port: int): # 这里可以进行连接有效性检查，例如类型匹配、防止循环连接等 print("Connection request from %s:%d to %s:%d" % [from_node, from_port, to_node, to_port]) # 检查类型是否匹配（简单示例） var from_node_obj = graph_edit.get_node_or_null(NodePath(from_node)) var to_node_obj = graph_edit.get_node_or_null(NodePath(to_node)) # 这里可以添加更复杂的类型检查逻辑... # 如果检查通过，建立连接 graph_edit.connect_node(from_node, from_port, to_node, to_port) # 连接建立后，强制目标节点更新一次输入 if to_node_obj and to_node_obj.has_method("update_input_from_port"): to_node_obj.update_input_from_port(to_port) # 处理断开请求 func _on_graph_edit_disconnection_request(from_node: StringName, from_port: int, to_node: StringName, to_port: int): print("Disconnection request from %s:%d to %s:%d" % [from_node, from_port, to_node, to_port]) graph_edit.disconnect_node(from_node, from_port, to_node, to_port) # 断开后，也通知目标节点更新 var to_node_obj = graph_edit.get_node_or_null(NodePath(to_node)) if to_node_obj and to_node_obj.has_method("update_input_from_port"): # 清空显示的逻辑已经在AddNode的_disconnection_request里了，这里可以不用重复 # 或者我们调用一个通用的“刷新”方法 pass # 以下两个函数可以用于实现“从空白处拖拽创建新连接”的高级功能，本例暂不实现 func _on_graph_edit_connection_to_empty(to_node: StringName, to_port: int, release_position: Vector2): print("Connection to empty from %s:%d" % [to_node, to_port]) func _on_graph_edit_connection_from_empty(from_node: StringName, from_port: int, release_position: Vector2): print("Connection from empty from %s:%d" % [from_node, from_port])

5.2 完善常量节点以支持“推送”更新

为了让加法节点在常量节点的值改变时能自动更新，我们需要修改常量节点，使其在值变化时通知所有连接到它的下游节点。

修改integer_constant_node.gd：

extends GraphNode # ... 之前已有的导出变量和current_value ... # 自定义信号，当值更新时发出 signal value_updated(new_value: int) func _ready(): value_label.text = "值：%d" % current_value if spin_box: spin_box.value_changed.connect(_on_spin_box_value_changed) func _on_spin_box_value_changed(new_value: float): current_value = int(new_value) value_label.text = "值：%d" % current_value # 发出值更新信号 value_updated.emit(current_value) # 尝试通知下游节点 notify_downstream_nodes() # 新增：通知所有连接到本节点输出端口的下游节点 func notify_downstream_nodes(): var graph_edit = get_parent() if not graph_edit or not graph_edit is GraphEdit: return var connections = graph_edit.get_connection_list() for conn in connections: if conn["from"] == name and conn["from_port"] == 0: # 我们的输出端口是0 var to_node_name: StringName = conn["to"] var to_node_port: int = conn["to_port"] var to_node = graph_edit.get_node_or_null(NodePath(to_node_name)) if to_node and to_node.has_method("update_input_from_port"): # 调用下游节点的更新方法，告诉它从哪个端口更新 to_node.update_input_from_port(to_node_port)

现在，当常量节点的数值改变时，它会遍历GraphEdit中的所有连接，找到从自己输出端口（端口0）出发的所有连接，并调用下游节点的update_input_from_port方法。下游的加法节点收到调用后，会重新从该端口拉取数据，从而实现了联动的实时计算。

5.3 绑定与测试

1. 回到main.tscn，选中Main节点，在检查器中将Graph Edit属性指向场景中的GraphEdit子节点。
2. 运行项目。你应该能看到画布上自动生成了两个常量节点和一个加法节点。
3. 连接节点：鼠标左键点击一个常量节点右侧的输出端口（那个小圆点），拖拽到加法节点左侧的输入端口（A或B），松开鼠标。连接线应该会出现。
4. 观察计算：连接成功后，加法节点对应的LineEdit会显示常量节点的当前值（默认为0），并且结果标签会显示两数之和（0+0=0）。
5. 改变输入：点击常量节点的SpinBox，修改数值。你会看到加法节点对应的输入显示和结果标签实时更新。
6. 断开连接：右键点击连接线（前提是right_disconnects = true），选择“断开连接”。加法节点对应的输入显示会被清空，结果变为另一个有效输入与0的和（或0）。
7. 测试两个输入：将另一个常量节点连接到加法节点的另一个输入端口，修改两个常量的值，观察结果是否正确变化。

6. 核心机制深度解析与优化

6.1 数据流模型：拉取 vs 推送

我们这个简单的例子实际上实现了一个混合模型。

• 拉取 (Pull): 加法节点在连接建立或收到通知时，主动调用上游节点的get_output_value()方法来获取数据。这是由下游节点发起的。
• 推送 (Push): 常量节点在自身值改变时，主动遍历连接并调用下游节点的更新方法。这是由上游节点发起的。

在更复杂的系统中，你需要选择一种主要模型：

• 纯拉取：适合计算不频繁、依赖关系明确的场景。由最终需要结果的节点（或一个调度器）触发整个图的“计算”，每个节点按依赖关系向上游拉取数据。优点是逻辑清晰，避免不必要的计算。
• 纯推送：适合需要实时响应、数据驱动变化的场景。任何节点的变化都像多米诺骨牌一样向下游传播。优点是响应快，但可能导致大量级联计算，需要小心处理循环依赖。

我们的混合模型是一个不错的折中：上游变化时推送通知，下游收到通知后拉取具体数据。这避免了上游节点需要知道下游节点具体需要什么数据。

6.2 端口类型与连接验证

我们只用了类型1来表示整数。在真正的编辑器中，你会有多种类型（整数、浮点数、布尔值、字符串、对象引用等）。GraphEdit的端口连接机制内置了类型检查：只有Type Left和Type Right相等的端口才能连接。

你可以定义一套自己的类型枚举：

enum DataType { INTEGER = 1, FLOAT = 2, BOOLEAN = 3, STRING = 4, VECTOR2 = 5 }

然后在设置端口Type时使用这些枚举值。在_on_graph_edit_connection_request函数中，你可以加入更严格的逻辑，比如禁止整数连接到布尔值端口。

6.3 节点序列化与保存

一个可视化编辑器必须能保存和加载。GraphEdit本身不负责保存节点图和连接数据，这需要你自己实现。

保存逻辑：

1. 遍历GraphEdit的所有子节点，过滤出GraphNode。
2. 对于每个节点，保存其name、type（可通过场景文件名或自定义属性识别）、position_offset以及节点特有的数据（如常量节点的current_value）。
3. 获取GraphEdit的所有连接（graph_edit.get_connection_list()），保存为一个数组。
4. 将节点数组和连接数组组合成一个字典，用JSON.stringify()保存到文件。

加载逻辑：

1. 从文件读取JSON，解析出节点数据和连接数据。
2. 根据节点type实例化对应的场景。
3. 设置节点的name、position_offset和内部数据。
4. 将节点添加到GraphEdit。
5. 遍历连接数据，调用graph_edit.connect_node()恢复所有连接。

这是一个非常重要的功能，能让你的编辑器真正实用化。

6.4 性能与用户体验优化

• 批量更新：如果一张图有很多节点，一个上游节点的变化可能导致下游很长链路的重复计算。可以考虑引入“脏标记”机制，在一次更新周期（如_process）结束时，统一重新计算所有标记为“脏”的节点。
• 撤销/重做：Godot的EditorUndoRedoManager在编辑器插件中可用，但在独立运行时，你需要自己实现一个简单的命令模式来记录节点移动、连接、属性修改等操作。
• 节点布局算法：对于复杂的图，手动布局很麻烦。可以尝试实现自动布局算法（如力导向图），或者提供对齐、分布等排版工具。
• 自定义连接线样式：通过继承GraphEdit并重写_draw()方法，或者使用主题覆盖，可以自定义连接线的颜色、粗细、样式，例如用不同颜色代表不同的数据类型。

7. 常见问题与排查技巧实录

在实际实现过程中，你几乎一定会遇到下面这些问题。这里是我踩过坑后的总结。

7.1 连接线无法拖动或连接

• 检查端口是否启用：确认GraphNode的Slot属性中，对应索引的Enable Left Port或Enable Right Port已经勾选。
• 检查类型匹配：确保连接两端的端口Type（Type Left或Type Right）是相同的非零值。类型为0通常意味着“无类型”或“任意类型”，但明确设置类型有助于管理。
• 检查信号连接：GraphEdit的connection_request等信号是否已经正确连接到主脚本的函数上。没有这些信号处理，GraphEdit不知道如何处理你的连接操作。
• 节点是否在GraphEdit内：确保你的自定义GraphNode是GraphEdit节点的直接子节点。如果嵌套在其他容器里，GraphEdit可能无法正确识别和管理它们。

7.2 连接建立了，但数据不更新

• 检查更新触发路径：确认数据流的触发链路是完整的。是“推送”还是“拉取”？在我们的例子中，需要：
  1. 常量节点值改变 -> 发出value_updated信号并调用notify_downstream_nodes()。
  2. notify_downstream_nodes()需要能正确找到下游节点。打印graph_edit.get_connection_list()看看连接信息是否正确。
  3. 下游加法节点的update_input_from_port方法被调用。
  4. 在update_input_from_port中，能通过连接信息找到上游节点，并成功调用其get_output_value()。
• 打印调试：在关键函数（如notify_downstream_nodes、update_input_from_port）的开始添加print()语句，输出函数名和关键参数，观察执行流程。
• 检查方法名：确保调用的方法名完全一致，Godot是区分大小写的。get_output_value和get_Output_Value是不同的方法。

7.3 节点位置或状态保存后错乱

• 使用position_offset而非position：GraphNode在GraphEdit中的位置应通过position_offset属性来设置和获取。position是相对于其父节点的全局变换，可能包含缩放等你不希望保存的信息。
• 序列化时包含足够信息：保存节点时，除了位置，还要保存节点的类型标识符。加载时根据这个标识符来实例化正确的场景。不要只存节点名，因为实例化后的节点名可能重复。
• 在_ready之后恢复数据：加载节点、设置位置和恢复内部数据（如常量节点的值）的操作，最好在节点的_ready()回调完成之后进行。可以主控脚本在add_child()并等待一帧（用await get_tree().process_frame）后再设置数据。

7.4 如何处理多个输出端口或动态端口

我们的例子是固定端口。有些节点可能需要动态端口，比如一个“创建数组”节点，输出端口数量由输入参数决定。

• 动态修改Slot属性：你可以在运行时通过代码修改GraphNode的slot数组。增加或删除数组元素，然后调用update()或set_slot()（在Godot 3中常用，Godot 4的API略有不同，主要是直接操作属性）来刷新节点外观。
• 端口索引管理：动态端口的索引会变化，在保存连接和查找连接时需要格外小心。最好为每个端口定义一个唯一的标识符（如字符串ID），而不仅仅依赖整数索引。

7.5 实现更复杂的节点（分支、循环）

整数加法只是最基础的运算。要实现条件分支（if）、循环（for）等逻辑，你需要设计更复杂的节点内部状态和数据流。

• 执行流端口：除了数据端口，可以增加一种特殊的“执行流”端口（用另一种类型表示，比如类型100）。连接线表示程序执行的顺序。
• 节点内部状态机：一个“分支”节点可能需要根据输入的条件布尔值，决定执行流从哪个输出端口流出。这需要在节点内部维护一个小状态机，并在收到“执行”信号时进行判断和转发。
• 上下文数据：对于需要跨节点传递的数据（比如循环索引），可以设计一个“上下文”或“黑板”对象，随着执行流在节点间传递。

从简单的数据流图升级到可执行的视觉脚本系统，是一个巨大的跨越，但核心——基于GraphEdit和GraphNode的节点连接与管理——是完全相同的。把这个加法器的例子吃透，你就拿到了构建更复杂可视化工具的万能钥匙。