Visual Scripting for UI Toolkit

Convenience Asset for Visual Scripting in UI Toolkit. Hope you like it

Links:
Asset Store
Manual

This makes interacting with the UI Toolkit a breeze by providing you with lots of useful nodes.

✔️ Super easy to use
Takes only one minute to set up. No coding skills required.

✔️ Supports Unitys Visual Scripting (formerly BOLT)

✔️ Examples & Documentation
Check out Kamgam / UIToolkitVisualScripting / Examples.

✔️ Full Source Code included
I publish this asset with full source code because as a developer I know how annoying it is to not have source code access ❤️

✔️ Supports Unity 2021.2+, 2022, 2023 ... LTS

Links:
Asset Store
Manual

 

How do you set the text on a label?

 

Hi,
in CSS (or USS) the text color has no separate name. It is just called "color". So to set the text (or label) color you simply set the color, like this:





Hope this helps

 

Update: Oh, you asked about TEXT, not color, sorry (my bad).

1) Please install this patch (will soon be available to all):
https://kamgam.com/unity/UIToolkitVs-text-patch-v1.0.2.unitypackage

2) After installing it please execute Tools > UI Toolkit Visual Scripting > Setup.
This will rebuild the nodes.




Once you have it you can do this:




I will try to improve the extensions to cover more elements by default.

In case you need some other properties that are not yet covered by the extensions please refer to the "I need to access properties that are not covered by the extensions." section in the FAQs of the manual. Following that guide you can add pretty much any UI element. If you use "Label" instead of "VisualElement" you can access any property of a label.

 

Excellent, thanks for the patch and fast response

 

Hi @_geo__

I'd like to know more about VS for UIToolkit.

-Would it be possible to use this asset to control an Editor tool designed with UI Toolkit?

-Does the tool create a script as a final result or do we hook it to our UI with some other way?

-I want to make an editor tool that creates a TreeView Element for each instance of a custom Scriptable Object class and display the selected scriptable object in a panel. Think like inventory items (in the project) shown as tree view elements and when clicked, a panel shows the selected inventory item.
Do you think it is possible to do with this tool?

-Does it support Toolbars?

Thanks!

 

Hi,
thanks for asking.

TLDR: I don't think this asset is a good fit for your use-case.

+ It can query visual elements from any other visual element or a UIDocument from a game object. However, with editor tools the question is how do you get hold of the root visual element to query from. That would be up to you to provide since the asset can not know that.

Also keep in mind that VS itself is not necessarily an editor scripting tool. Usually it gets updated by a MonoBehaviour (Start, Update) not the editor update loop. I have not yet tried it for Editor Scripting. In theory, if VS can run in the editor loop you should be able to use the asset just fine. That's a lot of IFs though.

+ It is built upon Unitys Visual Scripting solution (formerly BOLT). So it itself does not generate any scripts. It is saved in a graph asset that is then run by a Visual Scripting State Machine. So basically it is run by a MonoBehaviour in your scene.

+ I think, again, the problem is bootstraping and updating. I am not sure who or how the node graph would be evaluated. In addition to that there is no support for Editor specific elements in the asset. Though, if possible I might add it in future updates.

I'll have to do some research on whether VS usage in the editor is supported by VS itself. At the moment I fear my answer is that it can't do what you are asking, sorry.

I hope I've answered all questions. Feel free to ask more or post your current project. Maybe I can take a look.

 

Thanks for the fast reply,
I understand completely.

I'm not sure if this is going to help but I guess there is a way to query editor scripts that is mentioned in Unity UI Toolkit docs.

https://docs.unity3d.com/Manual/UIE-ListView-TreeView.html

" In Unity, select PlanetsListView.cs in the Project window, and then drag PlanetsListView.uxml into the Uxml field in the Inspector. "

But again, I'm not so sure if this would work for your tool.

Thanks again for the replies!

 

Hi,
thanks, yes that could solve the initialization problem.



How to create and pump the script machine remains a problem (though that would be solvable I think).

I have taken a look into the VS source code and it seems it is not made for Editor use. I think it could be done but not without quite some extensive work (and testing). I think it would be enough to justify another separate asset to keep the runtime and editor parts focused.

I have added it to my list of ideas to investigate (I am curious if I could make this work) but there won't be any quick additions to this asset regarding Editor use.

Current ideas on how to make this work (for those interested): Have the asset create a custom EditorWindow class that contains hooks for a layout (uxml) and a graph (see image above). Then create a ScriptMachine instance and trigger the evetns from the editor window. The big problem is that ScriptMachine is derived from MonoBehaviour, so it won't work unless you have a gameobject.

UPDATE:

Here is where I ended my current attempt:

Spoiler

Code (csharp):

1. using Unity.VisualScripting;
2. using UnityEditor;
3. using UnityEngine;
4. using UnityEngine.UIElements;
5.  
6. public class VisualScriptEditorWindow : EditorWindow
7. {
8.     [SerializeField]
9.     protected VisualTreeAsset uxml;
10.  
11.     [SerializeField]
12.     protected ScriptGraphAsset graph;
13.  
14.     [MenuItem("Window/Visual Scripting Editor Window")]
15.     public static void CreateWindow()
16.     {
17.         GetWindow<VisualScriptEditorWindow>("Visual Scripting Editor Window");
18.     }
19.  
20.     void CreateGUI()
21.     {
22.         Debug.Log("OnCreateGUI");
23.  
24.         uxml.CloneTree(rootVisualElement);
25.  
26.         Debug.Log("OnEnable: hi there, root is: " + rootVisualElement);
27.  
28.         // var machine = new ScriptMachine(); // Not possible since ScriptMachine is derived from a game object.
29.        // Inheritance: ScriptMachine > EventMachine > Machine > LudiqBehaviour > MonoBehaviour
30.  
31.         // TODO: Add a gameobject to any open scene (don't save) and use that OR find a way to create machines without MonoBejaviours.
32.  
33.         var pointer = graph.GetReference();
34.         var reference = pointer.AsReference();
35.  
36.         GraphInstances.Instantiate(reference); // <- will fail without a Machine!
37.  
38.         // Either of these two should work:
39.         // XEventGraph.TriggerEventHandler(reference, (hook) => hook.name == "CreateGUI", new EmptyEventArgs(), (parent) => true, false);
40.         // EventBus.Trigger(new EventHook("CreateGUI", this));
41.     }
42. }

Code (csharp):

1.  
2. using Unity.VisualScripting;
3.  
4. [UnitCategory("Events/Editor")]
5. public class CreateGUIListener: EventUnit<EmptyEventArgs>
6. {
7.     const string hookName = "CreateGUI";
8.  
9.     ControlOutput CreateGUI;
10.  
11.     public override EventHook GetHook(GraphReference reference)
12.     {
13.         return new EventHook(hookName, new EmptyEventArgs());
14.     }
15.  
16.     protected override bool register => true;
17.  
18.     protected override void Definition()
19.     {
20.         CreateGUI = ControlOutput(nameof(CreateGUI));
21.     }
22. }
23.  
24.  

I'll not pursue this any further (for now) as it is clear to me that VS was never indented for Editor use. It's just too tightly coupled to the MonoBehaviour lifecycle. Event if I got the code above to work it would be unclear what side effects pumping the machine without MonoBehaviours would have.