Widget connector between nodes

I’m creating a skill tree for my game. have skill tree widget class and node class. Tree widget has many node widgets.

(tree’s hierarchy):

270577-h.png

I know how to check if player is able to buy particular node, I know how to pan the whole tree area and all that stuff.

I want the skill tree to look pretty much like tree from Path of Exile (demo here: Passive Skill Tree - Path of Exile). What I’m missing are connectors between nodes. I would need to create some widgets representing connections in tree’s pre-construct event (I want to have a preview of tree while designing it). Those connectors need to be placed in such positions that both ends are under correct nodes and will light up on one or both ends (depending on which node(s)) are active. The nodes know their neighbors.

I’m pretty sure it’s really simple, but I have no idea how to place the widgets on specific position on canvas.

I’m ok with using either c++ or blueprints.

There is no native support for what you need in BPs.

Drawing straight lines is easy but does not give you much control over the way the lines look - widgets can override onPaint and draw lines.

For something that looks good and is spline based you would need to look into exposing the wires the editor is using to connect its own nodes. They already come with the functionality you’re after, like highlighting, tangents, snapping and are visible in design time, obviously.

When it comes to creating a skills tree, I can see you’ve got nested canvases to pan around. You’d need to figure out what drives what:

  • nodes control and draw connectors

or

  • the connectors create slots where the nodes just plug in