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.

Sorry for delay in answering, as with other threads.

I see this is solved – the UI looks good.

As for drawing lines: TCastleShape doesn’t have now a shape that is “just a line”. We could add it (e.g. “diagonal /”, “diagonal \”) though I’m not sure do you need it anymore :slight_smile: All looks good. You could invent your own class to draw the line in any way using Custom drawn 2D controls: player HUD | Manual | Castle Game Engine . Basically, just derive a descendant from TCastleUserInterface (or even TCastleShape, to add additional drawing on shape). Then override Render method to draw… well, anything :slight_smile: You can use DrawPrimitive2D to draw arbitrary things, including lines composed from as many segments as you wish.

TCastleScrollView is indeed only for up-down scrolling. This was good enough for the usage I seen so far, but if necessary we could add an option for horizontal scrolling (or both horizontal and vertical).

I don’t need diagonal. Using skinny rectangle shapes works for lines to connect the nodes.
At some point being able to use the TCastleScrollView horizontally will be handy, but my behavior trees haven’t gotten that big yet.

.