1. 从“电网大亨”说起为什么我要做一套拓扑节点编辑器第一次看到“电网大亨”这个说法是在几个做独立游戏和仿真工具的朋友群里。有人发了一张截图画面里是一张密密麻麻的电网结构图节点、连线、负载、发电机、变电站全挤在一起配文是“这玩意儿要是能像搭积木一样拖来拖去就好了”。底下立刻有人接话“拓扑节点编辑器不就是干这个的”再往后聊话题就拐到了 UnrealHub 上——有人想用虚幻引擎做电网仿真可视化有人想做成游戏化的经营模拟还有人单纯想搞一个能实时看潮流分布的沙盘。这几个词凑在一起其实指向一个很具体的东西一套面向电网结构的可视化拓扑编辑工具。它要能让你像玩模拟经营游戏一样在画布上拖拽节点、连接线路、配置参数同时后台还要能算得动潮流、撑得住规模、看得见状态。说它是“电网大亨”是因为它确实带着一股经营模拟的味道——你在编辑器里搭出来的网架直接决定了后面仿真跑出来的结果好不好看、合不合理。我前后花了大概三个月时间用虚幻引擎做了一版原型中间踩了不少坑也攒了一些经验。这篇文章不打算写成产品说明书而是想把整个设计思路、关键技术点、实操步骤和踩坑记录摊开来聊。适合谁看如果你正在做电力仿真可视化、能源类沙盘、教学演示工具或者单纯对“用游戏引擎做专业工具”这件事感兴趣那这篇内容应该能给你省下不少试错时间。零基础也能看我会尽量把专业术语翻译成人话。2. 整体设计思路为什么是拓扑编辑器而不是一张静态图2.1 电网仿真的核心痛点结构一变全盘重来传统做电网仿真流程大概是这样的先在某个专业软件里画好单线图导出数据文件再丢进仿真程序里跑跑完把结果导出来最后用另一个工具做可视化。这套流程最大的问题在于割裂。你改一个节点位置、加一条线路整个数据链路就得重走一遍。如果是做教学演示或者方案对比这种割裂感会把人逼疯。拓扑节点编辑器要解决的就是这个“割裂”。它把建模、编辑、仿真、可视化四件事塞进同一个环境里。你在画布上拖一个节点出来后台的数据结构立刻更新你连一条线导纳矩阵马上重算你点一下“运行”潮流结果直接以颜色、粗细、动画的形式反馈回画布上。整个过程不需要导出导入不需要切换软件。注意这里说的“仿真”在原型阶段可以先用简化模型比如直流潮流或者线性化交流潮流不必一上来就搞完整的牛顿-拉夫逊法。先跑通流程再逐步加精度。2.2 为什么选虚幻引擎而不是 Web 或 Qt这个问题我被问过很多次。Web 方案比如 Three.js React上手快、部署方便Qt 方案在工业软件里更常见、控件成熟。但我最终选了虚幻引擎理由有三个第一大规模场景的渲染性能。电网拓扑动辄几百上千个节点每个节点还要带状态指示、标签、动画。Web 方案在节点数超过 500 之后帧率下降非常明显尤其是还要叠加潮流流动动画的时候。虚幻的实例化渲染和 Niagara 粒子系统在这方面优势很大我实测过 2000 个节点带流动动画帧率还能稳在 60 以上。第二交互手感。拓扑编辑器的核心体验是“拖拽”。虚幻的输入系统和物理射线检测做出来的拖拽手感比 Web 的鼠标事件要跟手得多。尤其是多选拖拽、框选、吸附对齐这些操作虚幻的 Gizmo 组件可以直接复用省了大量造轮子的时间。第三UnrealHub 的生态。UnrealHub 本身是一个基于虚幻引擎的协作平台支持多人同时编辑同一个场景。电网拓扑编辑天然适合多人协作——一个人画主网架一个人配参数一个人调可视化。虽然原型阶段我没把多人协作做完整但底层的数据同步机制是预留了的。当然虚幻也有代价。打包体积大、启动慢、对显卡有要求。如果你的目标用户是轻量级教学场景Web 方案可能更合适。但如果你要做的是“电网大亨”那种带经营模拟味道的东西虚幻的表现力是值得的。2.3 数据模型设计节点、边、属性三件事拓扑编辑器的数据模型其实很朴素就是图。节点Node代表母线、发电机、负荷、变电站边Edge代表线路、变压器、开关。每个节点和边都挂一组属性比如电压等级、阻抗、容量、当前状态。但朴素归朴素设计的时候有几个关键决策节点和边用 ID 管理不用指针。虚幻的 UObject 指针在序列化和网络同步时容易出问题用整数 ID 做索引所有引用都通过 ID 查表稳得多。属性用结构体 数据表。不同电压等级的线路参数模板不一样。我用 DataTable 存模板节点创建时选模板属性自动填充减少手工输入。拓扑关系单独存一份邻接表。虽然可以从边列表推导出来但潮流计算频繁查询邻接关系单独维护一份邻接表用空间换时间。// 节点结构体简化示例 USTRUCT(BlueprintType) struct FGridNode { GENERATED_BODY() UPROPERTY() int32 NodeId; UPROPERTY() FVector Position; UPROPERTY() ENodeType Type; // 母线、发电机、负荷 UPROPERTY() float VoltageLevel; UPROPERTY() TMapFString, float Parameters; };这套数据结构的好处是序列化简单。存盘就是存一个节点数组加一个边数组读盘就是重建邻接表。后面要做撤销重做也是基于这套结构做快照。3. 核心细节解析节点编辑、连线逻辑与参数配置3.1 节点拖拽与吸附手感是怎么调出来的拖拽看起来简单做起来全是细节。我一开始直接用鼠标位置更新节点坐标结果拖起来“飘”节点跟鼠标之间总有偏移。后来改成射线检测 平面投影从鼠标位置发一条射线和地面平面求交交点作为节点目标位置。这样拖拽平面和视觉平面一致手感立刻对了。吸附是第二个关键。电网拓扑有很强的对齐需求节点要按网格排线路要水平或垂直。我做了三级吸附网格吸附默认 50 单位一格拖拽时自动对齐。节点吸附靠近其他节点一定距离时自动吸附到对方位置方便做母线合并。角度吸附连线时按住 Shift角度锁定到 15 度倍数。实操心得吸附阈值不要设太大否则会“抢”用户的操作意图。我试过 30 单位阈值结果用户想微调位置时总被吸走后来降到 15 单位体验好很多。3.2 连线逻辑从“画一条线”到“建一个连接”连线不是画图是建立电气连接。所以连线的时候要判断这两个节点能不能连连上之后是什么设备参数怎么填我的做法是连线工具激活后鼠标悬停到节点上高亮点击起点再点击终点弹出一个设备类型选择框。选线路就填阻抗、容量选变压器就填变比、容量选开关就填初始状态。填完确认边才真正建立。这里有个坑自环和重复边。用户可能不小心把节点连到自己或者两个节点之间连了多条线。自环直接禁止重复边允许但给警告——因为实际电网里并联线路是存在的但需要用户确认。// 连线合法性检查简化逻辑 bool ValidateConnection(int32 FromId, int32 ToId) { if (FromId ToId) return false; // 禁止自环 if (EdgeExists(FromId, ToId)) { return ConfirmDuplicate(); // 重复边需确认 } return true; }3.3 参数配置面板别让用户填表填到崩溃电网设备的参数很多如果全部让用户手填效率极低。我的方案是模板 覆盖。每个设备类型有一套默认模板用户创建时选模板参数自动填充。如果某个参数需要改再单独覆盖。参数面板用虚幻的 Detail Panel 定制按电压等级分组常用参数放前面高级参数折叠。还加了单位换算和范围校验比如电压等级只允许 10、35、110、220 这些标准值填错了直接标红。设备类型必填参数选填参数默认模板线路阻抗、容量长度、型号110kV 架空线变压器变比、容量接线组别110/10kV发电机容量、电压爬坡率火电 300MW负荷功率功率因数工业负荷这张表看着简单但实际做的时候模板的粒度很关键。太粗了用户还是要填一堆太细了模板数量爆炸。我最后按“电压等级 设备类型”做模板大概 20 多个覆盖了大部分场景。4. 实操过程从零搭一个可运行的拓扑编辑器4.1 环境准备与项目初始化先说环境。我用的虚幻 5.3Visual Studio 2022Windows 11。UnrealHub 作为协作层原型阶段可以先不接但项目结构要预留接口。创建项目时选Blank C 项目不要选模板项目否则一堆用不上的资产拖慢编译。项目设置里关掉 Lumen 和 Nanite拓扑编辑器不需要那么重的渲染关掉之后帧率能提升 30% 左右。# 项目结构建议 GridEditor/ ├── Source/ │ ├── GridEditor/ │ │ ├── Core/ # 数据模型 │ │ ├── Editor/ # 编辑工具 │ │ ├── Simulation/ # 仿真计算 │ │ └── Visualization/ # 可视化 ├── Content/ │ ├── Materials/ # 节点和线路材质 │ ├── Meshes/ # 节点模型 │ └── UI/ # 参数面板4.2 数据层搭建节点、边、邻接表数据层是整个编辑器的地基。我定义了一个UGridGraph类管理所有节点和边。UCLASS() class UGridGraph : public UObject { GENERATED_BODY() public: UPROPERTY() TArrayFGridNode Nodes; UPROPERTY() TArrayFGridEdge Edges; // 邻接表NodeId - 连接的边索引 TMapint32, TArrayint32 Adjacency; int32 AddNode(const FGridNode Node); int32 AddEdge(const FGridEdge Edge); void RebuildAdjacency(); bool Validate() const; };RebuildAdjacency在每次增删边之后调用保证邻接表最新。Validate检查孤立节点、重复边、参数越界等问题在运行仿真前调用一次。注意邻接表用TMapint32, TArrayint32而不是TMultiMap因为TArray的遍历顺序稳定调试的时候好排查。4.3 编辑层实现拖拽、连线、删除编辑层是用户直接接触的部分。我用虚幻的AActor做节点可视化每个节点一个 Actor挂一个UStaticMeshComponent做模型一个UWidgetComponent做标签。拖拽逻辑写在 PlayerController 里void AGridPlayerController::Tick(float DeltaTime) { if (bIsDragging) { FVector WorldPos, WorldDir; DeprojectMousePositionToWorld(WorldPos, WorldDir); FVector Intersection FMath::LinePlaneIntersection( WorldPos, WorldPos WorldDir * 10000, FPlane(FVector::ZeroVector, FVector::UpVector)); DraggedNode-SetActorLocation(SnapToGrid(Intersection)); } }连线用UEdGraph的思路太重我直接自己写了一个ULineTool管理起点、终点、预览线。预览线用USplineComponent画带一点弧度视觉上比直线好看。删除节点时要级联删除所有连接的边。这个逻辑放在UGridGraph::RemoveNode里先遍历邻接表找到所有相关边删完边再删节点。4.4 仿真层接入简化潮流计算原型阶段我用了直流潮流因为它是线性的算得快结果也够用。直流潮流的假设是电压幅值恒定、线路电阻忽略只算相角。核心方程是P B * θ其中P是节点注入功率B是导纳矩阵的虚部θ是节点相角。求解就是解一个线性方程组。// 直流潮流简化实现 TArrayfloat SolveDCPowerFlow(const UGridGraph Graph) { int32 N Graph.Nodes.Num(); TArrayfloat P(N, 0.0f); TArrayfloat Theta(N, 0.0f); // 填充注入功率 for (int32 i 0; i N; i) { if (Graph.Nodes[i].Type ENodeType::Generator) P[i] Graph.Nodes[i].Parameters[Power]; else if (Graph.Nodes[i].Type ENodeType::Load) P[i] -Graph.Nodes[i].Parameters[Power]; } // 构建 B 矩阵并求解省略具体矩阵操作 // ... return Theta; }算出来的相角差映射到线路上就是潮流大小。可视化的时候线路颜色按潮流大小渐变流动动画速度也按潮流大小调。4.5 可视化层颜色、粗细、流动动画可视化是“电网大亨”味道最浓的部分。我做了三层反馈节点颜色电压越限变红正常绿色发电机蓝色负荷橙色。线路粗细按潮流大小缩放潮流越大线越粗。流动动画用 Niagara 做粒子流沿线路方向移动速度正比于潮流。材质用Material Instance Dynamic运行时改参数。线路的流动动画用Panner节点做 UV 偏移简单高效。实操心得流动动画的方向要和潮流方向一致否则用户会看晕。我在边数据里存了一个Direction字段正数表示从 From 到 To负数反过来。5. 常见问题与排查技巧实录5.1 节点拖拽卡顿怎么办拖拽卡顿通常有三个原因节点 Actor 太多、每帧重建邻接表、材质每帧重编译。我的排查顺序是先看Stat Unit确认是 GameThread 还是 RenderThread 瓶颈。如果是 GameThread检查Tick里有没有不必要的遍历。我遇到过每帧调用RebuildAdjacency的情况改成只在增删边时调用帧率立刻从 30 回到 60。如果是 RenderThread检查节点材质有没有开Used with Instanced Static Meshes。没开的话每个节点一个 DrawCall几百个节点就爆了。5.2 连线时射线检测不到节点这个问题多半是碰撞通道设错了。节点 Actor 的StaticMeshComponent要设置Collision Preset为BlockAll或者自定义一个GridNode通道连线工具的射线检测要指定这个通道。还有一种情况是节点被其他 Actor 挡住了比如地面平面。把地面平面的碰撞设成Overlap而不是Block射线就能穿过去打到节点。5.3 潮流计算不收敛直流潮流是线性的理论上一定收敛。如果你用的是交流潮流不收敛的原因通常是孤岛节点、参数越界、初始值太离谱。我的做法是先跑一次连通性检查把孤岛节点标出来再检查参数阻抗不能为零容量不能为负最后初始相角全设零一般都能收敛。问题现象可能原因排查方法解决方式拖拽卡顿每帧重建邻接表Stat Unit 看 GameThread只在增删边时重建连线打不到节点碰撞通道错误可视化碰撞体设置 GridNode 通道潮流不收敛孤岛或参数越界连通性检查标出孤岛校验参数流动动画反向方向字段错误检查边数据修正 Direction 字段打包后材质丢失动态材质未序列化检查打包日志用 Material Instance 资产5.4 打包后参数面板不显示虚幻的 Detail Panel 在打包后有时候会丢自定义分类。原因是UCLASS的meta标签在打包时被裁剪了。解决办法是在DefaultEngine.ini里加一行[/Script/UnrealEd.ProjectPackagingSettings] bShareMaterialShaderCodeTrue然后在UCLASS里显式声明meta(DisplayName...)不要依赖自动生成。6. 后续扩展方向从原型到“电网大亨”原型跑通之后我试过几个扩展方向有的成了有的坑了。多人协作是最值得做的。UnrealHub 本身支持多人编辑我把UGridGraph改成Replicated节点增删改都走 RPC两个人同时拖不同节点没问题。但两个人同时拖同一个节点会冲突需要加锁或者用操作变换OT。原型阶段我用了简单的“先到先得”锁够用但不优雅。经营模拟层是“电网大亨”这个名字暗示的方向。加一个经济系统发电机有成本负荷有收益线路有损耗用户要在满足供电的前提下最小化成本。这个层和拓扑编辑器解耦拓扑编辑器提供网架经营层提供目标函数仿真层算结果。教学演示模式是另一个方向。把编辑器锁成只读加一个“播放”按钮按时间轴展示潮流变化、故障传播、恢复过程。这个模式对渲染要求低Web 方案也能做但虚幻的动画系统做起来更顺手。最后分享一个小技巧如果你也要做类似的编辑器先把数据层和编辑层做扎实可视化层可以后补。我一开始花太多时间调材质和粒子结果数据层一堆 bug返工的时候特别痛苦。数据层稳了可视化就是换皮的事。