Creating A gui like the explorer

Help and Feedback Scripting Support
1

I’m trying to create a gui when given a parent instance it will show you all the child objects & their parents like how the explorer does it inside a gui

If you could give me any advice or any way how to do this please tell me

(incase this was confusing I’m basically trying to create the explorer gui in another gui)

2

you could just use some for loops and create the ui right?

3

Try and figure out the distance between each section, then add the distance to all guis below the parent (Which you are trying to open the child of)

4

UIListLayout | Roblox Creator Documentation would be useful to you.

5

I’ve done something similar to this but using Roact. Here’s how you would do it without though.

You need to recursively loop through the children of each instance. So let’s say you have a tree that looks like this:

• Model [0]
    • Part [1]
    • Folder [1]
        • Script [2]
    • MeshPart [1]

You start at the Model and loop through the children. As you loop you’re creating a table of data keeping track of the instance itself and the actual level of the instance. I put the levels in the brackets. You’ll use these levels to visualize the tree when generating the GUI. You actual data should end up looking like:

{
  {
    level = 0,
    instance = Model
  },
  {
    level = 1,
    instance = Part
  },
 {
    level = 1,
    instance = Folder
  },
  ...
}

So how do you actually generate this data? Well like I said you need to recursively loop. If the instance you’re at has no children then you don’t do anything. Otherwise if it does you need to loop through the children and generate the above table for each child. You repeat this for every single instance that’s a descendant of the tree.

Here’s where the levels come into play. You want to offset the frames for each level to create the look and feel of an actual hierarchy. So you just multiply your offset constant by the level you’re in.

image

So now you know the offset in pixels for each object in the tree. The next step is opening and closing. The way you do this is when any button is pressed you just find that buttons data in the table generated earlier. Once you have that you loop through until the level is less than that of the button so you know you’re interacting with something on the same level or at a higher level. Everything in between is below the object on the hierarchy so you can just rerender but hide the objects you need to hide or vice versa. It’s worth noting your generated data table should probably also have a state parameter to keep track of what’s opened and closed.

I hope this provides a general concept.

2 Likes
6

Thanks a lot I was wondering how to do this :smiley:

7

hey, i need the same gui but its offsale, can you send it to me at discord? my user is 0_psycho