How to clone or create a prefab out of a complex VisualElement

Unity Engine
1

I have a complex visual element, which consists of multiple other visual elements, a scroll view and a few text labels. Here is the example:

7564324--936157--complex_visual_element.png

Now I know I can save the styles of all of these elements into a stylesheet file (uss) and simply apply all the styles by calling: .styleSheets.Add(stats_object_uss);

The issue I am having now is I need to manually recreate all these elements and parent them, which feels like the wrong way to do it. For example, this is how I do it for simple visual elements:

UnityEngine.UIElements.Button floorSelectBtn = new UnityEngine.UIElements.Button();
floorSelectBtn.AddToClassList("Floor_btn");
floorSelectBtn.styleSheets.Add(game_object_uss);
floorSelectBtn.text = (string)elem["floor"];
floorSelectBtn.clicked += delegate { ShowFloor((int)elem["floor"]); };

There must be a fast way to get the whole childelements of #Stats_object at once, for exampe by saving this as a prefab somehow or I could leave one dummy element and make clones.

Thanks in advance

2

Hello! I’m not sure if I’m missing something on your question, but have you thought about having the parts you want to reuse as their own UXML file, and using that as a Template? You can check more about it in this manual page, look for the session called “Reusing UXML Files”: Unity - Manual: Writing UXML Templates

2 Likes
3

Thanks for the reply, so basically the UXML is the prefab. As a rule of thumb one can say if I start to repeat myself and use copy the same Visual Element, I should create it as a seperate UXML.

I can also parent different UXML’s? Because they also have their own panel settings with a sort order.

4

Exactly! That way it can be reused over and over :sunglasses:

Not entirely sure what you mean here though. You can add a full UXML as a child of any VisualElement, be it one you create by code or instantiated from a different UXML.

Be aware, though, that if you use multiple PanelSettings, you may impact performance. Ideally, if you have the same resolution configuration you should share a PanelSettings and order your layers inside it, either by multiple UIDocuments or even within the C# code by bringing different elements forward/backwards.

5

Thanks a lot for the clarification. I have now a much better understanding on how it is intended to use the UXML’s.

True, I can simply use the same panel settings! Thanks again.

1 Like
6

Hello again. Found some time to continue on my game again.

In theory I understand how it should work, but I am still stuck. After many different attempts I feel like I am close now, but I am stuck on an error, which does not really help me:

ArgumentNullException: Value cannot be null.
Parameter name: e

So to sum it up, here is my main UI. You see, there is a scrollview with “Stats_object”. In future I want to put multiple Stats_objects there:

7585444--940378--q1.png
7585444--940378--q1.png1369Ă—617 91.9 KB

Now what I did is: I created a new UXML file, which shares the same panel settings as my main GUI and replicated this element there. I had to create a new empty object and add the UI Document. I also had to deactive the object, because its just a template/dummy:

7585444--940381--2.png
7585444--940381--2.png1909Ă—601 150 KB

Now in the last step I have created a SerializeField in my UI controller script and saved the reference there:

[SerializeField] UIDocument statsObject

7585444--940384--3.png

Now I was able to make Instances of this UI Document. But the code crashes with the error above. Am I even doing it correctly? I hope my example is understandable.

Here is the code:

int inserts = 0;
while (inserts != 3) {
    UIDocument statsObjectNew = Instantiate(statsObject);
    statsObjectNew.enabled = true;
    VisualElement statsObjectC = statsObjectNew.rootVisualElement.Q<VisualElement>("StatsObject");
    //statsObjectC.styleSheets.Add(game_object_uss);
    UnityEngine.UIElements.Label statsObjectTitle = statsObjectC.Q<UnityEngine.UIElements.Label>("Stats_object_title");
    statsObjectTitle.text = "Floor: " + (string)elem["floor"];
    stats.Insert(0, statsObjectC);
    inserts += 1;
    Debug.Log("inserted");
}

EDIT:

Fixed it, I had to make a real prefab out of it. The error was caused by it beeing disabled. Now everything works. I leave the question as is for others or maybe there is better way to do it!

7

I’m not sure exactly from what line that error is coming from, without a full stack trace it’s very tricky. I see that you fixed it by having it as a prefab, and not an instance on your scene, and I’m glad you’re not blocked anymore.

However, I invite you to think of solving this slightly differently. Especially because by each copy being their own UIDocument, that means they’ll each take the whole screen, when I suspect you may want these copies to be part of your existing UI and not standalone parts of the UI. Also, by having your UXML file you can instantiate that and not a UIDocument, and then add that to the visual tree hierarchy wherever you want to add it to.

If this is a path you’d like to pursue, what you’ll need to do is load the UXML asset (through Resources.Load if they’re in the Resources folder, or by having a SerializeField of type VisualTreeAsset - instead of UIDocument) and with that call Instantiate:

var statsObjectCopy = statsObjectVisualTreeAsset.Instantiate();

And now you can query for the fields you want to modify on statsObjectCopy and add it to your visual tree :sunglasses:

3 Likes
8

Thanks a lot!