Making a behavior tree viewer/editor in 2d overlayed on the 3d?

I can’t find tools that let me do what I want, so figure I would integrate a simple tree viewer editor on top of my 3d. What better place if you can edit the behaviors in real time. I prototyped some TCastleShapes with icons and edit box that I put on a TCastleScrollArea. I figured I could then build a whole tree output into this and scroll around in it regardless of how many nodes there are. Is this the right way to go?

The problem is that I don’t see a way to draw the lines to connect the shapes. How would I do that? I would hate to have to create a huge bitmap background to handle a few lines.
I thought maybe a whole 2d viewport, but that doesn’t offer the ability to add shapes and edits.


If I don’t allow freeform layout, I can make connecting lines using shapes that are transparent and have a colored left and bottom border. This will probably work for me.

I have it displaying my behavior tree using these tcastleshapes. It is very long this way. I will have to figure out how to go horizontal more. I guess TCastleScrollView only scrolls up and down?

This looks nice, fits all on the screen, and make it more understandable.

I have connected a callback from the behaviorrunner for the selected animal to update the color of the ‘icon’ as it is processed. It is fun just watching the colors move around as the tree processes and the pig moves.